/* boiler: colores, medidas y textos de spec/diseno/*.dc.html. Solo tema oscuro. */
:root {
  --fondo: #131418;
  --superficie: #1C1E23;
  --borde: #2C2F36;
  --separador: #22252B;
  --separador-menu: #2A2D33;
  --texto: #F1EFEA;
  --texto-chip: #E4E2DC;
  --apagado: #9A9DA6;
  --placeholder: #6E717A;
  --iconos: #C9C7C1;
  --asa: #5A5D66;
  --nombre-hecho: #8C8F98;
  --discontinuo: #3A3D45;
  --discontinuo-2: #4A4D55;
  --ambar: #F2B33D;
  --ambar-hover: #FFD27A;
  --sobre-ambar: #17130A;
  --fondo-ambar: #2A2416;
  --borde-ambar: #3D3320;
  --auto: #C9A45A;
  --borde-auto: #6B5A30;
  --borrar: #E8846F;
  --aviso: #F1EFEA;
  --aviso-check: #1E7A4C;
  --aviso-enlace: #6B4A00;
  --caida-fondo: #2A2416;
  --caida-borde: #4A3B1A;
  --caida-texto: #F1DDB0;
  --sep-mas: #17181C;
  --tipo-oculto: #22252B;
  --display: 'Bricolage Grotesque', sans-serif;
  --cuerpo: Inter, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--fondo); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); -webkit-tap-highlight-color: transparent; }
a { color: var(--ambar); }
a:hover { color: var(--ambar-hover); }
button, input, textarea { font-family: var(--cuerpo); }
button { cursor: pointer; }
[hidden] { display: none !important; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f::placeholder, .nm::placeholder, .nt::placeholder, .bq::placeholder { color: var(--placeholder); }
.f:focus, .bq:focus { outline: 2px solid var(--ambar); outline-offset: -2px; }
.nm:focus, .nt:focus { outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ambar); outline-offset: -2px; }

/* Columna de 480 px como mucho, con el área segura de iOS. */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
main { flex: 1; }

/* Cabeceras */
.cab { height: 64px; padding: 0 12px 0 8px; display: flex; align-items: center; flex: none; }
.cab-inicio { padding: 0 12px 0 20px; justify-content: space-between; }
.cab-lista, .cab-detalle { justify-content: space-between; }
.cab-titulo { gap: 4px; }
.logo { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.titulo { margin: 0; font-family: var(--display); font-weight: 700; font-size: 20px; }
.cab-nav { display: flex; gap: 4px; }
.btn-icono { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--iconos); border-radius: 12px; background: none; border: none; padding: 0; }
a.btn-icono:hover { color: var(--iconos); }
.btn-mas, a.btn-mas:hover { color: var(--ambar); }
.btn-borrar { color: var(--borrar); }

/* Botones comunes */
.btn-primario { border: none; border-radius: 16px; background: var(--ambar); color: var(--sobre-ambar); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn-primario:hover { color: var(--sobre-ambar); }
.btn-52 { height: 52px; }
.btn-48 { height: 48px; border-radius: 14px; }
.btn-ancho { width: 100%; }
.btn-sec { height: 52px; border-radius: 16px; border: 1px solid var(--borde); background: none; color: var(--texto-chip); font-size: 16px; font-weight: 600; }
.btn-sec.btn-48 { height: 48px; border-radius: 14px; }
.botones-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn-nuevo { min-height: 52px; border-radius: 16px; border: 1px dashed var(--discontinuo-2); background: none; color: var(--ambar); font-size: 16px; font-weight: 600; }
.etq { font-size: 13px; font-weight: 500; color: var(--apagado); }
.etq-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--apagado); }
.campo-44, .campo-48 { box-sizing: border-box; border: 1px solid var(--borde); border-radius: 12px; padding: 0 14px; color: var(--texto); font-size: 16px; }
.campo-44 { height: 44px; background: var(--fondo); }
.campo-48 { height: 48px; background: var(--superficie); }
.texto-ayuda { margin: 0 4px 6px; font-size: 13px; color: var(--apagado); line-height: 1.45; }

/* Chips de tipo (Apuntar y Detalle) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 22px; font-size: 15px; font-weight: 500; background: var(--superficie); color: var(--texto-chip); border: 1px solid var(--borde); }
.chip[aria-pressed="true"] { background: var(--ambar); color: var(--sobre-ambar); border: 1px solid var(--ambar); }
.chip-mas { background: transparent; color: var(--apagado); border: 1px dashed var(--discontinuo); }
.chip-det { min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; }
.chip-det.chip-auto[aria-pressed="true"] { background: var(--superficie); color: var(--auto); border: 1px dashed var(--borde-auto); }

/* Apuntar */
.apuntar { padding: 40px 20px 0; display: flex; flex-direction: column; gap: 28px; }
.campo-nombre { display: flex; flex-direction: column; gap: 10px; }
.etq-nombre { font-size: 13px; font-weight: 500; color: var(--apagado); letter-spacing: 0.02em; }
.nm { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--ambar); border-radius: 0; padding: 6px 0 12px; color: var(--texto); font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; }
.bloque-tipos { display: flex; flex-direction: column; gap: 12px; }
.campo-nota { display: flex; flex-direction: column; gap: 8px; }
.nt { width: 100%; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; color: var(--texto); font-size: 16px; resize: none; }
.btn-nota { align-self: flex-start; min-height: 44px; padding: 0; background: none; border: none; color: var(--iconos); font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.btn-guardar { height: 56px; font-size: 17px; }

/* Aviso inferior */
/* --teclado lo pone bold.js con lo que tapa el teclado; con él abierto, el área segura de abajo ya queda debajo. */
.zona-aviso { position: fixed; left: 0; right: 0; bottom: calc(28px + max(env(safe-area-inset-bottom), var(--teclado, 0px))); max-width: 480px; margin: 0 auto; padding: 0 16px; pointer-events: none; z-index: 20; }
.aviso-inf { pointer-events: auto; background: var(--aviso); color: var(--fondo); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.aviso-inf .aviso-txt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aviso-inf .aviso-txt svg { flex: none; }
.aviso-inf b { font-weight: 600; }
.aviso-inf .aviso-accion { color: var(--aviso-enlace); font-weight: 600; text-decoration: none; min-height: 44px; display: flex; align-items: center; background: none; border: none; padding: 0; font-size: 15px; flex: none; }
.aviso-inf .aviso-accion:hover { color: var(--aviso-enlace); }

/* Lista */
/* El área segura de arriba la lleva el bloque pegajoso, con su fondo: si no, al bajar se mete bajo la barra de estado. */
.app-lista { padding-top: 0; }
.lista-arriba { position: sticky; top: 0; z-index: 5; background: var(--fondo); padding-top: env(safe-area-inset-top); }
.filtros { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.bq { height: 44px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 0 14px; color: var(--texto); font-size: 16px; -webkit-appearance: none; appearance: none; }
.pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--superficie); border-radius: 12px; padding: 4px; }
.pestana { min-height: 40px; border: none; border-radius: 9px; font-size: 14px; font-weight: 600; background: transparent; color: var(--apagado); }
.pestana[aria-selected="true"] { background: var(--borde); color: var(--texto); }
.filtro-tipos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.filtro-tipos::-webkit-scrollbar { display: none; }
.chip-f { flex: none; min-height: 36px; padding: 0 14px; border-radius: 18px; font-size: 14px; font-weight: 500; white-space: nowrap; background: transparent; color: var(--iconos); border: 1px solid var(--borde); }
.chip-f[aria-pressed="true"] { background: var(--texto); color: var(--fondo); border: 1px solid var(--texto); }
.lista { list-style: none; margin: 0; padding: 0 8px; flex: 1; }
.fila { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--separador); }
.fila-enlace { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 8px; text-decoration: none; color: inherit; }
.fila-enlace:hover { color: inherit; }
.ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 16px; }
.ico-usuario { background: var(--fondo-ambar); color: var(--ambar); border: 1px solid var(--borde-ambar); }
.ico-auto { background: var(--superficie); color: var(--auto); border: 1px dashed var(--borde-auto); }
.ico-sin { background: transparent; color: var(--apagado); border: 1px dashed var(--discontinuo-2); }
.fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fila-nombre { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.fila[data-hecho="1"] .fila-nombre { color: var(--nombre-hecho); text-decoration: line-through; text-decoration-color: var(--discontinuo-2); }
.fila-meta { font-size: 13px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.casilla { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; }
.caja { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: transparent; border: 2px solid var(--discontinuo-2); }
.caja svg { visibility: hidden; }
[aria-pressed="true"] > .caja { background: var(--ambar); border-color: var(--ambar); }
[aria-pressed="true"] > .caja svg { visibility: visible; }
.vacia { margin: 32px 16px; text-align: center; color: var(--apagado); font-size: 15px; }

/* Hojas (dialog nativo con aspecto de hoja inferior) */
dialog.hoja { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 480px; max-height: 90vh; max-height: 90dvh; padding: 0; border: none; border-radius: 24px 24px 0 0; background: var(--superficie); color: var(--texto); overflow: auto; }
dialog.hoja::backdrop { background: rgba(8, 9, 11, 0.66); }
.hoja-cuerpo { padding: 12px 20px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; margin: 0; }
.hoja-cuerpo:focus { outline: none; }
.asa { width: 40px; height: 5px; border-radius: 3px; background: var(--discontinuo); align-self: center; flex: none; }
.hoja-titulo { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; }
.hh-cab { display: flex; align-items: center; gap: 12px; }
.hh-check { width: 32px; height: 32px; border-radius: 10px; background: var(--ambar); display: flex; align-items: center; justify-content: center; flex: none; }
.hh-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-titulo { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; overflow-wrap: anywhere; }
.hh-sub { font-size: 13px; color: var(--apagado); }
.estrellas { display: flex; }
.estrellas button { background: none; border: none; padding: 0; line-height: 1; color: var(--discontinuo); }
.estrellas button.on { color: var(--ambar); }
.estrellas-hoja { gap: 6px; justify-content: center; }
.estrellas-hoja button { width: 52px; height: 52px; font-size: 36px; }
.estrellas-det { gap: 4px; }
.estrellas-det button { width: 44px; height: 44px; font-size: 28px; }
.campo-hoja { background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; color: var(--texto); font-size: 16px; resize: none; width: 100%; }

/* Detalle */
.detalle { padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 24px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo-tipo { gap: 10px; }
.det-nombre { background: transparent; border: none; border-bottom: 1px solid var(--borde); border-radius: 0; padding: 4px 0 10px; color: var(--texto); font-family: var(--display); font-weight: 600; font-size: 28px; width: 100%; }
.det-sub, .det-auto { font-size: 13px; color: var(--apagado); }
.det-nota { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; color: var(--texto); font-size: 16px; line-height: 1.45; resize: none; width: 100%; }
.tarjeta-hecho { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.det-hecho { min-height: 44px; display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; color: var(--texto); font-size: 16px; font-weight: 600; text-align: left; }
.caja-26 { width: 26px; height: 26px; flex: none; border-radius: 8px; }
.det-hecho-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.pie-guardar { position: sticky; bottom: 0; padding: 12px 20px 28px; border-top: 1px solid var(--separador); background: var(--fondo); }

/* Menú */
.menu { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 24px; }
.caida { background: var(--caida-fondo); border: 1px solid var(--caida-borde); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--caida-texto); }
.caida svg { flex: none; margin-top: 1px; }
.menu-nav { background: var(--superficie); border-radius: 16px; overflow: hidden; }
.menu-item { min-height: 60px; padding: 0 16px; display: flex; align-items: center; gap: 14px; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--separador-menu); }
a.menu-item:hover { color: var(--texto); }
.menu-pass { width: 100%; background: none; border: none; text-align: left; font-size: inherit; }
.menu-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.menu-tit { font-size: 16px; font-weight: 500; }
.menu-sub { font-size: 13px; color: var(--apagado); }
.form-pass { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.nota-pass { font-size: 13px; color: var(--apagado); line-height: 1.4; }
.btn-salir { min-height: 52px; border-radius: 16px; border: 1px solid var(--borde); background: none; color: var(--borrar); font-size: 16px; font-weight: 500; display: flex; align-items: center; justify-content: center; }

/* Tipos */
.tipos { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.lista-tipos { list-style: none; margin: 0; padding: 0; background: var(--superficie); border-radius: 16px; overflow: hidden; }
.lista-tipos > li + li { border-top: 1px solid var(--separador-menu); }
.lista-tipos > .sep-mas + li { border-top: none; }
.sep-mas span { display: block; padding: 10px 16px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--apagado); background: var(--sep-mas); }
.tipo { background: var(--superficie); }
.tipo.arrastrando { position: relative; z-index: 2; background: #23262D; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.tipo-fila { min-height: 60px; padding: 0 6px 0 4px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.asa-tipo { width: 32px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--asa); touch-action: none; cursor: grab; flex: none; }
.ico-tipo { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 15px; background: var(--fondo-ambar); color: var(--ambar); }
.es-oculto .ico-tipo { background: var(--tipo-oculto); color: var(--placeholder); }
/* Es un botón (abre "Editar tipo" también con teclado) con el aspecto del texto de la fila. */
.tipo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; background: none; border: none; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; }
.tipo-nombre { font-size: 16px; font-weight: 500; color: var(--texto); }
.es-oculto .tipo-nombre { color: var(--nombre-hecho); }
.tipo-meta { font-size: 13px; color: var(--apagado); }
.ojo { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--apagado); padding: 0; flex: none; }
.ojo .ojo-oculto, .es-oculto .ojo .ojo-ver { display: none; }
.es-oculto .ojo .ojo-oculto { display: block; }
.form-tipo { background: var(--superficie); border: 1px solid var(--borde-ambar); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.form-tipo-titulo { font-family: var(--display); font-weight: 700; font-size: 17px; }
.etq-letra { font-size: 13px; color: var(--apagado); }
.letras { display: flex; gap: 8px; }
.letra { width: 44px; height: 44px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--borde); color: var(--iconos); font-family: var(--display); font-weight: 700; font-size: 16px; padding: 0; }
.letra[aria-checked="true"] { background: var(--fondo-ambar); border: 2px solid var(--ambar); color: var(--ambar); }
.botones-form { margin-top: 4px; }
.btn-borrar-tipo { min-height: 48px; border-radius: 14px; border: 1px solid var(--borde); background: none; color: var(--borrar); font-size: 16px; font-weight: 500; }

/* Notificaciones */
.notis { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.dispositivo { background: var(--superficie); border-radius: 16px; padding: 0 16px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.disp-txt { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.disp-tit { font-size: 16px; font-weight: 500; }
.disp-sub { font-size: 13px; color: var(--apagado); }
.interruptor { width: 52px; height: 32px; flex: none; border-radius: 16px; border: none; padding: 3px; display: flex; justify-content: flex-start; background: var(--discontinuo); }
.interruptor .pomo { width: 26px; height: 26px; border-radius: 13px; background: var(--iconos); }
.interruptor[aria-checked="true"] { background: var(--ambar); justify-content: flex-end; }
.interruptor[aria-checked="true"] .pomo { background: var(--sobre-ambar); }
.interruptor:disabled { opacity: 0.45; cursor: default; }
.seccion { margin: 8px 4px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--apagado); }
.aviso { background: var(--superficie); border-radius: 16px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.aviso.apagado { opacity: 0.55; }
.aviso-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aviso-hora { display: flex; align-items: baseline; gap: 8px; }
.hora { background: none; border: none; color: var(--texto); font-family: var(--display); font-weight: 700; font-size: 34px; padding: 0; width: 120px; }
.hora::-webkit-calendar-picker-indicator { display: none; }
.hora::-webkit-datetime-edit, .hora::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { height: 40px; border-radius: 12px; font-size: 14px; font-weight: 600; background: transparent; color: var(--apagado); border: 1px solid var(--borde); padding: 0; }
.dia[aria-pressed="true"] { background: var(--texto); color: var(--fondo); border: 1px solid var(--texto); }
.sugiere { display: flex; flex-direction: column; gap: 8px; }
.etq-sugiere { font-size: 13px; color: var(--apagado); }
.sugiere-chips, .sugiere-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-tipo { font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 16px; background: var(--fondo-ambar); color: var(--ambar); }
.btn-cambiar { min-height: 34px; padding: 0 12px; border-radius: 16px; border: 1px dashed var(--discontinuo-2); background: none; color: var(--iconos); font-size: 14px; }
.btn-prueba { min-height: 48px; border-radius: 14px; border: none; background: none; color: var(--iconos); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pie-notis { margin: 0 4px; }
.casillas { display: flex; flex-direction: column; }
.casilla-fila { min-height: 44px; display: flex; align-items: center; gap: 12px; font-size: 16px; border-bottom: 1px solid var(--separador-menu); }
.casilla-fila input { width: 20px; height: 20px; accent-color: var(--ambar); margin: 0; }
.casilla-fila:has(input:disabled) { color: var(--apagado); }

/* Login y error */
.login { padding: 36px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.logo-login { font-size: 34px; }
.form-login { display: flex; flex-direction: column; gap: 14px; }
.btn-entrar { margin-top: 6px; }
.nota-login { font-size: 13px; color: var(--apagado); text-align: center; }
.error { padding: 48px 24px; display: flex; flex-direction: column; gap: 16px; }
.error-txt { margin: 0; font-size: 17px; }
.error-detalle { margin: 0; font-size: 13px; color: var(--apagado); overflow-wrap: anywhere; }
.btn-volver { align-self: stretch; }