/* Cielo y colina, en crema. El azul sale del logo. */
:root,
[data-tema="claro"] {
  --papel: #f6f1e6;
  --tinta: #1a3354;
  --cobre: #1d6fbe;
  --cobre-claro: #2f86c9;
  --cielo: #d7eaf8;
  --cielo-b: #f7f3ea;
  --colina: #d5e3c4;
  --ventana: rgba(255, 252, 246, 0.92);
  --barra: rgba(246, 241, 230, 0.9);
  --suave: #3e5674;
  --linea: rgba(26, 51, 84, 0.14);
  --sombra: 0 18px 40px rgba(40, 80, 120, 0.14);
  color-scheme: light;
}

[data-tema="oscuro"] {
  --papel: #102033;
  --tinta: #f4efe4;
  --cobre: #8ecfff;
  --cobre-claro: #b7e4ff;
  --cielo: #0c1c30;
  --cielo-b: #16324c;
  --colina: #1a3d34;
  --ventana: rgba(18, 40, 64, 0.92);
  --barra: rgba(12, 28, 48, 0.9);
  --suave: #d5d0c4;
  --linea: rgba(244, 239, 228, 0.16);
  --sombra: 0 18px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

[hidden] { display: none !important; }

body {
  background:
    radial-gradient(90% 42% at 78% 108%, var(--colina) 0%, transparent 62%),
    radial-gradient(46% 28% at 12% 8%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(28% 16% at 68% 16%, rgba(255, 255, 255, 0.45), transparent 72%),
    linear-gradient(180deg, var(--cielo) 0%, var(--cielo-b) 46%, var(--papel) 100%);
  background-attachment: fixed;
}

.cabecera {
  background: var(--barra);
  border-bottom: 0;
}
.banda-chile { height: 4px; background: linear-gradient(90deg, #0039a6 0 50%, #d52b1e 50% 100%); }
.marca { display: flex; align-items: center; }
.marca img { height: 46px; width: auto; display: block; }
.tema {
  min-height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--ventana);
  padding: 0 0.8rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.hero { padding: 2.2rem 0 2.6rem; }
.ventana {
  background: var(--ventana);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.ventana-barra {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0 0.7rem;
  background: linear-gradient(180deg, #8ec4ee 0%, #4d93d4 42%, #2f6eae 100%);
  color: #fffaf3;
  font-weight: 600;
  font-size: 0.86rem;
  text-shadow: 0 1px 0 rgba(20, 50, 90, 0.35);
}
[data-tema="oscuro"] .ventana-barra {
  background: linear-gradient(180deg, #24598f 0%, #163e68 100%);
}
.ventana-barra i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #b9ddf5 45%, #7eb4de);
  box-shadow: inset 0 0 0 1px rgba(20, 60, 100, 0.25);
}
.ventana-cuerpo { padding: 1rem 1.05rem 1.15rem; }
.logo-hero { width: min(250px, 78%); height: auto; display: block; margin: 0 auto 0.8rem; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 16ch; }

.btn-lleno {
  background: linear-gradient(180deg, #67b0e6, #2d6eae);
  border-color: #245e96;
  color: #fffaf3;
}
.btn-lleno:hover { background: linear-gradient(180deg, #7ec0ef, #245e96); border-color: #1d4f86; }
.btn-linea { background: transparent; border-color: var(--tinta); }
.btn-linea:hover { background: rgba(47, 110, 174, 0.08); }

.teatro {
  background: transparent;
  color: var(--tinta);
  padding-top: 1rem;
}
.teatro h2, .teatro h3, .relato p:last-of-type, .bajada { color: var(--tinta); }
.bajada { color: var(--suave); }
.kicker-claro, .oficio { color: var(--cobre); }
.numeral { color: color-mix(in srgb, var(--tinta) 9%, transparent); }
.etiquetas li { border-color: color-mix(in srgb, var(--cobre) 55%, transparent); color: var(--tinta); }
.progreso { background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.escenario {
  background: var(--ventana);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 0.2rem 1rem 1rem;
}
.controles button {
  color: var(--tinta);
  border-color: var(--linea);
  background: color-mix(in srgb, var(--ventana) 70%, transparent);
}
.controles button:hover { color: var(--cobre); border-color: var(--cobre); }
.puntos button::after { background: color-mix(in srgb, var(--tinta) 35%, transparent); }
.correo a, .via strong { color: var(--cobre); }
.vias { display: grid; gap: 0.65rem; }
.via {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: color-mix(in srgb, var(--ventana) 70%, white);
}
.via span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.via strong { font-size: 1.2rem; font-weight: 600; }
.via:hover { border-color: var(--cobre); }
.contacto-config { margin-top: 1rem; }
.acceso { max-width: 28rem; }
.acceso .btn { margin-top: 0.35rem; }
.menu .salir {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 500;
  font-size: 0.98rem;
  cursor: pointer;
}
.pie a { color: var(--cobre); }

[data-tema="oscuro"] input,
[data-tema="oscuro"] select,
[data-tema="oscuro"] textarea {
  background: #0e2236;
  color: var(--tinta);
  border-color: var(--linea);
}
[data-tema="oscuro"] .oficios article,
[data-tema="oscuro"] .bloque-suave { background: rgba(14, 34, 54, 0.45); }
.vacio-trabajos { color: var(--suave); }

.checks { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 1rem; }
.check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: color-mix(in srgb, var(--ventana) 80%, transparent);
  font-weight: 500;
}
.grilla-param { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.tarifa { grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--cobre); }
.catalogo h3 { margin: 1.3rem 0 0.4rem; font-size: 1.25rem; }
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--suave); }
td small { display: block; color: var(--suave); font-weight: 400; }
td input[type="number"], td input[type="text"], td select { min-width: 4.5rem; padding: 0.35rem 0.4rem; }
.monto { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
tr.incluido { background: color-mix(in srgb, var(--cobre) 8%, transparent); }
.resumen p, .cotizacion p { display: flex; justify-content: space-between; gap: 1rem; }
.resumen .total { font-size: 1.15rem; border-top: 1px solid var(--linea); padding-top: 0.45rem; }
.resumen .interno { color: var(--suave); font-size: 0.92rem; }
.cotizacion { margin-top: 1rem; }
.cotizacion .ventana-cuerpo, .cotizacion { padding: 1rem; }
.nota { color: var(--suave); font-size: 0.9rem; display: block; }
#costo .acciones { margin: 1rem 0; }

@media (max-width: 860px) {
  .grilla-param { grid-template-columns: 1fr 1fr; }
  .barra { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .grilla-param { grid-template-columns: 1fr; }
  .marca img { height: 38px; }
}

@media print {
  .cabecera, .pie, .no-print, .resumen, #paginas { display: none !important; }
  body { background: white; color: black; }
  .ventana, .cotizacion { box-shadow: none; border: 0; }
}