/* Paleta: azul marino profundo → azul rey, titulares blancos en mayúsculas. */
:root {
  --marino-900: #050f24;
  --marino-800: #0a1f47;
  --marino-700: #12306b;
  --azul: #2563c4;
  --azul-vivo: #3d8bf0;
  --hielo: #eef4fc;
  --hielo-2: #f6f9fe;
  --borde: #d6e3f5;
  --texto: #1c2433;
  --gris: #5f6b80;
  --error: #b42318;
  --error-fondo: #fdecea;
  --titulos: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --cuerpo: 'Lato', 'Gill Sans MT', 'Gill Sans', 'Segoe UI', Arial, sans-serif;
  --degradado: linear-gradient(135deg, var(--marino-900) 0%, var(--marino-800) 45%, #1d4fa8 100%);
}

* { box-sizing: border-box; }
body { margin: 0; background: #e9eef6; color: var(--texto); font: 14px/1.5 var(--cuerpo); }


/* ---------- Barra y pestañas ---------- */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--degradado); color: #fff; }
.barra .titulo { display: flex; align-items: center; gap: 14px; }
.barra h1 { margin: 0; font: 600 13px var(--titulos); text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.tabs { display: flex; gap: 4px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 999px; }
.tabs button { background: none; border: 0; color: #c9d8f2; padding: 7px 16px; font: 600 13px var(--titulos); cursor: pointer; border-radius: 999px; }
.tabs button.activa { background: #fff; color: var(--marino-800); }
.tab { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 24px; padding: 24px; align-items: start; }
.tab > * { min-width: 0; }  /* ningún contenido ensancha la página (tablas en iOS) */
.tab.oculto { display: none; }
#tab-precios { grid-template-columns: 1fr; }

/* ---------- Formulario ---------- */
.panel { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(10,31,71,.08); }
.panel.ancho { max-width: 720px; }
.panel h2 { margin: 0 0 4px; font: 800 18px var(--titulos); color: var(--marino-800); text-transform: uppercase; letter-spacing: .03em; }
#form { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
fieldset { border: 0; border-bottom: 1px solid #edf1f7; margin: 0 0 14px; padding: 0 0 14px; }
legend { font: 700 11px var(--titulos); color: var(--azul); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; padding: 0; }
label { display: block; margin: 7px 0; font-size: 12px; color: var(--gris); }
label:has(> .sugerencias) { position: relative; }
.sugerencias { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 28px rgba(10,31,71,.18); }
.sugerencias[hidden] { display: none; }
.sugerencia { padding: 9px 12px; cursor: pointer; border-top: 1px solid #edf1f7; color: var(--texto); font-size: 14px; }
.sugerencia:first-child { border-top: 0; }
.sugerencia small { display: block; margin-top: 1px; color: var(--gris); font-size: 12px; }
.sugerencia:hover, .sugerencia.activa { background: var(--hielo); }
label.check { display: flex; gap: 8px; align-items: center; color: var(--texto); font-size: 13px; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font: 14px var(--cuerpo); color: var(--texto); background: var(--hielo-2); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgba(61,139,240,.18); background: #fff; }
label.check input { width: auto; margin: 0; accent-color: var(--azul); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etapa { display: grid; grid-template-columns: 1fr 1fr 74px 28px; gap: 6px; align-items: end; margin-bottom: 6px; }
.etapa label { margin: 0; }
.etapa .quitar { height: 36px; border: 0; background: none; color: var(--gris); font-size: 18px; cursor: pointer; }
.etapa .quitar:hover { color: var(--error); }
.linea { padding: 10px 0 12px; border-bottom: 1px dashed var(--borde); margin-bottom: 8px; }
.linea > label { margin-top: 0; }
.linea-fila { display: grid; grid-template-columns: 1fr 80px 28px; gap: 6px; align-items: end; }
.linea-fila label { margin: 0; }
.linea .quitar { height: 36px; border: 0; background: none; color: var(--gris); font-size: 18px; cursor: pointer; }
.linea .quitar:hover { color: var(--error); }
.linea .m-precio { margin-top: 6px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.presets button, .secundario { border: 1px solid var(--borde); background: var(--hielo); color: var(--marino-700); border-radius: 999px; padding: 6px 12px; font: 600 12px var(--titulos); cursor: pointer; }
.presets button:hover, .secundario:hover { border-color: var(--azul-vivo); }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dias label { margin: 0; text-align: center; font: 600 12px var(--titulos); color: var(--gris); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 0; cursor: pointer; background: var(--hielo-2); }
.dias label:has(input:checked) { background: var(--azul); border-color: var(--azul); color: #fff; }
.dias input { display: none; }
.primario { width: 100%; padding: 13px; border: 0; border-radius: 10px; background: var(--degradado); color: #fff; font: 700 14px var(--titulos); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; box-shadow: 0 4px 14px rgba(18,48,107,.3); }
.primario:disabled { background: #c5cedc; box-shadow: none; cursor: not-allowed; }
.boton-ancho { display: block; width: 100%; margin-top: 8px; padding: 11px; border-radius: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.secundario:disabled { color: #9aa6ba; border-color: #e1e7f0; background: #f4f6fa; cursor: not-allowed; }
.ayuda { color: var(--gris); font-size: 12px; }
.aviso { padding: 9px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; background: var(--hielo); border-left: 3px solid var(--azul-vivo); }
.aviso.error { background: var(--error-fondo); border-color: var(--error); color: var(--error); }

/* ---------- Precios ---------- */
.tabla-precios { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tabla-precios th { text-align: left; padding: 8px 10px; background: var(--marino-800); color: #fff; font: 700 11px var(--titulos); text-transform: uppercase; letter-spacing: .08em; }
.tabla-precios td { padding: 6px 10px; border-bottom: 1px solid #edf1f7; }
.tabla-precios tr:nth-child(even) td { background: var(--hielo-2); }
.tabla-precios input { max-width: 140px; margin: 0; }
.tabla-precios .precio-kit { font-weight: 700; color: var(--marino-800); }
label.recargo { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; color: var(--texto); font-weight: 700; }
label.recargo input { width: 110px; margin: 0; }
.acciones { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.boton-archivo { display: inline-block; margin: 0; }
.boton-archivo input { display: none; }

/* ---------- Documento (vista previa = PDF) ---------- */
.documento { background: #fff; max-width: 816px; width: 100%; margin: 0 auto; padding: 0 0 36px; box-shadow: 0 4px 24px rgba(10,31,71,.14); overflow: hidden; }
.doc-cuerpo { padding: 0 48px; }

.doc-cabecera { position: relative; background: var(--degradado); color: #fff; padding: 22px 48px 26px; overflow: hidden; }
.doc-cabecera::after { content: ''; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(61,139,240,.35), rgba(61,139,240,0) 70%); }
.doc-cabecera > * { position: relative; z-index: 1; }
.doc-cabecera .arriba { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.doc-cabecera .tipo { font: 600 10px var(--titulos); text-transform: uppercase; letter-spacing: .16em; opacity: .75; text-align: right; }
.doc-cabecera .producto { font: 800 46px/1 var(--titulos); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.doc-cabecera .sub { font: 700 14px var(--titulos); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; opacity: .95; }
.doc-cabecera .caja { display: inline-block; margin-top: 20px; padding: 10px 18px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 10px; background: linear-gradient(135deg, rgba(5,15,36,.85), rgba(18,48,107,.75)); }
.doc-cabecera .caja .k { font: 700 10px var(--titulos); text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.doc-cabecera .caja .v { font: 700 17px var(--titulos); }
.doc-cabecera .caja .o { font-size: 13px; opacity: .9; }

.resumen { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--borde); background: var(--hielo-2); }
.resumen > div { padding: 12px 16px; border-right: 1px solid var(--borde); }
.resumen > div:last-child { border-right: 0; }
.resumen .k { font: 700 9.5px var(--titulos); color: var(--azul); text-transform: uppercase; letter-spacing: .12em; }
.resumen .v { font: 700 15px var(--titulos); color: var(--marino-800); margin-top: 2px; }

.documento h2 { display: flex; align-items: center; gap: 10px; color: var(--marino-800); font: 800 13px var(--titulos); text-transform: uppercase; letter-spacing: .08em; margin: 26px 0 12px; }
.documento h2::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(var(--azul-vivo), var(--azul)); }
.documento p { margin: 0 0 12px; }
.documento table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 10px; font-size: 13px; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.documento th { background: var(--marino-800); color: #fff; text-align: left; padding: 9px 12px; font: 700 10.5px var(--titulos); text-transform: uppercase; letter-spacing: .08em; }
.documento table.oscura th { background: var(--marino-900); }
.documento td { padding: 8px 12px; border-top: 1px solid var(--borde); }
.documento tr:nth-child(even) td { background: var(--hielo-2); }
.documento td.etiqueta { color: var(--azul); font-weight: 700; }
.documento td.centro, .documento th.centro { text-align: center; }
.documento table.calendario { table-layout: fixed; }
.calendario td { text-align: center; font: 700 13px var(--titulos); height: 56px; color: #fff; background: linear-gradient(160deg, var(--azul), var(--marino-700)) !important; border-left: 1px solid rgba(255,255,255,.15); }
.calendario td.descanso { color: #9aa6ba; font: 400 12px var(--cuerpo); background: var(--hielo-2) !important; border-left: 1px solid var(--borde); }
.precauciones td:first-child { width: 36px; text-align: center; }
.precauciones td:first-child span { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--azul); color: #fff; font: 800 11px var(--titulos); }
.pendiente { color: var(--error); font-weight: bold; }
.doc-pie { display: flex; align-items: center; gap: 16px; margin: 28px 48px 0; padding: 14px 18px; border-radius: 12px; background: var(--degradado); color: #c9d8f2; font-size: 11px; line-height: 1.45; }

/* Presupuesto: documento aparte que solo se imprime con el botón "Generar presupuesto". */
#vista-presupuesto { display: none; }
.documento td.total { font: 800 16px var(--titulos); color: var(--marino-800); }
.kit-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kit-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--hielo-2); font-size: 14px; }
.kit-lista li::before { content: '✓'; display: inline-flex; flex: none; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--azul); color: #fff; font: 800 12px var(--titulos); }

@media screen and (max-width: 900px) {
  .tab { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  #form { position: static; max-height: none; }
  .barra { padding: 10px 16px; }
  .barra h1 { font-size: 14px; }
  .doc-cuerpo { padding: 0 16px; }
  .doc-cabecera { padding: 18px 16px 22px; }
  .doc-cabecera .producto { font-size: 34px; }
  .resumen { grid-template-columns: repeat(2, 1fr); }
  .doc-pie { margin: 24px 16px 0; flex-direction: column; align-items: flex-start; }
}

/* Teléfonos: título arriba y pestañas debajo, a todo el ancho. */
@media screen and (max-width: 520px) {
  .barra { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .tabs { width: 100%; }
  .tabs button { flex: 1; padding: 8px 4px; text-align: center; }
  .tab { padding: 10px; gap: 14px; }
  .panel { padding: 14px; }
  .tabla-precios th, .tabla-precios td { padding: 6px 5px; font-size: 12px; }
  .tabla-precios input { width: 64px; padding: 6px; }
}

/* ---------- Pantalla de entrada (PIN) ---------- */
body.bloqueada > :not(#bloqueo) { display: none !important; }
.bloqueo { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--degradado); }
.bloqueo[hidden] { display: none; }
.bloqueo-caja { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: 0 12px 40px rgba(0,0,0,.35); text-align: center; }
.bloqueo-caja h1 { margin: 14px 0 18px; font: 800 16px var(--titulos); color: var(--marino-800); text-transform: uppercase; letter-spacing: .08em; }
.bloqueo-caja label { text-align: left; }
.bloqueo-caja .aviso { text-align: left; }
.bloqueo-caja .primario { margin-top: 8px; }

/* ---------- Impresión ---------- */
@page { size: letter; margin: 10mm 0; }
@page :first { margin-top: 0; }
@media print {
  body { background: #fff; }
  .no-print, #tab-precios { display: none !important; }
  .tab { display: block; padding: 0; }
  .documento { box-shadow: none; max-width: none; padding-bottom: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr, .doc-pie, .resumen { break-inside: avoid; }
  h2 { break-after: avoid; }
  body.modo-presupuesto #vista { display: none !important; }
  body.modo-presupuesto #vista-presupuesto { display: block !important; }
}

/* ---------- Demo ---------- */
.sello-demo { font: 700 11px var(--titulos); letter-spacing: .12em; text-transform: uppercase; background: var(--azul-vivo); color: #fff; padding: 3px 8px; border-radius: 6px; }
.banda-demo { margin: 0; padding: 8px 24px; background: #fff7e0; color: #7a5b00; font-size: 13px; text-align: center; border-bottom: 1px solid #f0dfa8; }
/* Espacio donde iría el logo de cada negocio. */
.logo-muestra { display: inline-flex; align-items: center; justify-content: center; border: 1.5px dashed currentColor; border-radius: 6px; padding: 0 12px; font: 600 11px var(--titulos); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.doc-cabecera .logo-muestra { height: 40px; }
.doc-pie .logo-muestra { height: 22px; flex: none; }
.documento { position: relative; }
.documento:not(:empty)::after { content: 'MUESTRA'; position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); font: 800 96px var(--titulos); color: rgba(37, 99, 196, .08); pointer-events: none; letter-spacing: .1em; }
.panel fieldset[disabled] { opacity: .85; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--marino-800); color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 50; max-width: calc(100% - 32px); text-align: center; }

/* ---------- Sin colores: fondos blancos y grises, todo el texto en negro ---------- */
:root { --texto: #000; --gris: #000; --azul: #000; --azul-vivo: #000; --marino-700: #000; --marino-800: #000; --marino-900: #000; --error: #000; --error-fondo: #f2f2f2; --hielo: #f2f2f2; --hielo-2: #fafafa; --borde: #cfcfcf; }
body { background: #f2f2f2; }
.barra { background: #fff; color: #000; border-bottom: 1px solid var(--borde); }
.barra h1 { opacity: 1; }
.tabs { background: #f2f2f2; }
.tabs button { color: #000; }
.tabs button.activa { background: #fff; color: #000; box-shadow: 0 0 0 1px var(--borde); }
.panel { box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.panel fieldset[disabled] { opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: #000; -webkit-text-fill-color: #000; opacity: 1; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(0,0,0,.1); }
.primario { background: #fff; color: #000; border: 1.5px solid #000; box-shadow: none; }
.primario:disabled { background: #e6e6e6; }
.secundario:disabled { color: #000; border-color: var(--borde); background: #f2f2f2; }
.dias label:has(input:checked) { background: #e0e0e0; border-color: #000; color: #000; }
.tabla-precios th, .documento th, .documento table.oscura th { background: #ececec; color: #000; }
.documento { box-shadow: 0 2px 14px rgba(0,0,0,.1); }
.documento h2::before { background: #000; }
.doc-cabecera { background: #fff; color: #000; border-bottom: 1px solid var(--borde); }
.doc-cabecera::after { display: none; }
.doc-cabecera .producto { text-shadow: none; }
.doc-cabecera .caja { border-color: #000; background: #fff; }
.calendario td { color: #000; background: #ececec !important; border-left: 1px solid var(--borde); }
.calendario td.descanso { color: #000; background: #fff !important; }
.precauciones td:first-child span, .kit-lista li::before { background: #fff; color: #000; border: 1px solid #000; }
.doc-pie { background: #f2f2f2; color: #000; }
.bloqueo { background: #f2f2f2; }
.bloqueo-caja { border: 1px solid var(--borde); box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.sello-demo { background: #fff; color: #000; border: 1px solid #000; }
.banda-demo { background: #fafafa; color: #000; border-bottom-color: var(--borde); }
.documento:not(:empty)::after { color: rgba(0,0,0,.06); }
.toast { background: #fff; color: #000; border: 1px solid #000; }