/* Cajero Digital — ver DISENO.md */
/* Paletas en prueba: se elige una con <html data-paleta="…"> */
:root, [data-paleta="mango"] {
  /* Mango: carbón cálido + naranja; tinte ámbar para bebidas y durazno para alimentos */
  --fondo: #fbf4ea;
  --superficie: #fffcf7;
  --hundido: #f3e6d6;
  --tinta: #26201b;
  --tinta-2: #6a5d51;
  --borde: #ecdcc8;
  --borde-fuerte: #c9b199;
  --acento: #c2410c;
  --acento-hover: #9a3412;
  --acento-suave: #ffedd5;
  --barra: #2b211b;
  --barra-texto: #fff7ed;
  --barra-texto-2: #d6c3ae;
  --barra-borde: #5c4a3d;
  --barra-hover: #3d3027;
  --seleccion: #2b211b;
  --tinte-bebidas: #fff1d6;
  --tinte-alimentos: #ffe8dc;
}
[data-paleta="laguna"] {
  /* Laguna: verde azulado profundo + turquesa; tinte cielo para bebidas y lima para alimentos */
  --fondo: #eef7f6;
  --superficie: #fbfefe;
  --hundido: #dcecea;
  --tinta: #10302d;
  --tinta-2: #4a6663;
  --borde: #cfe3e0;
  --borde-fuerte: #95b8b3;
  --acento: #0f766e;
  --acento-hover: #115e59;
  --acento-suave: #ccfbf1;
  --barra: #12403c;
  --barra-texto: #f0fdfa;
  --barra-texto-2: #a7d3cc;
  --barra-borde: #2f6a64;
  --barra-hover: #1b524d;
  --seleccion: #12403c;
  --tinte-bebidas: #e0f2fe;
  --tinte-alimentos: #ecfccb;
}
[data-paleta="uva"] {
  /* Uva: índigo noche + violeta; tinte lavanda para bebidas y rosa para alimentos */
  --fondo: #f3f2fb;
  --superficie: #fdfcff;
  --hundido: #e6e3f6;
  --tinta: #1e1b3a;
  --tinta-2: #5b5878;
  --borde: #dcd8f0;
  --borde-fuerte: #a9a3cf;
  --acento: #5b3fd6;
  --acento-hover: #4a2fbf;
  --acento-suave: #ede9fe;
  --barra: #241f4d;
  --barra-texto: #f5f3ff;
  --barra-texto-2: #b9b3e3;
  --barra-borde: #4a4485;
  --barra-hover: #332d66;
  --seleccion: #241f4d;
  --tinte-bebidas: #e5e9ff;
  --tinte-alimentos: #fde8f1;
}
:root {
  --peligro: #b42318;
  --peligro-suave: #fde7e4;
  --aviso: #8a5300;
  --aviso-suave: #fdf0d5;
  --foco: #1a56c4;
  --radio: 18px;
  --radio-sm: 13px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100dvh; line-height: 1.4; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
[hidden] { display: none !important; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  background: var(--superficie); font-weight: 600; text-decoration: none; color: var(--tinta);
}
.btn:hover:not(:disabled) { background: var(--hundido); }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--acento-hover); }
.btn-peligro { color: var(--peligro); border-color: #d9a59d; }
.btn-peligro:hover:not(:disabled) { background: var(--peligro-suave); }
.btn-texto { border-color: transparent; background: transparent; padding: 0 .6rem; }
.btn:disabled { opacity: .45; }

/* ---------- barra superior ---------- */
.barra {
  display: flex; align-items: center; gap: 1rem;
  min-height: 56px; padding: .4rem 1rem;
  background: var(--barra); color: var(--barra-texto);
}
.barra .marca { font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.barra .marca small { font-weight: 500; color: var(--barra-texto-2); margin-left: .35rem; }
.barra .espacio { flex: 1; }
.barra .btn { background: transparent; color: var(--barra-texto); border-color: var(--barra-borde); min-height: 40px; border-radius: 999px; padding: 0 1.1rem; }
.barra .btn:hover:not(:disabled) { background: var(--barra-hover); }
.barra .btn, .tasa-pill { white-space: nowrap; }
.tasa-pill { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.tasa-pill strong { font-size: 1rem; }
.tasa-pill span { font-size: .78rem; color: var(--barra-texto-2); }
.tasa-pill.error strong { color: #ffb4a6; }
/* Sin conexión / ventas por enviar: mismo formato de dos líneas que la tasa, en un botón para reintentar */
.conexion {
  display: flex; flex-direction: column; justify-content: center; line-height: 1.15; text-align: left;
  min-height: 40px; padding: .2rem .95rem; border-radius: 999px; white-space: nowrap;
  background: transparent; color: var(--barra-texto); border: 1px solid var(--barra-borde); font: inherit; cursor: pointer;
}
.conexion:hover { background: var(--barra-hover); }
.conexion strong { font-size: .92rem; }
.conexion span { font-size: .74rem; color: var(--barra-texto-2); }
.conexion.sin-red { border-color: #f0b862; }
.conexion.sin-red strong { color: #ffd28a; }
.conexion strong b { display: none; }

/* ---------- avisos ---------- */
.aviso {
  padding: .7rem .9rem; border-radius: var(--radio-sm);
  background: var(--aviso-suave); color: var(--aviso); border: 1px solid #e6cf9c; font-weight: 500;
}
.aviso.error { background: var(--peligro-suave); color: var(--peligro); border-color: #e5b5ad; }
.aviso.ok { background: var(--acento-suave); color: var(--acento-hover); border-color: color-mix(in srgb, var(--acento) 35%, transparent); }

/* ---------- formularios ---------- */
.campo { display: grid; gap: .3rem; }
.campo label, .campo .etiqueta { font-weight: 600; font-size: .92rem; }
.campo .ayuda { font-size: .85rem; color: var(--tinta-2); }
.campo .ayuda:empty { display: none; }
.campo input, .campo select {
  min-height: 46px; padding: 0 .75rem; width: 100%;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); background: #fff;
}
.campo input[aria-invalid="true"] { border-color: var(--peligro); box-shadow: 0 0 0 1px var(--peligro); }
.campo .error-campo { color: var(--peligro); font-size: .86rem; font-weight: 500; }
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 .6rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); background: #fff; font-weight: 600; cursor: pointer;
}
.segmentado input:checked + label { background: var(--seleccion); color: #fff; border-color: var(--seleccion); }
.segmentado input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 2px; }

dialog {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 0;
  width: min(460px, calc(100vw - 2rem)); background: var(--superficie); color: var(--tinta);
}
dialog::backdrop { background: rgb(29 27 23 / .45); }
dialog form { display: grid; gap: 1rem; padding: 1.25rem; }
dialog h2 { font-size: 1.2rem; }
dialog .acciones { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
dialog .acciones .izq { margin-right: auto; }

/* ---------- entrar ---------- */
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.entrar .instalar { display: grid; gap: .5rem; }
.entrar .instalar:not(:has(:not([hidden]))) { display: none; }
.entrar .ayuda-instalar { font-size: .88rem; }
.entrar form, .tarjeta-centro {
  width: min(360px, 100%); display: grid; gap: 1rem; padding: 1.5rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.entrar h1 { font-size: 1.4rem; }
.entrar p { color: var(--tinta-2); }
.entrar input { font-size: 1.5rem; letter-spacing: .3em; text-align: center; }
.entrar .btn { min-height: 52px; font-size: 1.05rem; }