/* Kit de componentes (sistema visual ATA): monocromo, sin degradados, acción en verde. */
:root {
  --fondo: #F3F3F4;
  --tarjeta: #FFFFFF;
  --suave: #EDEDEF;
  --seleccion: #E3E3E6;
  --linea: #E6E6E9;
  --borde-campo: #88888F;
  --texto: #242329;
  --texto-2: #5D5D64;
  --grafito: #29292C;
  --accion: #25D366;
  --accion-hover: #1EBE5D;
  --accion-texto: #0B141A;
  --error: #B91C1C;
  --error-fondo: #FEE2E2;
  --ok: #166534;
  --ok-fondo: #E3F4E8;
  --anillo: 0 0 0 3px rgb(41 41 44 / .2);
  --sombra-flotante: 0 12px 32px rgb(36 35 41 / .12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }

.antetitulo { font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.secundario { color: var(--texto-2); }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 26px; padding: 24px; }
.tarjeta-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tarjeta-titulo { font-size: 19px; font-weight: 600; }
.tarjeta-explicacion { font-size: 11px; color: var(--texto-2); margin-top: 2px; line-height: 1.5; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 12px 18px; border-radius: 24px; border: 1px solid transparent;
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: var(--accion); color: var(--accion-texto);
  transition: background 150ms, transform 150ms, border-color 150ms;
}
.boton:hover:not(:disabled) { background: var(--accion-hover); }
.boton:active:not(:disabled) { transform: scale(.97); }
.boton:focus-visible { outline: none; box-shadow: var(--anillo); }
.boton:disabled { background: var(--suave); color: var(--texto-2); cursor: not-allowed; }
.boton svg { width: 17px; height: 17px; }
.boton-secundario { background: var(--tarjeta); border-color: var(--linea); color: var(--texto); }
.boton-secundario:hover:not(:disabled) { background: var(--suave); }
.boton-suave { background: var(--suave); color: var(--texto); }
.boton-suave:hover:not(:disabled) { background: var(--seleccion); }
.boton-peligro { background: transparent; color: var(--error); }
.boton-peligro:hover:not(:disabled) { background: var(--error-fondo); }

/* Campo de texto */
.etiqueta { display: block; font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.campo {
  width: 100%; height: 44px; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--borde-campo); background: var(--tarjeta);
  font: inherit; font-size: 12px; color: var(--texto);
}
.campo:focus { outline: none; border-color: var(--grafito); box-shadow: var(--anillo); }
@media (pointer: coarse) { .campo { font-size: 16px; } }

/* Interruptor */
.fila-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fila-interruptor .titulo { font-size: 12px; font-weight: 600; }
.fila-interruptor .detalle { font-size: 10px; color: var(--texto-2); margin-top: 2px; }
.interruptor {
  flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; border: none;
  background: #B4B4BA; cursor: pointer; transition: background 150ms;
}
.interruptor::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform 150ms;
}
.interruptor[aria-checked="true"] { background: var(--accion); }
.interruptor[aria-checked="true"]::after { transform: translateX(18px); }
.interruptor:focus-visible { outline: none; box-shadow: var(--anillo); }

/* Control segmentado */
.segmentado { display: flex; background: var(--suave); border-radius: 24px; padding: 4px; gap: 2px; }
.segmentado button {
  flex: 1; height: 36px; border: none; border-radius: 20px; background: transparent;
  font-size: 12px; font-weight: 500; color: var(--texto-2); cursor: pointer;
}
.segmentado button[aria-checked="true"] { background: var(--tarjeta); color: var(--texto); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.segmentado button:focus-visible { outline: none; box-shadow: var(--anillo); }

/* Contador */
.contador {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 5px;
  border: 1px solid var(--borde-campo); border-radius: 14px; background: var(--tarjeta);
}
.contador button {
  width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--suave);
  font-size: 16px; cursor: pointer;
}
.contador button:hover { background: var(--seleccion); }
.contador button:focus-visible { outline: none; box-shadow: var(--anillo); }
.contador .cifra { flex: 1; text-align: center; font-size: 13px; font-weight: 600; }
.contador .unidad { font-weight: 500; color: var(--texto-2); }

/* Píldora */
.pildora { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 4px 9px; font-size: 10px; font-weight: 600; background: var(--suave); color: var(--texto-2); }
.pildora.ok { background: var(--ok-fondo); color: var(--ok); }
.pildora .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Zona de subida */
.subir {
  display: flex; align-items: center; gap: 14px; padding: 18px; cursor: pointer;
  border: 1.5px dashed var(--borde-campo); border-radius: 22px; background: rgb(237 237 239 / .5);
  transition: border-color 150ms, background 150ms;
}
.subir:hover, .subir.encima { border-color: var(--grafito); background: var(--suave); }
.subir:focus-visible { outline: none; box-shadow: var(--anillo); }
.subir .caja { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--tarjeta); display: grid; place-items: center; }
.subir .caja svg { width: 18px; height: 18px; }
.subir .titulo { font-size: 12px; font-weight: 600; }
.subir .detalle { font-size: 10px; color: var(--texto-2); margin-top: 2px; }

.oculto { display: none !important; }