/* Quelton 360 · movil primero, con menu lateral en pantalla grande
   Paleta: el fucsia #D22D7B es el de la web de Quelton. Todas las
   combinaciones de texto y fondo superan el contraste AA (4.5:1). */
:root {
  --tinta: #1a1a1a;          /* 15.7:1 sobre fondo */
  --suave: #6b6b6b;          /*  5.0:1 sobre fondo */
  --tenue: #767676;          /*  4.6:1 sobre fondo */
  --linea: #ead9e1;
  --fondo: #faf7f8;
  --tarjeta: #ffffff;

  --marca: #d22d7b;          /* el fucsia de Quelton; con texto blanco, 4.8:1 */
  --marca-texto: #b02467;    /* el mismo tono, para texto sobre claro: 6.4:1 */
  --marca-suave: #fdf0f6;
  --marca-media: #fad9e7;

  --menu: #2a1a22;           /* ciruela oscuro; con su texto, 13.6:1 */
  --menu-texto: #ede7ea;
  --menu-suave: #a99aa1;
  --menu-activo: #3d2831;

  --aviso: #b45309;          /*  5.0:1 */
  --aviso-suave: #fef3c7;
  --bien: #15803d;           /*  5.0:1 */
  --bien-suave: #edf7ef;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta); background: var(--fondo); -webkit-text-size-adjust: 100%;
}

/* ---------- Estructura ---------- */
.app { min-height: 100%; }
.barra {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  background: var(--menu); color: #fff; padding: 12px 14px;
}
.barra h1 { margin: 0; display: flex; align-items: center; gap: 7px;
  font-size: 15px; letter-spacing: .04em; font-weight: 700; }
.barra h1 span { color: var(--marca); }
.logotipo { height: 17px; width: auto; display: block; }
.barra .actual { margin-left: auto; font-size: 12px; color: var(--menu-suave); }
.hamburguesa {
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--menu-activo);
  color: #fff; font-size: 17px; cursor: pointer; line-height: 1;
}

nav.menu {
  position: fixed; inset: 0 auto 0 0; width: 258px; z-index: 40;
  background: var(--menu); color: #fff; padding: 14px 0 30px; overflow-y: auto;
  transform: translateX(-100%); transition: transform .18s ease;
}
nav.menu.abierto { transform: none; }
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }
.velo[hidden] { display: none; }
.menu .grupo { margin: 16px 0 4px; padding: 0 18px; font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--menu-suave); font-weight: 700; }
.menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  color: var(--menu-texto); text-decoration: none; font-size: 14px; border-left: 3px solid transparent;
}
.menu a:hover { background: var(--menu-activo); }
.menu a.activo { background: var(--menu-activo); border-left-color: var(--marca); color: #fff; font-weight: 600; }
.menu a .icono { width: 18px; text-align: center; opacity: .75; }

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

@media (min-width: 900px) {
  .app { padding-left: 258px; }
  nav.menu { transform: none; }
  .hamburguesa, .velo { display: none; }
  .barra { padding-left: 20px; }
  main { padding: 22px 26px; }
}

/* ---------- Piezas ---------- */
h2.titulo { margin: 0 0 3px; font-size: 20px; }
p.entradilla { margin: 0 0 18px; color: var(--suave); font-size: 13px; max-width: 62ch; }

.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
@media (min-width: 620px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.cifra b { display: block; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cifra small { color: var(--suave); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.cifra em { font-style: normal; font-size: 11px; color: var(--tenue); }
.cifra.alerta b { color: var(--aviso); }
.cifra.bien b { color: var(--bien); }
.cifra.marca b { color: var(--marca-texto); }

.bloque { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px;
  padding: 15px; margin-bottom: 14px; }
.bloque h3 { margin: 0 0 3px; font-size: 15px; }
.nota { margin: 0 0 12px; font-size: 12px; color: var(--suave); }
.scroll { overflow-x: auto; margin: 0 -15px; padding: 0 15px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--suave); font-weight: 700; padding: 5px 8px; border-bottom: 1px solid var(--linea);
  white-space: nowrap; }
td { padding: 7px 8px; border-bottom: 1px solid #f4eaef; font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }
tr:last-child td { border-bottom: 0; }
.sobra { color: var(--aviso); font-weight: 600; }
.bien { color: var(--bien); font-weight: 600; }
.marca { color: var(--marca-texto); font-weight: 600; }
.cero { color: var(--tenue); }

.buscador { width: 100%; padding: 11px 14px; font-size: 16px; border: 1px solid var(--linea);
  border-radius: 10px; background: var(--tarjeta); margin-bottom: 14px; color: var(--tinta); }
.buscador:focus { outline: 2px solid var(--marca-suave); border-color: var(--marca); }

.anios { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; }
.anio { padding: 6px 13px; font: inherit; font-size: 13px; border: 1px solid var(--linea);
  background: var(--tarjeta); border-radius: 20px; cursor: pointer; color: var(--suave); }
.anio.activo { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }

.etiqueta { font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.et-bien { background: var(--bien-suave); color: var(--bien); }
.et-marca { background: var(--marca-media); color: var(--marca-texto); }
.et-aviso { background: var(--aviso-suave); color: var(--aviso); }

.modelo { border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 9px;
  background: var(--tarjeta); overflow: hidden; }
.cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 14px; width: 100%;
  border: 0; background: transparent; font: inherit; color: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cabecera:hover { background: var(--marca-suave); }
.cabecera[aria-expanded="true"] { background: var(--marca-suave); }
.nombre { flex: 1; min-width: 0; }
.nombre strong { display: block; font-size: 15px; }
.nombre em { font-style: normal; font-size: 12px; color: var(--suave); }
.uds { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uds small { font-size: 10px; color: var(--suave); font-weight: 400; display: block; text-align: right; }
.detalle { border-top: 1px solid var(--linea); padding: 12px 14px 14px; background: var(--marca-suave); }
.detalle h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--suave); font-weight: 700; }
.detalle table { margin-bottom: 12px; }

.barra-grafico { height: 8px; background: var(--marca); border-radius: 4px; min-width: 2px; opacity: .85; }
.vacio { text-align: center; color: var(--suave); padding: 40px 20px; }
footer { text-align: center; color: var(--tenue); font-size: 11px; padding: 20px 16px 40px; }

/* Botones y avisos reutilizados desde el portal */
.boton { padding: 11px 18px; font: inherit; font-weight: 600; border: 0; border-radius: 10px;
  background: var(--marca); color: #fff; cursor: pointer; }
.boton:hover { background: var(--marca-texto); }
.boton:disabled { background: var(--tenue); cursor: not-allowed; }
.boton.secundario { background: var(--tarjeta); color: var(--marca-texto);
  border: 1px solid var(--marca); }
.exito { background: var(--bien-suave); color: var(--bien); border: 1px solid #bfe3c9;
  padding: 12px 14px; border-radius: 8px; font-size: 13px; }
.exito code { background: #fff; padding: 2px 6px; border-radius: 5px; color: var(--tinta); }
a[data-pedido] { color: var(--marca-texto); text-decoration: none; }
a[data-pedido]:hover { text-decoration: underline; }

.mini { font: inherit; font-size: 11px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--marca); background: var(--tarjeta); color: var(--marca-texto);
  cursor: pointer; margin-right: 4px; }
.mini:hover { background: var(--marca); color: #fff; }
.miniatura { width: 38px; height: 38px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--linea); display: block; }

.mini.encendido { background: var(--marca); color: #fff; }
.mini.encendido:hover { background: var(--marca-texto); }

.vista-correo { width: 100%; height: 460px; border: 1px solid var(--linea);
  border-radius: 10px; background: #fff; }
.formulario { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.formulario label { display: block; font-size: 12px; font-weight: 600; color: var(--suave); }
.formulario label small { font-weight: 400; color: var(--tenue); margin-left: 4px; }
.formulario input, .formulario select { width: 100%; padding: 10px 12px; font-size: 15px;
  margin-top: 4px; border: 1px solid var(--linea); border-radius: 9px;
  background: var(--tarjeta); color: var(--tinta); font-family: inherit; }
.formulario input:focus, .formulario select:focus { outline: 2px solid var(--marca-media);
  border-color: var(--marca); }
.formulario .ancho { grid-column: 1 / -1; }

/* --- Panel: lo que reclama atencion hoy --------------------------------- */
/* Va lo primero, antes que las cifras del ano: al entrar hay que ver que hay
   que hacer, no lo bien que fue el trimestre. */
.sobre-la-mesa { margin-bottom: 18px; }
.sobre-la-mesa h3 { margin: 0 0 10px; font-size: 15px; }
.tarjetas-mesa {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tarjeta-mesa {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--linea); border-left-width: 4px;
  border-radius: 12px; padding: 14px 16px; transition: border-color .15s;
}
.tarjeta-mesa:hover { border-color: var(--marca); }
.tarjeta-mesa.urgente { border-left-color: var(--marca); background: var(--marca-suave); }
.tarjeta-mesa.aviso { border-left-color: #e0a52e; }
.tarjeta-mesa .icono { font-size: 15px; color: var(--marca-texto); }
.tarjeta-mesa strong {
  display: block; font-size: 26px; line-height: 1.15; margin: 2px 0 1px;
}
.tarjeta-mesa .titulo {
  display: block; font-size: 13px; font-weight: 600; color: var(--marca-texto);
}
.tarjeta-mesa em {
  display: block; font-style: normal; font-size: 12px; color: var(--suave);
  margin-top: 5px; line-height: 1.4;
}
.sobre-la-mesa-vacio { border-color: var(--bien); }

/* Barra del punto muerto: cuanto del coste fijo lleva cubierto el margen */
.barra-fondo { height: 14px; background: var(--linea); border-radius: 7px;
  overflow: hidden; margin: 14px 0 6px; }
.barra-llena { height: 100%; background: var(--bien); border-radius: 7px;
  min-width: 3px; transition: width .4s; }