:root {
  --verde: #104A21;
  --naranja: #F28B16;
  --gris: #4F4C4C;
  --fondo: #F2F2F7;
  --tarjeta: #FFFFFF;
  --texto: #1C1C1E;
  --secundario: #6C6C70;
  --terciario: #AEAEB2;
  --linea: #E0E0E5;
  --editable: rgba(16, 74, 33, 0.10);
  --rojo: #D70015;
  --titulo: Futura, "Futura PT", "Century Gothic", "Trebuchet MS", sans-serif;
  --sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --verde: #4CB86A;
    --fondo: #000000;
    --tarjeta: #1C1C1E;
    --texto: #F2F2F7;
    --secundario: #A1A1A6;
    --terciario: #636366;
    --linea: #38383A;
    --editable: rgba(76, 184, 106, 0.16);
    --rojo: #FF453A;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sistema); font-size: 16px; }
body { min-height: 100vh; padding-bottom: calc(24px + var(--seguro-abajo)); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--verde); }
[hidden] { display: none !important; }

/* Barra superior */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 84px 1fr 84px; align-items: center;
  padding: calc(8px + var(--seguro-arriba)) 8px 8px;
  background: color-mix(in srgb, var(--fondo) 85%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 0.5px solid var(--linea);
  min-height: 48px;
}
.barra-titulo { margin: 0; text-align: center; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-btn { color: var(--verde); font-size: 17px; padding: 6px 8px; min-height: 36px; display: flex; align-items: center; gap: 4px; }
.barra-btn.der { justify-content: flex-end; }
.barra-btn svg { width: 24px; height: 24px; }

main { max-width: 640px; margin: 0 auto; padding: 8px 16px 0; }

/* Inicio */
.logo { display: block; margin: 10px auto 8px; width: 190px; height: auto; }
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) { .logo-claro { display: none; } .logo-oscuro { display: block; } }
.lema { text-align: center; font-size: 11px; color: var(--secundario); margin: 0 30px 22px; }
.caja {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 14px; margin-bottom: 14px; border-radius: 18px;
  background: var(--tarjeta); border: 1px solid color-mix(in srgb, var(--verde) 25%, transparent);
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}
.caja:active { transform: scale(0.985); }
.caja-icono { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.caja-icono svg { width: 30px; height: 30px; }
.caja-texto { flex: 1; min-width: 0; }
.caja-titulo { font-family: var(--titulo); font-weight: 700; font-size: 17px; }
.caja-desc { font-size: 14px; color: var(--secundario); margin-top: 3px; }
.chevron { color: var(--terciario); font-size: 20px; }
.alerta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px; margin-bottom: 14px; border-radius: 14px; font-weight: 600;
  color: var(--naranja); background: color-mix(in srgb, var(--naranja) 16%, transparent);
}

/* Formularios estilo iOS */
.seccion { margin: 20px 0 6px; }
.seccion-cab { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--secundario); margin: 0 16px 6px; }
.seccion-pie { font-size: 13px; color: var(--secundario); margin: 6px 16px 0; line-height: 1.35; }
.grupo { background: var(--tarjeta); border-radius: 12px; overflow: hidden; }
.fila { padding: 11px 16px; border-bottom: 0.5px solid var(--linea); display: flex; align-items: center; gap: 10px; min-height: 44px; }
.fila:last-child { border-bottom: 0; }
.fila.col { flex-direction: column; align-items: stretch; }
.fila.edit { background: var(--editable); }
.fila .etq { font-size: 12px; color: var(--secundario); }
.fila .etq-izq { flex: none; width: 44px; font-size: 12px; font-weight: 600; color: var(--secundario); }
.fila input[type=text], .fila input[type=email], .fila input[type=tel], .fila input[type=date], .fila textarea, .fila select {
  flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texto);
  font-family: var(--mono); font-size: 17px; padding: 2px 0;
}
.fila input[type=date] { min-height: 30px; }
.fila textarea { resize: vertical; min-height: 140px; line-height: 1.35; }
.fila label.fecha { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.fila label.fecha input { flex: none; width: auto; text-align: right; }
.nota { font-size: 14px; line-height: 1.4; display: flex; gap: 10px; }
.nota svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--verde); }
a.btn-fila, a.mini { text-decoration: none; }
.btn-fila { width: 100%; text-align: left; color: var(--verde); display: flex; align-items: center; gap: 10px; }
.btn-fila svg { flex: none; width: 20px; height: 20px; }
.btn-fila small { color: var(--secundario); font-size: 12px; }
.btn-rojo { color: var(--rojo); justify-content: center; }
.peligro { color: var(--rojo); }
.lapiz { color: var(--verde); flex: none; }

.segmentos { display: flex; background: color-mix(in srgb, var(--texto) 8%, transparent); border-radius: 9px; padding: 2px; width: 100%; }
.segmentos button { flex: 1; padding: 6px 4px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.segmentos button.on { background: var(--tarjeta); box-shadow: 0 1px 3px rgba(0,0,0,0.15); font-weight: 600; }

.interruptor { position: relative; width: 51px; height: 31px; flex: none; }
.interruptor input { opacity: 0; width: 0; height: 0; position: absolute; }
.interruptor span { position: absolute; inset: 0; background: color-mix(in srgb, var(--texto) 18%, transparent); border-radius: 31px; transition: .2s; }
.interruptor span::before { content: ""; position: absolute; width: 27px; height: 27px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.interruptor input:checked + span { background: #34C759; }
.interruptor input:checked + span::before { transform: translateX(20px); }

.boton {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px; border-radius: 12px; font-weight: 600; font-size: 17px; color: #fff; background: var(--verde);
}
.boton:disabled { opacity: 0.4; }
.boton svg { width: 20px; height: 20px; }
.boton-sub { text-align: center; font-size: 13px; color: var(--secundario); margin-top: 8px; }
.boton-paso {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px;
  padding: 13px 14px; border-radius: 12px; font-weight: 600; color: var(--verde);
  background: color-mix(in srgb, var(--verde) 15%, transparent); text-align: left;
}
.boton-paso:disabled { opacity: 0.45; }
.boton-paso svg.ic { width: 22px; height: 22px; flex: none; }
.boton-paso span { flex: 1; }
.check { width: 30px; height: 30px; flex: none; }
.check circle { fill: none; stroke: color-mix(in srgb, var(--verde) 40%, transparent); stroke-width: 2; }
.check path { fill: none; stroke: var(--naranja); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.check.hecho circle { stroke: var(--naranja); }
.check.hecho path { animation: trazo .45s ease-out forwards; }
.check.hecho { animation: zoom .55s ease .3s; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes zoom { 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Expone con negritas */
.parrafo { font-size: 15px; line-height: 1.45; color: var(--secundario); white-space: pre-wrap; }
.parrafo b { color: var(--texto); }

/* Firma */
.firma-caja {
  position: relative; width: 100%; height: 110px; border-radius: 10px; background: #fff;
  border: 1px dashed #9a9a9a; display: grid; place-items: center; overflow: hidden;
}
.firma-caja img { max-width: calc(100% - 20px); max-height: 90px; }
.firma-vacia { position: absolute; inset: 0; color: #8e8e93; }
.firma-vacia .t { position: absolute; top: 10px; width: 100%; text-align: center; font-size: 13px; }
.firma-vacia .x { position: absolute; left: 16px; bottom: 12px; font-size: 26px; font-weight: 300; }
.firma-vacia .l { position: absolute; left: 46px; right: 16px; bottom: 22px; height: 1px; background: #c7c7cc; }
.lienzo { width: 100%; height: 220px; background: #fff; border-radius: 12px; border: 1px solid var(--linea); touch-action: none; display: block; }

/* Vista previa A4 */
.a4-marco { padding: 4px 18px 8px; }
.a4 {
  position: relative; width: 100%; aspect-ratio: 210 / 297; background: #fff; color: #000;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); border-radius: 4px; overflow: hidden; cursor: zoom-in;
}
.a4 canvas { width: 100%; height: 100%; display: block; }

/* Correos (chips) */
.correo-linea { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 0.5px solid var(--linea); font-family: var(--mono); font-size: 16px; }
.correo-linea span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini { width: 30px; height: 30px; display: grid; place-items: center; color: var(--secundario); flex: none; }
.mini svg { width: 22px; height: 22px; }
.mini.color { color: var(--verde); }
.enlace { color: var(--verde); font-size: 14px; padding: 8px 0 2px; text-align: left; }

/* Historial / documentos */
.item-tit { font-weight: 600; }
.item-via { font-size: 14px; color: var(--verde); }
.item-det { font-size: 13px; color: var(--secundario); }
.item-fecha { font-size: 12px; color: var(--secundario); }
.vacio { color: var(--secundario); }
.buscar { width: 100%; padding: 9px 12px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto); font-size: 16px; }

/* Modal (hoja inferior) */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center; }
.hoja {
  width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; background: var(--fondo);
  border-radius: 14px 14px 0 0; padding: 14px 16px calc(20px + var(--seguro-abajo));
  animation: subir .25s ease;
}
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.hoja-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hoja-cab h2 { margin: 0; font-size: 17px; }
.hoja-cab button { color: var(--verde); font-size: 17px; padding: 4px; }
.hoja .opcion { display: block; width: 100%; padding: 15px; text-align: center; font-size: 17px; color: var(--verde); background: var(--tarjeta); border-bottom: 0.5px solid var(--linea); }
.hoja .opcion:first-child { border-radius: 12px 12px 0 0; }
.hoja .opcion:last-child { border-radius: 0 0 12px 12px; border-bottom: 0; }
.hoja .opcion.sola { border-radius: 12px; margin-top: 8px; font-weight: 600; }
.hoja-msg { text-align: center; font-size: 13px; color: var(--secundario); margin: 0 10px 12px; }
.visor { width: 100%; height: 75vh; border: 0; border-radius: 8px; background: #fff; }

.aviso {
  position: fixed; left: 50%; bottom: calc(24px + var(--seguro-abajo)); transform: translateX(-50%); z-index: 60;
  background: rgba(30,30,30,.92); color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 15px;
  max-width: 90vw; text-align: center;
}
.instalar { font-size: 14px; line-height: 1.4; }
.instalar b { color: var(--verde); }