/* ════════════════════════════════════════════════════════════════
   app.css — Ajustes de UX/UI sobre bshark.css
   Da más profundidad y contraste: fondo con cuerpo, bordes definidos,
   sombras suaves en tarjetas. Cargar DESPUÉS de bshark.css.
════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #E8ECF2;   /* fondo de página con más cuerpo (antes #F5F8FA) */
  --border:    #E0E5ED;   /* borde visible (antes casi invisible) */
  --border-md: #CCD3DF;
  --text3:     #868D9E;   /* secundario un poco más legible */
}

html[data-theme="dark"] {
  --bg:        #0B1220;
  --surface:   #141E34;
  --border:    #25314B;
  --border-md: #37445F;
  --text3:     #94A3B8;
}

/* Profundidad en tarjetas principales (surface + radio grande) */
.bg-surface.rounded-lg2 {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
}
html[data-theme="dark"] .bg-surface.rounded-lg2 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px rgba(0, 0, 0, .32);
}

/* Separación sutil de header y sidebar respecto al fondo */
header.sticky { box-shadow: 0 1px 0 rgba(16, 24, 40, .05); }
.sidebar { box-shadow: 1px 0 0 rgba(16, 24, 40, .04); }
html[data-theme="dark"] header.sticky { box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }

/* Hover de tarjetas clickeables: un poco más de elevación */
.bg-surface.rounded-lg2.cursor-pointer:hover {
  box-shadow: 0 2px 6px rgba(16, 24, 40, .07), 0 10px 24px rgba(16, 24, 40, .09);
  transform: translateY(-1px);
}

/* Filas de tabla con hover más perceptible */
tbody tr.cursor-pointer:hover { background: var(--bg); }

/* Inputs / selects: borde algo más definido al reposo */
input, textarea { border-color: var(--border-md); }

/* ── Impresión / export a PDF ───────────────────────────────── */
.print-only { display: none; }
@media print {
  aside.sidebar, header.sticky, .no-print { display: none !important; }
  /* Hero de sección: en pantalla es oscuro con texto blanco; al imprimir lo
     volvemos claro para que el texto sea legible en el PDF. */
  .hero-banner { background: #fff !important; color: #111 !important; border-bottom: 2px solid var(--accent) !important; border-radius: 0 !important; padding: 0 0 8px !important; }
  .hero-banner * { color: #111 !important; }
  .hero-banner .hero-wash, .hero-banner .hero-deco { display: none !important; }
  .hero-banner .bg-white\/15 { background: transparent !important; padding: 0 !important; }
  /* El margen vive en @page para que se repita en TODAS las páginas (un padding
     en el contenido solo deja margen vertical en la 1ª y última hoja). */
  main { padding: 0 !important; max-width: 100% !important; }
  body, html { background: #fff !important; }
  .print-only { display: block !important; }
  /* tarjetas planas, sin cortar a media página */
  .bg-surface.rounded-lg2 { box-shadow: none !important; border: 1px solid #d8dde6 !important; break-inside: avoid; }
  /* expandir áreas con scroll para que se imprima todo */
  .overflow-y-auto, .overflow-x-auto, [class*="max-h-"] { max-height: none !important; overflow: visible !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .accent-bg, .accent-soft, .bg-green-l, .bg-red-l, .bg-amber-l, .bg-page\/60, [class*="bg-"] {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  table { font-size: 10.5px !important; width: 100% !important; border-collapse: collapse !important; }
  /* repetir el encabezado de la tabla en cada página y no cortar filas */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, img, svg { break-inside: avoid; page-break-inside: avoid; }
  thead tr { background: #f3f4f6 !important; }
  th, td { border: 1px solid #e5e7eb !important; padding: 5px 7px !important; vertical-align: top; }
  /* ocultar controles de formulario en impresión; se muestran sus equivalentes .print-only */
  .no-print, button.no-print, input.no-print, select.no-print { display: none !important; }
  .print-only-inline { display: inline-block !important; }
  /* las celdas con opacidad reducida deben quedar legibles en papel */
  tr.opacity-60 { opacity: 1 !important; color: #6b7280; }
  /* Márgenes de hoja (se repiten en cada página). Más holgado abajo para el
     pie. Si el navegador muestra su cabecera/URL, destilda "Encabezados y pies
     de página" en el diálogo de impresión (queda recordado). */
  @page { margin: 16mm 13mm; }

  /* ── Saltos de página y viudas/huérfanas para cortes prolijos ── */
  h1, h2, h3, h4, .dchapter, thead { break-after: avoid; page-break-after: avoid; }
  h1, h2, h3, h4, .dchapter { break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
  .print-keep, .bg-surface.rounded-lg2, .rounded-card, .rounded-lg2 { break-inside: avoid; page-break-inside: avoid; }
  .print-break-before { break-before: page; page-break-before: always; }
  /* el bloque imprimible (acta/cert/dossier) puede fluir a varias páginas:
     fuerza 'auto' por encima del break-inside:avoid de las tarjetas. */
  .den-acta, .den-consol, .eipd-acta, .cons-cert, .dossier-doc { break-inside: auto !important; page-break-inside: auto !important; }
  .dossier-doc table, .dossier-doc h3 { break-inside: avoid; }

  /* Acta individual de denuncia: al imprimir el informe, solo se ve el acta */
  body.print-acta * { visibility: hidden !important; }
  body.print-acta .den-acta, body.print-acta .den-acta * { visibility: visible !important; }
  body.print-acta .den-acta { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  body.print-acta .den-acta th, body.print-acta .den-acta td { border: 0 !important; }

  /* Consolidado mensual: solo se ve el bloque consolidado */
  body.print-consol * { visibility: hidden !important; }
  body.print-consol .den-consol, body.print-consol .den-consol * { visibility: visible !important; }
  body.print-consol .den-consol { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  body.print-consol .den-consol th, body.print-consol .den-consol td { border: 0 !important; }

  /* Ficha de EIPD: al imprimir el informe, solo se ve la ficha */
  body.print-eipd * { visibility: hidden !important; }
  body.print-eipd .eipd-acta, body.print-eipd .eipd-acta * { visibility: visible !important; }
  body.print-eipd .eipd-acta { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  body.print-eipd .eipd-acta th, body.print-eipd .eipd-acta td { border: 0 !important; }

  /* Certificado de consentimiento: al imprimir, solo se ve el certificado */
  body.print-cert * { visibility: hidden !important; }
  body.print-cert .cons-cert, body.print-cert .cons-cert * { visibility: visible !important; }
  body.print-cert .cons-cert { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  body.print-cert .cons-cert th, body.print-cert .cons-cert td { border: 0 !important; }

  /* Documento de plantilla legal: al imprimir, solo se ve el documento */
  body.print-plantilla * { visibility: hidden !important; }
  body.print-plantilla .plantilla-doc, body.print-plantilla .plantilla-doc * { visibility: visible !important; }
  body.print-plantilla .plantilla-doc { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
}
/* Documento legal (vista/editor en pantalla) */
.prose-doc h2 { font-size: 16px; font-weight: 800; margin: 2px 0 8px; color: var(--text1); }
.prose-doc h3 { font-size: 13.5px; font-weight: 700; margin: 12px 0 4px; color: var(--text1); }
.prose-doc p { margin: 5px 0; color: var(--text1); }
.prose-doc ul { margin: 5px 0 5px 20px; list-style: disc; }
.prose-doc li { margin: 2px 0; }
.prose-doc a { color: var(--accent); text-decoration: underline; }
.plantilla-doc { display: none; }
.plantilla-doc h2 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.plantilla-doc h3 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; }
.plantilla-doc p, .plantilla-doc li { font-size: 12.5px; line-height: 1.5; margin: 4px 0; }
.plantilla-doc ul { margin: 4px 0 4px 18px; }
.print-only-inline { display: none; }
.den-acta, .den-consol, .eipd-acta, .cons-cert { display: none; }

/* Dossier de cumplimiento de datos (documento imprimible) */
.dossier-doc .dchapter { font-size: 14px; font-weight: 800; color: var(--accent); margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border-md, #e5e7eb); }
.dossier-doc p { margin: 3px 0; }
.dossier-doc .dtable { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 4px 0 6px; }
.dossier-doc .dtable th { text-align: left; padding: 5px 7px; border-bottom: 1.5px solid var(--accent); white-space: nowrap; }
.dossier-doc .dtable td { padding: 5px 7px; border-bottom: 1px solid var(--border-sm, #eee); vertical-align: top; }
@media print { .dossier-doc { border: 0 !important; padding: 0 !important; } .dossier-doc .dchapter { break-after: avoid; } .dossier-doc .dtable { page-break-inside: auto; } .dossier-doc tr { page-break-inside: avoid; } }

/* Sidebar: hover y activo usan el color primario (acento del workspace) */
.sidebar .nav-item { color: var(--text2); }
.sidebar .nav-item .nav-ico { color: var(--text3); transition: background .12s ease, color .12s ease; }
.sidebar .nav-item:hover,
.sidebar .nav-item.is-active { background: var(--accent); color: #fff; }
.sidebar .nav-item:hover .nav-ico,
.sidebar .nav-item.is-active .nav-ico { background: rgba(255, 255, 255, .22); color: #fff; }

/* ──────────────────────────────────────────────────────────────
   Animaciones de gráficos (anillos donut, líneas/radar, barras).
   El truco de "keyframe sin 100%" hace que el valor final sea el
   que cada elemento ya tiene inline (stroke-dashoffset / width),
   así no hay que calcular el destino por elemento.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Anillos/donuts: crecen desde vacío hasta su porcentaje */
  @keyframes bsk-ring-grow { from { stroke-dashoffset: 999; } }
  .anim-ring { animation: bsk-ring-grow 1.15s cubic-bezier(.22,.7,.2,1) both; }

  /* Líneas, sparklines y polígonos de radar: se "dibujan" */
  @keyframes bsk-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
  .anim-draw { stroke-dasharray: 1200; animation: bsk-draw 1.5s ease-out forwards; }

  /* Relleno del radar / áreas: aparece suave tras el trazo */
  @keyframes bsk-fade-in { from { opacity: 0; } }
  .anim-fade { animation: bsk-fade-in 1.1s ease-out .35s both; }

  /* Puntos del radar: aparecen en cascada (usar --d como retraso) */
  @keyframes bsk-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
  .anim-pop { transform-box: fill-box; transform-origin: center; animation: bsk-pop .4s ease-out both; animation-delay: var(--d, .5s); }

  /* Barras horizontales: crecen desde 0 hasta su ancho inline */
  @keyframes bsk-bar-grow { from { width: 0 !important; } }
  .anim-bar { animation: bsk-bar-grow 1.05s cubic-bezier(.22,.7,.2,1) both; }

  /* Barras verticales (columnas): crecen desde 0 hasta su alto inline */
  @keyframes bsk-barv-grow { from { height: 0 !important; } }
  .anim-barv { animation: bsk-barv-grow 1.05s cubic-bezier(.22,.7,.2,1) both; animation-delay: var(--d, 0s); }

  /* Entrada suave de tarjetas de gráfico */
  @keyframes bsk-rise { from { opacity: 0; transform: translateY(8px); } }
  .anim-rise { animation: bsk-rise .5s ease-out both; }
}