/* EMET Web App — paleta editorial canon (pivote 2026-05-11).
 *
 * Audiencia objetivo: CEO + CFO + Board + Accionistas.
 * Referentes editoriales: Financial Times / Bloomberg + Palantir Foundry.
 *
 * Paleta canon vigente:
 * - Pergamino claro como fondo del documento.
 * - Marfil cálido como fondo de tarjetas internas.
 * - Azul editorial como acento único decorativo.
 * - Verde/naranja/ámbar/rojo solo en semántica real (badges).
 *
 * Paleta v1 (cantoriana: negro + púrpura + ámbar) deprecada como
 * decorativo desde el 11-may. Aliases legacy se mantienen apuntando
 * a colores canon para retro-compat de templates antiguos.
 */

:root {
  /* === Canon editorial 2026-05-11 === */
  --fondo-pergamino: #E8E4DC;       /* body del documento */
  --fondo-marfil: #FAF7F1;          /* tarjetas y secciones internas */
  --fondo-marfil-claro: #F5F1E8;    /* alterantivo más claro */
  --borde-suave: #D4CFC4;           /* separadores sutiles */
  --borde-fuerte: #C4BFB4;          /* bordes más visibles */
  --texto-principal: #1F2937;       /* texto principal sobre fondo claro */
  --texto-secundario: #4B5563;      /* texto subordinado, captions */
  --texto-atenuado: #6B7280;        /* metadatos, fechas, timestamps */
  --negro-tinta: #0F0F14;           /* titulares fuertes */
  --hover-tabla: rgba(30,58,95,0.05);
  --hover-summary: #F0EDE5;

  /* === Acento decorativo único === */
  --acento-azul: #1E3A5F;           /* azul editorial — TODOS los acentos */
  --acento-azul-soft: rgba(30,58,95,0.10);
  --acento-azul-glow: rgba(30,58,95,0.18);

  /* === Acentos semánticos (SOLO en semántica real, no decorativo) === */
  --verde: #16A34A;
  --verde-soft: rgba(22,163,74,0.12);
  --ambar: #FBBF24;
  --ambar-soft: rgba(251,191,36,0.15);
  --naranja: #F97316;
  --naranja-soft: rgba(249,115,22,0.12);
  --rojo: #DC2626;
  --rojo-soft: rgba(220,38,38,0.10);

  /* === Aliases legacy (apuntan al canon nuevo) === */
  --purpura: var(--acento-azul);
  --purpura-soft: var(--acento-azul-soft);
  --purpura-glow: var(--acento-azul-glow);
  --gris-oscuro: var(--texto-principal);
  --gris-medio: var(--texto-atenuado);
  --gris-claro: var(--texto-secundario);
  --gris-borde: var(--borde-suave);
  --bg-app: var(--fondo-pergamino);
  --bg-card: var(--fondo-marfil);
  --bg-card-dark: var(--fondo-marfil);
  --bg-section: var(--fondo-marfil-claro);
  --bg-section-dark: var(--fondo-marfil);
  --negro-suave: var(--fondo-marfil-claro);
  --texto-claro: var(--texto-principal);
  --texto-medio: var(--texto-secundario);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  background: var(--fondo-pergamino);
  color: var(--texto-principal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Header */
header {
  background: var(--fondo-marfil);
  border-bottom: 3px solid var(--acento-azul);
  padding: 18px 0;
  position: sticky; top: 0; z-index: 100;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo {
  font-family: 'Times New Roman', serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: var(--negro-tinta);
  line-height: 1.1;
}
.logo .hebreo {
  display: inline;
  color: var(--acento-azul);
  margin-right: 6px;
  font-size: 1.6rem;
  font-family: 'Times New Roman', serif;
  letter-spacing: 0;
  text-transform: none;
}
.logo span:not(.hebreo) {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  color: var(--texto-secundario);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-right a {
  font-size: 0.85rem;
  color: var(--texto-principal);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.15s;
}
.nav-right a:hover { background: var(--acento-azul-soft); color: var(--acento-azul); }
.user-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--texto-atenuado);
}

/* Main */
main { padding: 40px 0 80px; min-height: calc(100vh - 200px); }

h1 {
  font-family: 'Times New Roman', serif;
  font-size: 2.4rem;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--negro-tinta);
}
/* Énfasis EM/I global: la paleta editorial EMET NO usa cursiva.
   En vez de italic, el énfasis se da con color azul editorial. */
em, i, cite, dfn {
  font-style: normal;
  color: var(--acento-azul);
}
h1 em, h2 em, h3 em { color: var(--acento-azul); font-style: normal; }
h2 {
  font-family: 'Times New Roman', serif;
  font-size: 1.6rem;
  font-weight: 400;
  margin-top: 32px;
  margin-bottom: 14px;
  color: var(--negro-tinta);
}
h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--acento-azul);
}
.subtitle {
  color: var(--texto-secundario);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-family: 'JetBrains Mono', monospace;
}

p, li { color: var(--texto-principal); }

code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  background: var(--fondo-marfil-claro);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--acento-azul);
  border: 1px solid var(--borde-suave);
}

/* Cards */
.card {
  background: var(--fondo-marfil);
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--acento-azul);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 16px;
  color: var(--texto-principal);
  box-shadow: 0 1px 4px rgba(15,15,20,0.03);
}
.card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--negro-tinta);
}
.card-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--texto-atenuado);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.card strong { color: var(--negro-tinta); }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fondo-marfil);
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  font-size: 0.88rem;
}
thead tr { background: var(--negro-tinta); color: var(--fondo-marfil); }
th, td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--borde-suave); }
th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fondo-marfil);
  font-weight: 600;
}
td { color: var(--texto-principal); }
td a { color: var(--acento-azul); text-decoration: none; }
td a:hover { color: var(--negro-tinta); text-decoration: underline; }
tbody tr:hover { background: var(--hover-tabla); }
td.num { font-family: 'JetBrains Mono', monospace; text-align: right; }

/* ---------------------------------------------------------------------------
 * Wrapper del resumen ejecutivo (renderiza ya con paleta clara propia).
 * Mantener compatibilidad con el HTML que genera el módulo executive_summary.
 * ------------------------------------------------------------------------- */
.resumen-ejecutivo-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.resumen-ejecutivo-wrapper p,
.resumen-ejecutivo-wrapper li {
  color: var(--texto-principal);
  font-size: 15px;
  line-height: 1.7;
}
.resumen-ejecutivo-wrapper h1,
.resumen-ejecutivo-wrapper h2,
.resumen-ejecutivo-wrapper h3,
.resumen-ejecutivo-wrapper h4 {
  color: var(--negro-tinta);
  font-weight: 500;
}
.resumen-ejecutivo-wrapper table {
  background: white;
  border: 1px solid var(--borde-suave);
}
.resumen-ejecutivo-wrapper thead tr {
  background: var(--negro-tinta);
  color: var(--fondo-marfil);
}
.resumen-ejecutivo-wrapper th {
  color: var(--fondo-marfil);
  font-size: 11px;
  letter-spacing: 1.5px;
}
.resumen-ejecutivo-wrapper td {
  color: var(--texto-principal);
  font-size: 14px;
  border-bottom: 1px solid var(--borde-suave);
}
.resumen-ejecutivo-wrapper td a {
  color: var(--acento-azul);
  text-decoration: underline;
}
.resumen-ejecutivo-wrapper tbody tr:hover {
  background: var(--hover-tabla);
}

/* Glosario inline */
.resumen-ejecutivo-wrapper .glosario,
.glosario {
  border-bottom: 1px dotted var(--acento-azul);
  cursor: help;
  position: relative;
}
.resumen-ejecutivo-wrapper .glosario:hover,
.glosario:hover {
  background: var(--acento-azul-soft);
}

/* Forms */
.form-card {
  background: var(--fondo-marfil);
  border: 1px solid var(--borde-suave);
  border-left: 4px solid var(--acento-azul);
  border-radius: 10px;
  padding: 36px;
  max-width: 480px;
  margin: 60px auto;
  box-shadow: 0 4px 20px rgba(15,15,20,0.06);
}
.form-card h1 { font-size: 1.8rem; margin-bottom: 6px; text-align: center; }
.form-card .subtitle { text-align: center; margin-bottom: 32px; }

label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--texto-secundario);
  margin-bottom: 6px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}
input[type="text"], input[type="email"], input[type="password"], input[type="file"], select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borde-suave);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #FFFFFF;
  color: var(--texto-principal);
  margin-bottom: 18px;
  transition: all 0.15s;
}
input::placeholder { color: var(--texto-atenuado); }
input:focus, select:focus {
  outline: none;
  border-color: var(--acento-azul);
  box-shadow: 0 0 0 3px var(--acento-azul-soft);
  background: #FFFFFF;
}

button, .btn {
  background: var(--acento-azul);
  color: #FFFFFF;
  border: 1px solid var(--acento-azul);
  padding: 11px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.15s;
  font-family: inherit;
  letter-spacing: 0.3px;
}
button:hover, .btn:hover {
  background: var(--negro-tinta);
  border-color: var(--negro-tinta);
  box-shadow: 0 2px 12px var(--acento-azul-glow);
}
.btn-secondary {
  background: transparent;
  color: var(--acento-azul);
  border: 1px solid var(--acento-azul);
}
.btn-secondary:hover {
  background: var(--acento-azul-soft);
  color: var(--acento-azul);
  box-shadow: none;
}
.btn-orange {
  background: var(--naranja);
  color: white;
  border-color: var(--naranja);
}
.btn-orange:hover { background: #DD5F0F; border-color: #DD5F0F; }
.btn-green {
  background: var(--verde);
  color: white;
  border-color: var(--verde);
}
.btn-green:hover { background: #0DA372; border-color: #0DA372; }

/* Status badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}
.badge-queued { background: var(--ambar-soft); color: #92400E; }
.badge-running { background: var(--acento-azul-soft); color: var(--acento-azul); }
.badge-completed { background: var(--verde-soft); color: #065F46; }
.badge-failed { background: var(--rojo-soft); color: #991B1B; }
.badge-active { background: var(--verde-soft); color: #065F46; }
.badge-archived { background: rgba(107,114,128,0.15); color: var(--texto-secundario); }
.badge-pending { background: var(--naranja-soft); color: #7C2D12; }
.badge-parsed { background: var(--verde-soft); color: #065F46; }
.badge-pdf, .badge-xlsx, .badge-csv { background: var(--acento-azul-soft); color: var(--acento-azul); }

/* Alerts */
.alert {
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  border-left: 3px solid;
  background: var(--fondo-marfil);
}
.alert-error { background: var(--rojo-soft); border-left-color: var(--rojo); color: #991B1B; }
.alert-success { background: var(--verde-soft); border-left-color: var(--verde); color: #065F46; }
.alert-info { background: var(--acento-azul-soft); border-left-color: var(--acento-azul); color: var(--acento-azul); }

/* Empty state */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--texto-secundario);
  background: var(--fondo-marfil);
  border: 2px dashed var(--borde-fuerte);
  border-radius: 10px;
}
.empty h3 { color: var(--texto-secundario); }
.empty code {
  background: var(--fondo-marfil-claro);
  border-color: var(--borde-suave);
}

/* Footer */
footer {
  border-top: 1px solid var(--borde-suave);
  padding: 28px 0;
  margin-top: 60px;
  text-align: center;
  color: var(--texto-secundario);
  font-size: 0.78rem;
  background: var(--fondo-marfil);
}
footer .logo-footer {
  font-family: 'Times New Roman', serif;
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--negro-tinta);
  margin-bottom: 4px;
}
footer .logo-footer::before {
  content: 'אמת ';
  color: var(--acento-azul);
}

/* ===========================================================================
 * RESPONSIVE — mobile first ajustes (2026-05-12)
 * ===========================================================================
 *
 * Audiencia objetivo del webapp: CEO + CFO + Board + Accionistas que
 * con frecuencia abren links desde iPhone primero. Toda regla móvil debe
 * priorizar legibilidad y tap targets generosos (mínimo 44px).
 *
 * Breakpoints:
 *   - max-width: 980px → tablet portrait y desktop pequeño (cards 1 col).
 *   - max-width: 720px → mobile (ajustes mayores: header, nav, forms).
 *   - max-width: 480px → mobile estrecho (tipografía y padding más chico).
 * --------------------------------------------------------------------------- */

/* Tablets y desktop pequeño */
@media (max-width: 980px) {
  .container { padding: 0 22px; }
  main { padding: 28px 0 60px; }
  .entregables-grid {
    grid-template-columns: 1fr;
  }
  .analysis-meta {
    gap: 14px;
    font-size: 0.78rem;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .container { padding: 0 16px; }
  h1 { font-size: 1.7rem; line-height: 1.2; }
  h2 { font-size: 1.3rem; margin-top: 24px; }
  h3 { font-size: 0.95rem; }

  header { padding: 12px 0; }
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .logo { font-size: 1.2rem; }
  .logo span:not(.hebreo) { font-size: 0.6rem; }
  .nav-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
  }
  .nav-right a {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .user-info {
    font-size: 0.68rem;
    flex-basis: 100%;
  }

  .form-card {
    margin: 24px 0;
    padding: 24px 20px;
    max-width: none;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="file"], select {
    font-size: 16px;  /* evita zoom automático del iPhone */
  }

  /* Tablas: scroll horizontal en móvil (no rompen layout) */
  .card, .form-card {
    padding: 20px 18px;
  }
  table {
    font-size: 0.78rem;
  }
  th, td {
    padding: 8px 10px;
  }

  /* Entregables-cards full width */
  .entregable-card {
    padding: 22px 22px;
  }
  .entregable-titulo {
    font-size: 1.15rem;
  }

  /* Botones de acción más generosos en mobile (tap targets) */
  button, .btn {
    padding: 12px 20px;
    font-size: 0.92rem;
    min-height: 44px;
  }

  /* Footer compacto */
  footer { padding: 20px 0; margin-top: 40px; }
  footer .logo-footer { font-size: 1rem; }
}

/* Mobile estrecho (iPhone SE, etc.) */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  h1 { font-size: 1.45rem; }
  .nit-badge {
    margin-left: 0;
    margin-top: 8px;
    display: inline-block;
    font-size: 0.7rem;
  }
  .analysis-meta {
    flex-direction: column;
    gap: 6px;
  }
}

/* Wrappers de scroll horizontal para contenido que no cabe */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Iframe del D-3 — fondo blanco para que la paleta del informe se vea bien */
iframe { background: #FFFFFF; border-radius: 8px; }

/* Headings dentro de tarjetas (info del cliente, formularios secundarios) */
.card h3 {
  color: var(--acento-azul);
  margin-top: 4px;
}

/* NIT-badge: identificador discreto al lado del nombre del cliente */
.nit-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--texto-secundario);
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin-left: 14px;
  padding: 4px 12px;
  border: 1px solid var(--borde-suave);
  border-radius: 4px;
  font-style: normal;
  font-weight: 400;
  position: relative;
  top: -4px;
  background: var(--fondo-marfil-claro);
}


/* === Addendum 107: pulido UX === */

/* CTA de los entregables como botón real (era texto plano pequeño) */
.entregable-cta {
  display: inline-block;
  background: var(--acento-azul);
  color: var(--fondo-marfil) !important;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  margin-top: 14px;
  transition: opacity .15s ease;
}
.entregable-card:hover .entregable-cta { opacity: 0.88; }

/* Header compacto en móvil: el email no aporta y comía pantalla */
@media (max-width: 640px) {
  .header-inner { flex-direction: row; align-items: center; gap: 10px; }
  .user-info { display: none; }
  .nav-right { width: auto; gap: 14px; }
  .logo span:not(.hebreo) { display: none; }
}