/* ==========================================================================
   ELEMENTAL AUDIOVISUALES — Plantilla de Cotización PDF
   Misma identidad que la web: cine editorial oscuro · amarillo #ffe609
   como acento quirúrgico · Archivo + IBM Plex Mono
   ========================================================================== */

:root {
  --yellow:    #ffe609;   /* acento: totales, palabras clave, detalles */
  --ink:       #231f2e;   /* morado-negro base del logo */
  --ink-deep:  #17141f;   /* fondo principal del documento */
  --ink-panel: #2a2537;   /* superficies elevadas */
  --paper:     #f4f2ec;   /* texto principal, blanco cálido */
  --muted:     #9d97ad;   /* texto secundario */
  --hairline:  rgba(244, 242, 236, 0.1);

  --font-display: "Archivo", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Variables semánticas (cambian con el tema) */
  --bg:        var(--ink-deep);
  --fg:        var(--paper);
  --secondary: var(--muted);
  --line:      var(--hairline);
  --panel:     var(--ink-panel);
  --grid:      rgba(244, 242, 236, 0.018);  /* líneas del grid de fondo */
}

/* ---------- Tema claro (para impresión física, ahorra tinta) ---------- */
body.tema-claro {
  --bg:        var(--paper);
  --fg:        var(--ink);
  --secondary: #6d6878;
  --line:      rgba(35, 31, 46, 0.16);
  --panel:     #eae7dd;
  --gold:      #857700;  /* amarillo legible sobre papel para detalles finos */
  --grid:      rgba(35, 31, 46, 0.022);
}

/* En claro, el amarillo puro no contrasta sobre papel:
   en títulos pasa a resaltado tipo marcador y en detalles a dorado oscuro */
body.tema-claro .intro__titulo em,
body.tema-claro .doc-foot__tagline em {
  background: var(--yellow); color: var(--ink);
  padding: 0 1.2mm; margin: 0 -0.4mm;
}
body.tema-claro .partes__label em,
body.tema-claro .kicker em,
body.tema-claro .condiciones li .mono,
body.tema-claro .doc-head__numero,
body.tema-claro .doc-head__wordmark,
body.tema-claro .doc-foot__contacto .mono em { color: var(--gold); }
body.tema-claro .kicker__dot { background: var(--gold); }

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

body {
  background: #0d0b12;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
body.tema-claro { background: #d8d5cc; }

img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

.mono {
  font-family: var(--font-mono);
  font-size: 7pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

em { font-style: normal; color: var(--yellow); }

/* ==========================================================================
   EL "PAPEL" — A4 (210mm × 297mm)
   ========================================================================== */
.doc {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 11mm 16mm 7mm;
  background-color: var(--bg);
  /* Grid sutil, mismo gesto que las gridlines del hero de la web */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22mm 22mm;
  background-position: 8mm 6mm;
  color: var(--fg);
  font-size: 10pt;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}

/* Vista en pantalla: papel centrado con sombra */
@media screen {
  body { padding: 3rem 1rem; }
  .doc { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
}

/* Grano de película, muy sutil (idéntico en espíritu al de la web) */
.doc::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.tema-claro .doc::before { opacity: 0.035; }

/* ==========================================================================
   1. ENCABEZADO
   ========================================================================== */
.doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10mm;
  padding-bottom: 5mm;
  border-bottom: 1px solid var(--line);
}
.doc-head__brand { display: flex; align-items: center; gap: 4mm; }
.doc-head__logo { height: 44px; width: auto; }
/* En tema claro el encabezado usa el logo horizontal azul */
.doc-head__logo--claro { display: none; height: 60px; width: auto; margin: -7px 0; }
body.tema-claro .doc-head__logo,
body.tema-claro .doc-head__wordmark { display: none; }
body.tema-claro .doc-head__logo--claro { display: block; }
.doc-head__wordmark {
  font-weight: 800; font-size: 15pt; letter-spacing: -0.02em;
  color: var(--yellow);
  display: flex; flex-direction: column; line-height: 1;
}
.doc-head__wordmark span {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 4.6pt; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--secondary); margin-top: 1.6mm;
}

.doc-head__meta { text-align: right; display: grid; gap: 1mm; }
.doc-head__tipo {
  font-family: var(--font-mono); font-size: 7pt;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--secondary);
}
.doc-head__numero {
  font-family: var(--font-mono); font-size: 10.5pt; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yellow);
}
.doc-head__meta .mono { color: var(--secondary); }
.doc-head__meta .mono strong { color: var(--fg); font-weight: 500; }

/* ==========================================================================
   2. PARA / DE
   ========================================================================== */
.partes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10mm;
  padding: 4.5mm 0;
  border-bottom: 1px solid var(--line);
}
.partes__label {
  font-family: var(--font-mono); font-size: 7pt;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 2mm;
}
.partes__label em { color: var(--yellow); margin-right: 2mm; }
.partes h3 {
  font-size: 12pt; font-weight: 800;
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: 1mm;
}
.partes p { color: var(--secondary); font-size: 9pt; }

/* ==========================================================================
   3. INTRO
   ========================================================================== */
.intro { padding: 4mm 0 4mm; }
.kicker {
  display: flex; align-items: center; gap: 3mm;
  font-family: var(--font-mono); font-size: 7pt;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 3mm;
}
.kicker em { color: var(--yellow); }
.kicker__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--yellow);
}
.intro__titulo {
  font-size: 22pt; font-weight: 800;
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 3mm;
  max-width: 150mm;
}
.intro__texto { color: var(--secondary); font-size: 10pt; max-width: 130mm; }

/* ==========================================================================
   4. TABLA DE ÍTEMS
   ========================================================================== */
.items { width: 100%; border-collapse: collapse; margin-top: 2mm; }
.items th {
  font-family: var(--font-mono); font-weight: 500; font-size: 6.6pt;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary);
  text-align: left;
  padding: 0 3mm 2.5mm 0;
  border-bottom: 1px solid var(--line);
}
.items td {
  padding: 2.4mm 3mm 2.4mm 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 9.5pt;
}
.items .num {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.items th.num { text-align: right; }
.items td:first-child { width: 55%; }
.items .item-row { break-inside: avoid; }
.items .item-row td:first-child { font-weight: 500; }

/* ==========================================================================
   5. TOTALES
   ========================================================================== */
.totales {
  break-inside: avoid;
  margin: 3mm 0 0 auto;
  width: 88mm;
  display: grid;
  gap: 0;
}
.totales__fila {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.6mm 0;
  font-size: 9.5pt;
}
.totales__fila .mono { color: var(--secondary); }
.totales__fila .monto { font-variant-numeric: tabular-nums; font-weight: 500; }

.totales__final {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2mm;
  padding: 3.6mm 5mm;
  background: var(--panel);
  break-inside: avoid;
}
body.tema-claro .totales__final { background: var(--ink); }
.totales__final .mono { color: var(--secondary); font-size: 7.5pt; }
body.tema-claro .totales__final .mono { color: var(--muted); }
.totales__final .monto {
  font-size: 17pt; font-weight: 900;
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.02em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. CONDICIONES
   ========================================================================== */
.condiciones { break-inside: avoid; padding: 4.5mm 0 0; }
.condiciones ul { display: grid; gap: 2mm; max-width: 150mm; }
.condiciones li {
  display: flex; gap: 4mm; align-items: baseline;
  color: var(--secondary); font-size: 9pt;
  padding-bottom: 2mm;
  border-bottom: 1px solid var(--line);
}
.condiciones li .mono { color: var(--yellow); flex-shrink: 0; }

/* ==========================================================================
   7. PIE
   ========================================================================== */
.doc-foot {
  margin-top: auto;
  padding-top: 3.5mm;
  break-inside: avoid;
}
.doc-foot__inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 10mm;
  padding-top: 4mm;
  border-top: 1px solid var(--line);
}
.doc-foot__tagline {
  font-size: 13pt; font-weight: 800;
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.02em; line-height: 1.2;
}
.doc-foot__sub {
  font-family: var(--font-mono); font-size: 6pt;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--secondary); margin-top: 1.5mm;
}
.doc-foot__contacto { text-align: right; display: grid; gap: 1.2mm; }
.doc-foot__contacto .mono { color: var(--secondary); font-size: 6.6pt; }
.doc-foot__contacto .mono em { color: var(--yellow); }

/* Marca de agua gigante, mismo gesto que el footer de la web */
.doc-foot__giant {
  font-size: 38pt; font-weight: 900;
  font-variation-settings: "wdth" 120;
  letter-spacing: -0.04em; line-height: 0.8;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 242, 236, 0.08);
  user-select: none;
  margin-top: 1mm;
  transform: translateY(18%);
  overflow: hidden;
}
body.tema-claro .doc-foot__giant { -webkit-text-stroke-color: rgba(35, 31, 46, 0.1); }

/* ==========================================================================
   IMPRESIÓN / PDF (crítico)
   Tamaño A4, 210mm × 297mm.
   Para Legal (EE. UU.): size: legal; y en .doc width: 216mm; min-height: 356mm;
   Para Carta: size: letter; y en .doc width: 216mm; min-height: 279mm;
   ========================================================================== */
@page { size: A4; margin: 0; }

@media print {
  /* Forzar impresión de fondos y del amarillo */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* html/body cubren la página completa (297mm) para que no quede un
     borde sin pintar; .doc se queda 1mm corto (296mm) para evitar que
     el redondeo de Chrome genere una página en blanco extra */
  html, body { background: var(--bg); padding: 0; height: 297mm; }
  .doc { box-shadow: none; margin: 0; min-height: 296mm; }
  .no-print { display: none !important; }
}

/* ==========================================================================
   EDITOR EN PANTALLA (nada de esto se imprime)
   ========================================================================== */

/* ---------- Panel de controles ---------- */
.panel {
  position: fixed; top: 1rem; right: 1rem; z-index: 100;
  width: 218px;
  padding: 1rem;
  background: rgba(23, 20, 31, 0.94);
  border: 1px solid rgba(244, 242, 236, 0.14);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid; gap: 0.55rem;
}
.panel__title {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.2rem;
}
.panel__row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.panel__row label {
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.panel__row select, .panel__row input {
  width: 100px;
  background: var(--ink-panel); color: var(--paper);
  border: 1px solid rgba(244, 242, 236, 0.15);
  border-radius: 7px;
  padding: 0.38rem 0.5rem;
  font-family: var(--font-mono); font-size: 0.7rem;
}
.panel__row select:focus, .panel__row input:focus { outline: 1.5px solid var(--yellow); }
.panel button {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: var(--yellow); color: var(--ink);
  font-weight: 500;
  transition: transform 0.2s;
}
.panel button:active { transform: scale(0.97); }
.panel button.ghost {
  background: none; color: var(--paper);
  border-color: rgba(244, 242, 236, 0.25);
}
.panel button.ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.panel__hint {
  font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.04em; line-height: 1.6;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ---------- Textos editables: pista al pasar el mouse ---------- */
@media screen {
  [contenteditable]:hover { outline: 1px dashed rgba(255, 230, 9, 0.4); outline-offset: 3px; }
  [contenteditable]:focus {
    outline: 1.5px solid rgba(255, 230, 9, 0.65); outline-offset: 3px;
    background: rgba(255, 230, 9, 0.05);
  }
  body.tema-claro [contenteditable]:hover { outline-color: rgba(35, 31, 46, 0.3); }
  body.tema-claro [contenteditable]:focus {
    outline-color: rgba(35, 31, 46, 0.55);
    background: rgba(35, 31, 46, 0.05);
  }
}
.c-desc__txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 1em;
}
.cond__txt { flex: 1; min-height: 1em; }

/* ---------- Descripción corta (línea secundaria bajo cada ítem) ---------- */
.c-desc__sub {
  display: block;
  min-height: 1em;
  margin-top: 0.8mm;
  font-family: var(--font-mono);
  font-size: 6.6pt;
  letter-spacing: 0.02em;
  color: var(--secondary);
  font-weight: 400;
}
.c-desc__sub:empty { margin-top: 0; min-height: 0; }
@media screen {
  .c-desc__sub:empty::before {
    content: attr(data-placeholder);
    color: var(--secondary);
    opacity: 0.55;
  }
}
@media print {
  .c-desc__sub:empty { display: none; }
}

/* ---------- Quitar fila (aparece al pasar el mouse) ---------- */
.items td.c-desc { position: relative; }
.condiciones li { position: relative; }
.row-del {
  position: absolute; left: -9mm; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(157, 151, 173, 0.5);
  background: none; color: var(--secondary);
  font-size: 12px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
}
.condiciones li .row-del { top: 40%; }
tr:hover .row-del, .condiciones li:hover .row-del { opacity: 1; }
.row-del:hover { border-color: #ff5f56; color: #ff5f56; }

/* ---------- Agregar fila ---------- */
.add-row {
  margin-top: 3mm;
  padding: 0.42rem 1rem;
  background: none;
  border: 1px dashed rgba(157, 151, 173, 0.5);
  border-radius: 100px;
  color: var(--secondary);
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.add-row:hover { border-color: var(--yellow); color: var(--yellow); }
body.tema-claro .add-row:hover { border-color: var(--gold); color: var(--gold); }