:root {
  /* TEMA CLARO. Fondo gris muy claro, tarjetas blancas, texto oscuro. */
  --bg: #f3f5f8;
  --bg2: #eaeef3;      /* fondo del gradiente de tarjetas (parte baja) */
  --card: #ffffff;
  --card2: #eef1f6;    /* inputs y superficies suaves */
  --text: #1b1f27;
  --muted: #6b7280;
  --line: #dde2ea;
  --common: #3b74e0;   /* azul (comun) un poco mas profundo para verse sobre blanco */
  /* Acento de INTERFAZ en neutro OSCURO (para botones/resaltes sobre fondo claro). El verde queda
     solo como identidad de Cesar (viene de la BBDD, no de aqui). */
  --accent: #2b303a;
  --accent2: #3d4450;
  --danger: #e5484d;
  /* Lineas que RESTAN (descuentos, cupones, devoluciones). Verde y no rojo porque un descuento es
     buena noticia, no un error (Cesar, 29-ago-2026). Verde bosque a proposito: el lima #a3e635 de
     Cesar y el cian #22d3ee del comun salen en esa MISMA fila, asi que este tiene que ser oscuro y
     saturado para no rimar con ninguno. Si algun dia cambia el color de una persona, mirar aqui. */
  --resta: #15803d;
  --shadow: 0 6px 20px rgba(20,30,50,.10);
  --radius: 18px;
  /* Alturas de las dos barras que se quedan pegadas arriba en el editor. Son MEDIDAS, no calculadas:
     si cambia el contenido de la cabecera (titulo + iconos) o de la barra del editor hay que volver a
     medirlas. Viven aqui para que la foto sepa por debajo de que tiene que colocarse. */
  --alto-cabecera: 68px;
  --alto-barra: 67px; /* 47 de contenido + 20 del relleno que la separa de la cabecera */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  /* El fondo lleva dos degradados. Sin esto, en las pantallas de poco contenido (Configuracion,
     Historico) el body se queda mas corto que la ventana y el navegador REPITE los degradados a
     partir de ahi: se ve una banda a media pantalla. min-height llena la ventana y no-repeat evita
     la repeticion. dvh para el movil, donde 100vh se lleva mal con la barra del navegador. */
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(174,183,199,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(79,140,255,.10), transparent 55%),
    var(--bg);
  background-repeat: no-repeat; /* detras del atajo `background`, que si no lo pisa con `repeat` */
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 22px 16px calc(40px + env(safe-area-inset-bottom)); }
body { overflow-x: hidden; } /* red de seguridad: nada de scroll horizontal en movil */
/* barra de acciones (editar/nuevo ticket): envuelve en pantallas estrechas en vez de desbordar */
.toolbar { flex-wrap: wrap; row-gap: 10px; }
/* cabecera del editor: titulo + barra de acciones. En movil el titulo queda en su linea y los tres
   botones (Borrar a la izq, Cancelar/Guardar a la dcha) bajan JUNTOS en una sola fila de acciones. */
.editor-toolbar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.editor-toolbar h2 { flex: 0 0 auto; }
.editor-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; row-gap: 8px; }
.editor-actions .grow { flex: 1 1 auto; }

/* Editor a dos columnas solo en escritorio (foto a la derecha) */
@media (min-width: 900px) {
  /* El ancho que sobra se lo lleva la columna de las LINEAS, no la foto (28-ago-2026). Parece al
     reves de lo que pide el sentido comun, pero las fotos de ticket son verticales (1500x2000) y a
     esas no las limita el ancho de su columna sino el alto de la ventana: pasada de ~560px, ensanchar
     no las hace crecer ni un pixel. Lo que si estaba apretado era la descripcion de cada linea, que
     tenia unos 330px para textos de hasta 52 caracteres. */
  .wrap.wide .editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    grid-template-areas: "left photo";
    column-gap: 20px;
    align-items: start;
  }
  .wrap.wide .editor-left { grid-area: left; }
  /* Debajo de la foto no hace falta aire: es lo ultimo de la pantalla y su tarjeta ya tiene relleno.
     El margen de tarjeta (14px) y el relleno inferior del contenedor (40) sumaban 54px de nada que
     empujaban la pagina por debajo del borde de la ventana. Con un ticket de pocas lineas la foto es
     lo mas alto de la pantalla, asi que esos 54px eran justo la diferencia entre que no hubiera
     scroll y que hubiera "un pelin", que es como lo describio Cesar. */
  .wrap.wide { padding-bottom: 16px; }
  .wrap.wide .editor-photo { margin-bottom: 0; }
  /* La foto se queda a la vista mientras se baja por las lineas: es la referencia contra la que se
     cuadra el ticket. Se pega POR DEBAJO de la cabecera y de la barra de acciones; antes se pegaba a
     16px del borde de la ventana, o sea por debajo de la cabecera, que le tapaba los primeros 52px.
     z-index bajo para que las dos barras le pasen por encima y no al reves. */
  .wrap.wide .editor-photo {
    position: sticky; z-index: 1;
    top: calc(var(--alto-cabecera) + var(--alto-barra) + 16px);
    height: calc(100vh - var(--alto-cabecera) - var(--alto-barra) - 44px); /* 44 y no 32: deja 16px de colchon para que un pixel de redondeo no devuelva el scroll */
    display: flex; flex-direction: column;
  }
  /* El limite de alto va en la TARJETA, y el hueco de la foto se come lo que sobre. Antes el limite
     iba en la caja de la foto y habia que restarle a mano lo que gastaba la tarjeta en si misma
     (relleno, rotulo, puntitos del carrusel). Esa cuenta se me quedo corta con los tickets de dos
     fotos, que anaden la fila de puntitos: en una ventana de 900px entraba por diez pixeles y en una
     un poco mas baja se salia. Asi no hay nada que sumar: el rotulo y los puntitos ocupan lo suyo y
     la foto se queda con el resto, tenga la tarjeta las piezas que tenga. */
  .wrap.wide .editor-photo > *:not(.preview-box) { flex: 0 0 auto; }
  .wrap.wide .editor-photo .preview-box { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; }
  /* La tarjeta tiene alto FIJO (no un maximo), asi que la caja de la foto recibe de ella un alto
     definido y la imagen puede medirse en porcentaje contra algo real. Esto quita de en medio la
     unica parte fragil que quedaba: antes yo restaba a mano lo que gastaban el relleno, el rotulo y
     los puntitos del carrusel, y bastaba que esa cuenta se quedase corta por unos pixeles para que
     volviese el scroll. Ahora no hay nada que sumar: sobre lo que ocupen el rotulo y los puntitos, la
     foto se queda con el resto exacto, sea el que sea.
     La imagen va absoluta y centrada con `margin: auto` para que el porcentaje resuelva siempre
     contra la caja, que es un bloque de alto definido, y para que solo se reduzca, nunca se estire. */
  .wrap.wide .editor-photo .preview-box { position: relative; }
  .wrap.wide .editor-photo .preview-box img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; }
}
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 18px; }
.home-title { cursor: pointer; user-select: none; }
/* Header (titulo + botones) SIEMPRE visible: se queda clavado arriba y el resto (saldo, tickets)
   pasa por debajo al hacer scroll. Fondo solido para que no se transparente el contenido que scrollea.
   Los margenes negativos lo estiran hasta cubrir el padding de .wrap (22px arriba, 16px a los lados). */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  align-items: center;
  margin: -22px -16px 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.app-header h1 { margin: 0; }
/* SHELL: pantalla principal e historico como panel de alto de ventana. La parte de arriba (header +
   saldo + fila de "Tickets", o header + barra del historico) queda congelada y solo la lista de
   dentro (.list-scroll) hace scroll. dvh en vez de vh por la barra del navegador del movil. */
.wrap.shell { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.wrap.shell > *:not(.list-scroll):not(.hist-shell) { flex: 0 0 auto; }
/* En shell el header NO scrollea (es un flex item fijo), asi que el sticky sobra y ademas rompe:
   dentro del wrap con overflow:hidden el sticky lo clava en el borde del padding (22px) y anula el
   margen negativo que lo subia a ras del top, dejando una franja gris arriba. Static lo arregla.
   En las vistas sin shell (config, editor) el header sigue sticky contra la ventana, que si hace falta. */
.wrap.shell .app-header { position: static; }
.wrap.shell .hist-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wrap.shell .hist-head { flex: 0 0 auto; }
.wrap.shell .list-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 4px 16px calc(24px + env(safe-area-inset-bottom));
}
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0; }

.card {
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); font-size: 13px; }

/* Hero de saldo. PLANO a proposito (16-jul): antes era tarjeta elevada con sombra y gradiente, igual
   que los tickets (que SI se tocan), y engañaba pareciendo pulsable. Ahora es un panel plano, sin
   sombra ni relieve, para que se lea como informacion. Las tarjetas de ticket conservan su relieve y
   asi se distinguen de un vistazo. */
.hero {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: var(--card); /* BLANCO liso: resalta sobre el fondo gris-azulado sin necesitar sombra */
}
.hero .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.hero .who { font-size: 17px; margin: 4px 0 6px; }
.hero .big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Saldo a cero: es una frase, no un importe, asi que no pide los 34px del .big. Va con `.hero` por
   delante para ganarle en especificidad a `.hero .big`, que si no manda ella. */
.hero .big.paz { font-size: 22px; }

.balance-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-radius: 14px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line);
}

/* Inputs y botones */
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; min-width: 0; max-width: 100%; padding: 12px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card2); color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
/* iOS: los input date/time traen un ancho minimo del control nativo y se salen de su columna; los domamos */
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,48,58,.14); }
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; font-weight: 550; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

button { cursor: pointer; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--text); padding: 11px 15px; font-weight: 600; transition: transform .08s, filter .15s; }
button:active { transform: scale(.97); }
button.primary { background: linear-gradient(180deg, #f4f6f9, #e4e8ef); color: var(--text); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(20,30,50,.08); }
button.primary:hover { background: linear-gradient(180deg, #ffffff, #eaedf2); }
button.primary:disabled { filter: grayscale(.6) brightness(.7); box-shadow: none; cursor: not-allowed; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { color: var(--text); }
button.danger { background: transparent; color: var(--danger); border-color: transparent; }
.icon-btn { background: transparent; border: none; color: var(--muted); padding: 8px; display: flex; border-radius: 10px; transition: color .15s ease; }
/* Solo brillo, SIN recuadro: activo = brillante, inactivo = apagado. El hover se limita a raton de
   verdad (en movil el :hover se queda pegado tras tocar y el icono se quedaba encendido). */
@media (hover: hover) { .icon-btn:hover { color: var(--text); } }
.icon-btn.active { color: var(--text); }

button.btn-del { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 6px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
button.btn-del:hover { border-color: var(--danger); color: var(--danger); background: rgba(251,113,133,.08); }

/* Subir foto */
.upload {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; border: 1.5px dashed var(--line); border-radius: 14px;
  background: var(--card2); color: var(--muted); cursor: pointer; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.upload:hover { border-color: var(--accent); color: var(--text); }
.preview-box { margin-top: 12px; height: 260px; display: flex; align-items: center; justify-content: center; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.preview-box img { max-width: 100%; max-height: 236px; border-radius: 4px; }

/* Miniaturas al crear (varias fotos) */
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card2); display: flex; align-items: center; justify-content: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.thumb-x:hover { background: var(--danger); }
.thumb-add { flex-direction: column; gap: 6px; color: var(--muted); cursor: pointer; border-style: dashed; font-size: 13px; }
.thumb-add:hover { color: var(--text); border-color: var(--accent); }

/* Carrusel al editar (solo ver) */
.preview-box.carousel { position: relative; }
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: none; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.carousel-nav:hover { background: rgba(0,0,0,.82); }
/* El centrado vertical de estas flechas se hace con transform, y `button:active` (que tiene mas
   especificidad) lo PISABA con su scale: al pulsarlas daban un salto de 19px hacia abajo. Hay que
   repetir aqui las dos transformaciones juntas. */
.carousel-nav:active { transform: translateY(-50%) scale(.97); }
.carousel-nav.prev { left: 8px; }
.carousel-nav.next { right: 8px; }
.carousel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; }
.cdot.on { background: var(--accent); }
.rot { width: 48px; height: 44px; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.rot:disabled { opacity: .45; }

/* Piezas */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.amount { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.pos { color: var(--accent2); }
.neg { color: var(--danger); }
.hint { font-size: 12.5px; color: var(--muted); background: var(--card2); padding: 10px 12px; border-radius: 10px; margin-top: 10px; border: 1px solid var(--line); }
.err { color: var(--danger); font-size: 13px; margin: 8px 0; }
.tag { border-radius: 3px; flex: 0 0 auto; }
.line-mini { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.line-desc { flex: 1; min-width: 0; }
/* Barra de reparto del ticket: cuanto del total es comun y cuanto de cada uno, POR IMPORTE (lo que se
   reparte es dinero, no numero de lineas). Va encima de las lineas para ver de quien es el gasto antes
   de leer nada. El color va al 50% (el front le pega el alfa al hex del censo): las etiquetas de cada
   linea siguen a plena fuerza, asi que la barra se lee como resumen y no compite con ellas.
   El 50% es un suelo MEDIDO: por debajo del 40% el lima de Cesar y el amarillo de Cris se confunden,
   y ahi la barra deja de hacer su unico trabajo, que es decir de quien es el dinero. */
.split { display: flex; gap: 2px; height: 14px; border-radius: 3px; overflow: hidden; margin-top: 10px; }
.split > span {
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  font-size: 9.5px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #2b2926;
}
/* Chip de nombre: el color SIEMPRE de fondo con tinta oscura encima, nunca como color de letra. Un
   color de identidad sobre la tarjeta blanca da 1,5:1 de contraste (ilegible; el minimo es 4,5) y de
   fondo pasa de 7:1. Es lo que ya hacian .payer-tab y .name-edit; el saldo era la excepcion. */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #06140d; font-weight: 700; }

.name-edit { display: inline-block; font-weight: 700; font-size: 15px; cursor: pointer; padding: 5px 12px; border-radius: 999px; }
.name-edit:hover { filter: brightness(1.08); }
.add-person { width: 100%; padding: 14px; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); font-weight: 600; border-radius: 14px; }
.add-person:hover { border-color: var(--accent); color: var(--text); }
.ro-field { font-weight: 650; font-size: 15px; }
/* Tarjeta de ticket con aire de RECIBO: papel termico casi blanco, roto (dentado) arriba y abajo,
   sin esquinas redondeadas y todo el texto monoespaciado como impreso. */
.ticket {
  cursor: pointer; position: relative; margin-top: 24px; margin-bottom: 28px;
  background: #fcfcf9; color: #2b2926;
  border: none; border-radius: 0;
  box-shadow: 0 4px 12px rgba(30,30,30,.10);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  transition: box-shadow .15s;
}
/* El realce al pasar por encima SOLO donde la tarjeta se abre de verdad. En el Historico la rejilla
   va con `.quieto` y ahi la tarjeta no se toca: sin manita y sin levantarse. */
.ticket-grid:not(.quieto) .ticket:hover { box-shadow: 0 8px 20px rgba(30,30,30,.17); }
.ticket-grid.quieto .ticket { cursor: default; }
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px; background: #fcfcf9;
}
.ticket::before { /* dentado ARRIBA (puntas hacia arriba) */
  top: -9px;
  -webkit-mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 100% repeat-x;
  mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 100% repeat-x;
}
.ticket::after { /* dentado ABAJO (puntas hacia abajo) */
  bottom: -9px;
  -webkit-mask: conic-gradient(from -45deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 100% repeat-x;
  mask: conic-gradient(from -45deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 100% repeat-x;
}
/* etiqueta del pagador montada sobre el borde superior de la tarjeta (tipo pestana) */
.payer-tab { position: absolute; top: 0; left: 16px; transform: translateY(-50%); color: #06140d; font-weight: 700; font-size: 12px; letter-spacing: .01em; padding: 3px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.4); white-space: nowrap; }
.badge-pending { font-size: 12px; font-weight: 600; color: #fcd34d; background: rgba(252,211,77,.12); border: 1px solid rgba(252,211,77,.35); padding: 3px 10px; border-radius: 999px; }
/* Desplegables de "quien" (pagador del ticket, dueño de la linea): van pintados del color de quien
   eligen. Las OPCIONES desplegadas se dejan en el fondo normal a proposito: si heredan el color del
   select, la lista se vuelve ilegible (todas del mismo color). */
.select-color option { background: var(--card); color: var(--text); font-weight: 400; }

/* Fecha y hora: fuera el icono nativo (calendario/reloj). En escritorio se comia ~20px y cortaba el
   año ("13/07/202"). Sin el, el texto cabe entero y el selector se abre al pulsar el campo, como ya
   hacia el movil (ver showPicker en app.js). */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"], input[type="time"] { cursor: pointer; }

.line-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.line-row:last-of-type { border-bottom: none; } /* la raya separa lineas entre si, no la ultima del boton de anadir */
.line-row input, .line-row select { padding: 9px 8px; }
/* Los cuatro controles de la fila median 41, 43, 43 y 47: van centrados, asi que no cantaba, pero
   los bordes no casaban entre columnas. Una altura para todos. */
.line-row > select, .line-row > input, .line-row > button { height: 42px; }
.line-row > button { padding: 0 12px; }
.line-row select { flex: 0 0 auto; }
/* Boton de signo (29-ago-2026). El teclado decimal del iPhone no tiene tecla de menos, asi que el
   menos de un descuento se da aqui. El campo de al lado va SIN signo (seria decirlo dos veces), asi
   que este boton es quien dice si la linea suma o resta: apagado cuando suma, verde y relleno cuando
   resta. Ancho fijo y sin encoger: en la fila lo unico elastico es la descripcion, asi que el importe
   nunca se queda sin sitio (antes SI se encogia, y en pantallas estrechas el dinero desaparecia). */
.line-row > button.signo { width: 30px; flex: 0 0 auto; padding: 0; font-size: 17px; font-weight: 700;
  line-height: 1; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; }
.line-row > button.signo.neg { color: var(--resta); border-color: rgba(21,128,61,.45);
  background: rgba(21,128,61,.12); }
/* Y el numero tambien, que el signo no dependa de un boton de 30 px. */
.line-row > input.importe.neg { color: var(--resta); }
.warn-box { font-size: 13px; background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.4); color: #fecdd3; padding: 10px 12px; border-radius: 10px; margin-top: 8px; }
.ok-box { font-size: 12.5px; background: rgba(174,183,199,.08); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: 10px; margin-top: 8px; }

/* Panel de lectura de pendientes (revisar fotos + lanzar /cuentas) */
.reader { border-color: rgba(252,211,77,.35); }
.reader-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.reader-thumb { position: relative; width: 84px; height: 104px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--card2); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.reader-thumb:hover { border-color: var(--accent); }
.reader-thumb img { width: 100%; height: 100%; object-fit: cover; }
.reader-thumb-tab { position: absolute; bottom: 0; left: 0; right: 0; font-size: 10.5px; font-weight: 700; color: #06140d; padding: 2px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-done { font-size: 13px; background: rgba(174,183,199,.08); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: 10px; }

/* Reparto por ticket: cuanto le debe cada no-pagador al pagador en ESE ticket (tranquiliza a Cris) */
.reparto { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
/* en el ticket (papel claro) el "X debe Y" apagado no contrastaba: tinta oscura y raya calida */
.ticket .reparto { color: #4f4d47; border-top-color: #d9d5ca; }
/* El mismo reparto al pie del editor, donde se esta MIRANDO cambiar. En la tarjeta de la lista es un
   dato de consulta y va pequeño y en gris; aqui es el resultado de lo que acabas de tocar, asi que va
   en tinta normal y mas grande, con aire alrededor. Medidas afinadas por Cesar sobre la maqueta.
   Peso 400 y no 550: con el subrayado y el circulo ya hay enfasis de sobra, y engordar la letra encima
   era pasarse. A la izquierda y no centrado: la columna del editor mide 1120px en su pantalla y una
   frase centrada ahi queda flotando lejos de las lineas a las que se refiere (probado y descartado). */
.reparto.vivo {
  color: var(--text); font-size: 15.5px; font-weight: 400; text-align: left;
  padding: 11px; margin: 13px 0;
}

/* Las dos marcas de mano de la frase de reparto. El subrayado NO lleva z-index: va antes que el texto
   en el documento y el texto se levanta, asi que pinta encima por orden natural. */
.nombre { position: relative; display: inline-block; padding: 0 3px; font-weight: 650; }
.nombre .txt { position: relative; }
.cifra { position: relative; display: inline-block; padding: 3px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Las dos opacidades viven AQUI y no en el svg, para poder subirlas o bajarlas en un sitio.
   SUBRAYADO: 0,45 tiene suelo medido. Su color es lo que distingue a Cris de Cesar, y diluyendolo
   se acercan: a 0,45 la distancia entre el amarillo y el lima sobre el papel del ticket es de 20,4
   (se distinguen de sobra), a 0,40 baja a 17,7 y ahi ya empieza a ser dudoso. No bajar de 0,45.
   CIRCULO: no tiene esa atadura porque es de un solo color, asi que manda el gusto. A opacidad plena
   marcaba 78 de distancia con el papel, que es gritar; a 0,45 se queda en 34: presente sin dar voces.
   El trazo bajo ademas de 2,2 a 1,8 de grosor, que afina sin quitarle el aire de hecho a mano. */
.marca-n { position: absolute; left: -2px; right: -2px; bottom: -1px; width: calc(100% + 4px); height: 100%; pointer-events: none; opacity: .45; }
.marca { position: absolute; inset: -4px -2px; width: calc(100% + 4px); height: calc(100% + 8px); overflow: visible; pointer-events: none; opacity: .45; }

/* Pie de la tarjeta: reparto a la izquierda + sello "revisado" a la derecha en una sola fila. La raya
   divisoria se mueve aqui desde .reparto para no pintarla dos veces. */
.ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ticket .ticket-foot { border-top-color: #d9d5ca; }
.ticket-foot .reparto { margin-top: 0; padding-top: 0; border-top: none; flex: 1 1 auto; min-width: 0; }
/* Sello de aprobado: etiqueta perfilada, girada y semitransparente, como un tampon sobre el recibo.
   La palabra "revisado" y la fecha van DENTRO del mismo recuadro, apiladas. */
.stamp-revisado {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px; flex: 0 0 auto;
  color: #1c7a42; border: 1.5px solid #1c7a42; border-radius: 5px; padding: 3px 8px;
  transform: rotate(-7deg); opacity: .82; white-space: nowrap; line-height: 1.05;
}
.stamp-word { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.stamp-date { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* Los que faltan por repasar con Cris, en la cabecera. Antes iba entre parentesis y en gris apagado,
   "informa sin alarmar", pero lo que informaba era el numero y no lo que HAY QUE HACER con el: los
   domingos la pregunta es cuantos quedan por ver juntos, y esa merece un dato con nombre y no una
   coletilla. Mismo ambar que el aviso de dispositivos pendientes, que es el otro "esto te espera"
   de la app. Cuando no queda ninguno no se pinta nada: sin cero, sin hueco. */
/* En movil el titulo, la etiqueta y el boton no caben en una linea: con dos cifras ("11 por revisar
   juntos") el boton se salia 15px del contenedor. Se deja que la etiqueta baje debajo del titulo en
   vez de estrujar a nadie. En escritorio sobra sitio y nunca llega a envolver. */
.tickets-head > .row { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
/* EL AMBAR DE "ESTO TE ESPERA", en un solo sitio (6-sep-2026): lo comparten la etiqueta de los que
   faltan por revisar y el aviso de que toca cerrar cuentas. El color se toca aqui y cambian los dos. */
.pill-revisar, .pill-cerrar {
  font-weight: 650; white-space: nowrap;
  color: #7a6000; background: #fbf3d8; border: 1px solid #e0b400; border-radius: 999px;
}
.pill-revisar { font-size: 15px; padding: 3px 12px; }
/* Un punto mas pequena que su hermana: esta vive DEBAJO de la cifra de 34px del saldo, no al lado de
   un titulo de 15, y al mismo tamaño le hacia sombra al importe, que es lo que se viene a mirar.
   Y SI que parte linea, al reves que su hermana: el `nowrap` de arriba esta pensado para "4 por
   revisar", que son tres palabras, y esta lleva frase entera ("Toca cerrar · desde J8Oct (67 dias)").
   Con nowrap se salia de la tarjeta en pantallas de 320. A 375 y para arriba entra de una linea igual,
   asi que esto no cambia nada de lo que se ve a diario. */
.pill-cerrar { font-size: 13.5px; padding: 2px 11px; display: inline-block; white-space: normal; }
/* FIRMA AL PIE del editor (6-sep-2026), donde antes habia una casilla "Revisado" debajo de la nota.
   La casilla vivia arriba y el repaso linea a linea pasa abajo: al llegar al final de las lineas ya
   no estaba en pantalla, asi que el sello se caia al tocar una linea sin que se viera caer. Ahora la
   confirmacion esta al final de la tarjeta de lineas, pegada a la frase de reparto, que es el
   resultado de lo que acabas de decidir. Dos estados en el mismo hueco: boton si falta por revisar,
   sello (el mismo de la tarjeta de la lista) si ya esta. */
.firma { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; align-items: center; gap: 14px; }
/* Verde perfilado y no relleno: es el color del sello que va a dejar, y ademas el unico boton de
   color de la app (los demas son neutros), asi que relleno gritaria. */
.confirm { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid #1c7a42; color: #1c7a42; background: rgba(28,122,66,.07); border-radius: 12px; padding: 12px 22px; font-weight: 700; }
.confirm:hover { background: rgba(28,122,66,.13); }
.confirm:disabled { filter: grayscale(.6) brightness(.9); cursor: not-allowed; }
.quitar { background: transparent; border: none; color: var(--muted); font-size: 14px; padding: 8px 10px; }
.quitar:hover { color: var(--text); }
/* Guardar al pie en el movil (11-sep-2026). Ahi el sello no se puede firmar (eso es del ordenador),
   pero el pie NO puede quedarse sin boton: la barra de acciones de arriba solo se queda pegada de
   900px para arriba. Mismo sitio y mismo gesto que el verde, sin el color de firmar, que este boton
   solo guarda. */
.guardar-pie { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; }
.guardar-pie:disabled { filter: grayscale(.6) brightness(.97); cursor: not-allowed; }
/* La nota va SIN caja (11-sep-2026). Nacio con la clase `.hint`, que lleva el mismo fondo, borde y
   radio que un boton: en el movil quedaban dos rectangulos iguales, uno encima del otro, y el que no
   se pulsa parecia mas boton que el que si. Aqui solo hace falta texto gris. */
.firma-nota { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
/* El sello al pie del editor vive entre texto de 16px, no dentro del papel monoespaciado de la
   tarjeta: sube un punto para sostener la fila. El de la lista NO se toca. */
.firma .stamp-revisado { padding: 4px 11px; }
.firma .stamp-word { font-size: 12px; }
.firma .stamp-date { font-size: 10.5px; }
/* En el movil el boton va a todo el ancho: es la accion principal de la pantalla y ahi se pulsa con
   el dedo. 560 y no los 900 del resto del fichero a proposito: a 800px de columna un boton verde a
   todo lo ancho es un cartel, no un boton.
   SOLO cuando falta por firmar (`:not(.puesta)`). Con el sello ya puesto no hay nada que estirar, y
   la columna dejaba el sello arriba y el "quitar la marca" en su propia fila debajo, desparramados en
   el doble de alto para nada. Ahi se quedan los dos en linea, que caben de sobra. */
@media (max-width: 560px) {
  .firma:not(.puesta) { flex-direction: column; align-items: stretch; gap: 10px; }
  .firma:not(.puesta) .confirm, .firma:not(.puesta) .guardar-pie { width: 100%; justify-content: center; }
}

/* Autolectura, en Configuracion y solo para Cesar (7-sep-2026). Nacio como una casilla suelta dentro
   de la rejilla de secciones y ahi no se leia: era la unica seccion SIN tarjeta, asi que la casilla y
   su parrafo gris flotaban sobre el fondo justo al lado de Colores, que si va en tarjetas, y las dos
   se confundian en un mismo bloque. Ahora es un PANEL a lo ancho, por encima de la rejilla:
   - Fuera de la rejilla se separa por ser otra PIEZA, no otra tarjeta igual a la de al lado.
   - Es lo primero de la pantalla (decision de Cesar, 7-sep) y estando a lo ancho se ve que lo es.
   - De propina, Colores y Dispositivos quedan uno al lado del otro en escritorio y desaparece el
     hueco muerto que dejaba la columna izquierda debajo de la casilla.
   El COLOR dice el estado, que es lo que antes no se veia de un vistazo: verde tenue con franja
   cuando esta puesta, gris liso cuando no. El verde es --resta (el de los descuentos), que ya es el
   verde "buena noticia" de la app; el #1c7a42 que llevaba la casilla no salia de ninguna variable. */
.lec-panel {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px;
}
.lec-panel.on {
  background: linear-gradient(180deg, rgba(21,128,61,.08), rgba(21,128,61,.03));
  border-color: rgba(21,128,61,.25); border-left-color: var(--resta);
}
.lec-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: var(--card2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.lec-panel.on .lec-ico { background: rgba(21,128,61,.14); color: var(--resta); }
.lec-cuerpo { flex: 1 1 auto; min-width: 0; }
/* La fila entera es la etiqueta de la casilla: en el movil se enciende tocando el texto, no solo el
   interruptor, que a 46px de ancho es un blanco pequeno para el dedo. */
.lec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.lec-tit { font-size: 14px; font-weight: 650; }
/* 66ch: en un monitor ancho el parrafo a lo ancho del panel se lee peor, no mejor. */
.lec-exp { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 4px; max-width: 66ch; }

/* El interruptor. Debajo hay una casilla de verdad (transparente y a tamano completo) para no perder
   teclado ni lectores de pantalla; lo que se ve son la pista y la bola, que no reciben el clic. */
.sw { position: relative; width: 46px; height: 27px; flex: 0 0 auto; }
.sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sw .pista { position: absolute; inset: 0; background: #cfd6e0; border-radius: 999px; transition: background .15s; pointer-events: none; }
.sw .bola {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; pointer-events: none;
}
.sw input:checked ~ .pista { background: var(--resta); }
.sw input:checked ~ .bola { transform: translateX(19px); }
.sw input:focus-visible ~ .pista { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Post-it del ticket: nota escrita a mano o marca que deja la lectura (ej. "posible duplicado del
   ticket 33"). Va en la TARJETA, no solo en el editor, para que salte a la vista al repasar la lista
   sin abrir uno a uno. Ambar: avisa sin gritar como un error. */
.ticket-note {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.35;
  background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.35); color: #8a4b06;
}

/* Cerrar cuentas: el boton va AL LADO del importe, dentro del recuadro del saldo */
.saldo-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cerrar-pend { text-align: right; }
/* Cuanto lleva abierto el periodo (ver periodoAbierto en app.js). Va DEBAJO de la `saldo-row` entera,
   no dentro de ella: en el movil la cifra y el boton caben en la fila por los pelos (138 + 12 + 166 =
   316, justo el ancho a 390px), y meterla en la misma columna que la cifra la ensanchaba y tiraba el
   boton abajo. Aqui da igual lo larga que sea, que con la pastilla ambar ronda los 240. */
.abierto { margin-top: 6px; }
/* EL BOTON DE CERRAR DICE SOLO "Cerrar" EN EL MOVIL (7-sep-2026). Con "Cerrar cuentas" entero la fila
   del saldo se queda sin sitio: a 390px hay 316 de ancho y la cifra + el hueco + el boton largo suman
   316 clavados con DOS cifras, asi que en cuanto el saldo pasa de 99,99 el boton se caia a la fila de
   abajo (y en un iPhone de 375 se caia siempre, con cualquier importe). Cerrando una vez al mes, tres
   cifras es lo normal, no el caso raro. Con "Cerrar" caben hasta cuatro.
   El corte es el mismo 560 que usa la firma del editor: por encima sobra sitio para el texto entero
   incluso con cuatro cifras, que piden 434. Un toque no cierra nada, que el cierre es a dos manos, asi
   que la palabra corta no es peligrosa. */
@media (max-width: 560px) { .solo-ancho { display: none; } }

/* Desktop: aprovechar el ancho. Contenedor mas ancho y tickets en rejilla de 2 columnas
   (el saldo y la cabecera siguen a todo lo ancho; en movil queda 1 columna). */
@media (min-width: 900px) {
  /* EL MARCO NO CAMBIA NUNCA (28-ago-2026). Antes cada vista tenia su ancho de `.wrap`: 1000px las
     normales, 1060 el editor y, desde que la principal se solto, 2200 aquella. Y como la CABECERA
     vive dentro de `.wrap`, cambiar de vista movia el titulo y los cuatro iconos de sitio: pulsabas
     el engranaje y el engranaje se iba 400px a la izquierda. Un golpe, no un cambio de pantalla.
     Ahora el marco es siempre el mismo y la medida se la pone CADA VISTA a su contenido. */
  .wrap { max-width: min(2200px, 94vw); }
  .ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); column-gap: 16px; align-items: start; }

  /* Configuracion es un FORMULARIO: estirado a 2200 los campos se usan peor, no mejor, asi que se
     queda en los 1000px de siempre, centrada. Las demas vistas ya no llevan limite: la papelera y el
     historico son listas de tarjetas y la actividad va en columnas, y esas tres ganan con el ancho.
     `width` y no solo `max-width`: dentro del shell son items de un flex en columna, y ahi los
     margenes automaticos les quitan el estirado y las encogen a su contenido. */
  .settings { width: min(1000px, 100%); margin-left: auto; margin-right: auto; }

  /* Guardar, Cancelar y Borrar son LAS acciones de esta pantalla: no pueden irse de la vista al bajar
     por una lista larga de lineas. La barra se queda pegada justo debajo de la cabecera. z-index por
     debajo del de la cabecera (20) y por encima del de la foto (1). */
  .editor-shell > .editor-toolbar, .editor-shell > .toolbar {
    position: sticky; top: var(--alto-cabecera); z-index: 15;
    background: var(--bg); padding: 10px 0;
    /* El margen inferior de la cabecera (12px) se compensa aqui. Sin esto la barra se anclaba 12px
       mas abajo de donde acababa en reposo: la cabecera llega antes a su sitio, la barra sigue
       subiendo, y se veia deslizarse esos 12px antes de quedarse quieta. Cazado con el ticket del
       Costco, que es el unico con lineas suficientes para que haya scroll con la foto ajustada.
       Con el margen compensado, en reposo ya esta pegada a la cabecera y no se mueve nunca. */
    margin-top: -12px;
  }
  .editor-shell { width: min(1700px, 100%); margin-left: auto; margin-right: auto; }

  /* PANTALLA PRINCIPAL (28-ago-2026): aqui el ancho se reparte distinto que en el resto de vistas.
     Antes se quedaba en 1000px y en un monitor de 1920 sobraban 460px de gris a cada lado.
     - El contenedor se suelta hasta 2200px pero la TARJETA NO CRECE: se queda en unos 430px y lo que
       crece es el numero de columnas (3 a 1440, 4 a 1920, 5 a 2560). Mas pantalla = mas tickets a la
       vista, que es lo que se hace en esta pantalla, en vez de tickets mas gordos.
     - El saldo se queda en 640px (la medida que el contenedor tiene en movil) y CENTRADO. Es el dato
       principal y los tickets son su detalle, asi que no se estira con el monitor. Centrado y no a la
       izquierda a peticion de Cesar: su eje cuadra con el centro de la rejilla, 0px de desviacion.
     Estas dos reglas son solo de la principal; las demas vistas ponen su medida arriba. */
  .wrap.main .hero { width: 640px; margin-left: auto; margin-right: auto; }
  /* La papelera es una lista de tarjetas como la principal, asi que gana lo mismo con el ancho:
     mas columnas en vez de tarjetas mas gordas. Sin limite de anchura, a proposito. */
  .papelera-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); column-gap: 16px; align-items: start; }

  /* ACTIVIDAD en columnas de periodico, no en rejilla. Es un registro cronologico y una rejilla CSS
     rellena de izquierda a derecha, asi que el orden saltaria entre columnas. `columns` hace lo
     contrario: llena la primera columna hacia ABAJO y sigue en la de al lado, que es como se lee un
     periodico. Se gana el ancho sin perder el hilo del tiempo, y sin decorar con flechas. */
  .actividad-flujo { columns: 360px; column-gap: 20px; }
  .actividad-flujo > * { break-inside: avoid; }

  /* AJUSTES: sus SECCIONES (Colores, Dispositivos) una al lado de otra. Ojo, las secciones, no las
     filas: una fila de formulario en rejilla se usa peor cuanto mas ancha. `auto-fit` para que a
     Cris, que no ve Dispositivos, no le quede una columna vacia al lado. */
  .ajustes-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 8px 32px; align-items: start; }
  .ajustes-cols section { margin-bottom: 4px; } /* la separacion la pone la rejilla, no cada seccion */
  .ajustes-cols .devices-wrap { margin-top: 0; } /* al lado de Colores, no debajo: sin el margen las dos secciones arrancan a la misma altura */

  /* Con la tarjeta en ~430px la descripcion tiene 317px de sitio: a 14px se parten hasta las cortas,
     asi que baja a 12 (44 caracteres por linea) y se limita a dos. La descripcion mas larga de la
     BBDD mide 52 caracteres, o sea que hoy no recorta nada: el limite es red de seguridad, no poda.
     En movil no se toca, que ahi la tarjeta es ancha y 14px se lee mejor. */
  .line-mini { font-size: 12px; }
  .line-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Panel de dispositivos (Configuracion, solo Cesar) */
/* Dispositivos: filas densas con un carril del color de su dueño a la izquierda (28-ago-2026). El
   carril es lo que agrupa, asi que no hace falta una tarjeta por persona y los seis de casa entran
   sin scroll en el movil. El color no puede vivir aqui: sale del censo (BBDD) y lo pone el front
   inline, igual que en los desplegables de quien. */
.dev-card { padding: 6px 16px; overflow: hidden; } /* overflow: las filas sangran a los bordes y sin esto asoman por las esquinas redondeadas */
.dev-group { display: flex; align-items: center; gap: 8px; margin: 16px 0 2px; }
.dev-card > div:first-child .dev-group { margin-top: 12px; }
.dev-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dev-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0 -16px; padding: 8px 16px 8px 13px;
  border-left: 3px solid var(--line); border-top: 1px solid var(--line);
}
.dev-row.first { border-top: 0; } /* clase explicita, no :first-child: entre grupo y grupo va la cabecera de la persona */
.dev-row.pend { background: #fdfaf0; padding-top: 10px; padding-bottom: 10px; }
.dev-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dev-lead svg { flex: 0 0 auto; color: var(--muted); }
.dev-name { font-size: 15px; }
.dev-sub { color: var(--muted); font-size: 12px; }
.dev-sub.pend { color: #7a6000; }
.dev-here { font-size: 11px; color: var(--muted); font-weight: 600; background: var(--card2); border-radius: 999px; padding: 2px 7px; margin-left: 6px; }
.dev-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.dev-acts .sm { padding: 8px 12px; font-size: 14px; }
/* Revocar es un icono para que la fila quepa. Los 12px de padding lo dejan en 44px de zona pulsable,
   que es el minimo de un dedo; el confirm que hay detras es obligatorio por eso mismo. */
.dev-x { background: transparent; border: none; color: var(--muted); padding: 12px; display: flex; border-radius: 10px; cursor: pointer; }
.dev-x:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) { .dev-x:hover { color: var(--danger); } }
/* Cuantos tickets lleva un cierre no es una nota al pie: es EL dato de la fila, lo que dice si aquel
   cierre fue una semana tranquila o un mes entero. Sale del gris de `.muted` y sube de tamano. */
.cierre-cuenta { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dev-pill { font-size: 11px; font-weight: 600; color: #7a6000; background: #fbf3d8; border: 1px solid #e0b400; border-radius: 999px; padding: 2px 8px; }

/* Configuracion: los titulos de seccion (Colores, Dispositivos) son `h3` y hasta el 7-sep-2026 no
   tenian regla ninguna, o sea que salian a los 18,7px que pone el navegador por defecto: mas grandes
   que el titulo de la propia pantalla, que es un `h2` de 15px. Se leia al reves de como es. Bajan a
   13px en gris, que es lo que son, etiquetas de bloque y no titulos. El `h2` no se toca: mide lo
   mismo que en Tickets, Papelera e Historico y ahi tiene que seguir. */
.settings h3 { font-size: 13px; font-weight: 650; color: var(--muted); letter-spacing: .01em; }
.settings section { margin-bottom: 20px; }

/* Configuracion: las tarjetas son CONTENEDORES (colores, sesion, dispositivos), no se pulsan (lo
   interactivo son los puntos/botones de dentro). Se aplanan -sin sombra, fondo blanco liso- igual que
   el saldo, para que no imiten a las tarjetas de ticket, que si se tocan y conservan su relieve. */
.settings .card { box-shadow: none; background: var(--card); }

/* Cerrar sesion: al pie de Configuracion, discreto (patron de apps). Enlace neutro, rojo al tocarlo
   (cierra la sesion). Separado por una linea del contenido de arriba. */
.devices-wrap { margin-top: 22px; }
.logout-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.logout-link { background: transparent; border: none; color: var(--muted); font-weight: 600; padding: 6px 10px; }
.logout-link:hover { color: var(--danger); }