/* Operalo Taller – estilos base (tomados de ALMEN GARAGE). Los colores --marca, --acento y --detalle
   se pisan por taller desde la configuración (ver js/tema.js en la etapa 4). */
:root {
  --marca: #23282E;
  --acento: #2F6DA4;
  --acento-osc: #255985;
  --fondo: #F2F3F5;
  --tarjeta: #FFFFFF;
  --texto: #15202B;
  --suave: #56606B;
  --borde: #CDD2D8;
  --ok: #15803D;
  --ok-fondo: #E8F5EC;
  --alerta: #8A5A00;
  --alerta-fondo: #FFF4DB;
  --peligro: #B91C1C;
  --peligro-fondo: #FDECEC;
  --info: #1D4ED8;
  --info-fondo: #EAF0FD;
  --wa: #128C4B;
  --radio: 14px;
  --banner: 0px;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 18px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
body.con-banner { --banner: 28px; }
body.con-modal { overflow: hidden; }
#app { max-width: 540px; margin: 0 auto; min-height: 100vh; padding-top: var(--banner); }
.oculto { display: none !important; }
b { font-weight: 700; }
small { font-size: 15px; }
.chico { font-size: 15px; color: var(--suave); }

/* Banner modo prueba */
.banner-prueba {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 28px;
  background: #3a3a3a; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}

/* Íconos */
.ic { width: 26px; height: 26px; flex: none; }
.ic.der { margin-left: auto; }

/* Estructura de pantalla */
.pantalla { display: flex; flex-direction: column; min-height: calc(100vh - var(--banner)); }
.barra {
  position: sticky; top: var(--banner); z-index: 10; background: var(--marca); color: #fff;
  display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px 12px;
}
.barra h1 { font-size: 20px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-volver {
  display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.14); color: #fff;
  border: 0; border-radius: 10px; min-height: 48px; padding: 0 12px 0 6px; font: inherit; font-size: 16px; font-weight: 600;
}
.progreso { background: var(--tarjeta); padding: 10px 16px 12px; border-bottom: 1px solid var(--borde); }
.progreso-txt { font-size: 15px; color: var(--suave); margin-bottom: 6px; }
.progreso-txt b { color: var(--texto); }
.progreso-barra { height: 8px; background: #E3E6EA; border-radius: 4px; overflow: hidden; }
.progreso-barra i { display: block; height: 100%; background: var(--acento); border-radius: 4px; transition: width .25s; }
.cuerpo { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pie {
  position: sticky; bottom: 0; z-index: 10; background: var(--fondo); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 8px;
}

/* Botones */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 10px 18px; border-radius: var(--radio); border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 18px; text-align: center; cursor: pointer; text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn.primario { background: var(--acento); color: #fff; }
.btn.primario:active { background: var(--acento-osc); }
.btn.secundario { background: var(--tarjeta); color: var(--marca); border-color: var(--marca); }
.btn.peligro { background: var(--peligro); color: #fff; }
.btn.peligro-suave { background: transparent; color: var(--peligro); border-color: var(--peligro); margin-top: 12px; }
.btn.texto { background: transparent; color: var(--marca); text-decoration: underline; min-height: 48px; font-weight: 600; }
.btn.whatsapp { background: var(--wa); color: #fff; }
.btn.grande { min-height: 60px; }
.btn.gigante { min-height: 76px; font-size: 21px; }
.btn.gigante .ic { width: 32px; height: 32px; }
.btn.chico { min-height: 48px; font-size: 16px; padding: 6px 12px; width: auto; }
.btn[disabled] { opacity: .4; }
.btn-icono {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--tarjeta); color: var(--marca); font: inherit; font-size: 12px; font-weight: 600; padding: 4px;
}
.btn-icono.peligro { color: var(--peligro); }
.btn-icono[disabled] { opacity: .3; }
.link { background: none; border: 0; color: var(--marca); font: inherit; font-weight: 600; text-decoration: underline; padding: 8px 0; min-height: 44px; cursor: pointer; }
.botones-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Campos */
input[type=text], input[type=tel], input[type=search], input[type=date], input[type=email], input[type=password], textarea {
  width: 100%; min-height: 56px; padding: 12px 14px; font: inherit; font-size: 19px; color: var(--texto);
  background: #fff; border: 2px solid var(--borde); border-radius: 12px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.35; }
input:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(61,116,121,.22); }
.etiqueta { display: block; font-weight: 700; margin: 8px 0 -4px; }
.etiqueta small { font-weight: 400; color: var(--suave); }
.ayuda { color: var(--suave); font-size: 16px; margin: 0; }
.ayuda.grande { font-size: 17px; color: var(--texto); }
.ayuda.memoria { display: flex; align-items: center; gap: 6px; color: var(--marca); font-size: 17px; }
.ayuda.memoria .ic { width: 20px; height: 20px; }
.pregunta { font-size: 23px; font-weight: 700; margin: 4px 0; line-height: 1.25; display: block; }
.pregunta.chica { font-size: 19px; margin-top: 10px; }
.campo-monto, .campo-cant { display: flex; align-items: center; background: #fff; border: 2px solid var(--borde); border-radius: 12px; overflow: hidden; }
.campo-monto:focus-within, .campo-cant:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(61,116,121,.22); }
.campo-monto span, .campo-cant span { padding: 0 14px; font-weight: 700; color: var(--suave); }
.campo-monto input, .campo-cant input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.campo-monto span { padding-right: 0; }
.campo-monto.grande input, .campo-cant.grande input { font-size: 30px; font-weight: 700; min-height: 72px; }
.campo-monto.grande span, .campo-cant.grande span { font-size: 24px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; }
.check input { width: 26px; height: 26px; accent-color: var(--acento); }
.archivo { position: relative; overflow: hidden; }
.archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.texto-copia { font-size: 12px; font-family: monospace; min-height: 120px; }

/* Avisos en cajas */
.caja-aviso {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radio);
  background: var(--info-fondo); color: var(--texto); border: 1px solid transparent; font: inherit; text-align: left; width: 100%;
}
.caja-aviso p { margin: 0 0 4px; }
.caja-aviso .ic { margin-top: 1px; }
.caja-aviso.info .ic { color: var(--info); }
.caja-aviso.ok { background: var(--ok-fondo); } .caja-aviso.ok > .ic { color: var(--ok); }
.caja-aviso.alerta { background: var(--alerta-fondo); border-color: #F0D08A; } .caja-aviso.alerta > .ic { color: var(--alerta); }
.caja-aviso.peligro { background: var(--peligro-fondo); border-color: #F3B4B4; } .caja-aviso.peligro > .ic { color: var(--peligro); }
.caja-aviso.clic { cursor: pointer; }

/* Aviso flotante */
.aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 200; max-width: 508px; margin: 0 auto;
  background: #1f2937; color: #fff; padding: 14px 16px; border-radius: 12px; font-size: 17px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); transition: .2s; pointer-events: none;
}
.aviso.visible { opacity: 1; transform: none; }
.aviso.error { background: var(--peligro); }

/* Cargando */
#cargando { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.cargando-caja { background: #fff; padding: 24px 28px; border-radius: 16px; text-align: center; min-width: 220px; }
.cargando-caja p { margin: 12px 0 0; font-weight: 600; }
.ruedita { width: 44px; height: 44px; margin: 0 auto; border: 5px solid #E3E6EA; border-top-color: var(--acento); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Ventanas */
.modal-fondo { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.modal {
  background: var(--tarjeta); width: 100%; max-width: 540px; max-height: 90vh; overflow: auto;
  border-radius: 20px 20px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.modal h2 { margin: 0; font-size: 22px; }
.modal p { margin: 0; }
.modal-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.modal-opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion-modal { justify-content: flex-start; background: var(--fondo); color: var(--texto); border-color: var(--borde); }
.opcion-modal.actual { border-color: var(--c, var(--marca)); background: #fff; }
.opcion-modal .punto { width: 18px; height: 18px; border-radius: 50%; background: var(--c); flex: none; }
.modal-fondo.pantalla-completa { align-items: stretch; }
.modal-fondo.pantalla-completa .modal { max-height: none; height: 100%; border-radius: 0; padding: 0; }
.visor { display: flex; flex-direction: column; height: 100%; }
.visor-barra { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--marca); color: #fff; }
.visor-paginas { flex: 1; overflow: auto; background: #6b7280; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.visor-paginas canvas { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* Inicio */
.cabecera-inicio { display: flex; align-items: center; gap: 12px; }
.cabecera-inicio img { width: 60px; height: 40px; object-fit: contain; }
.cabecera-inicio div { flex: 1; line-height: 1.15; }
.cabecera-inicio b { display: block; color: var(--marca); font-size: 20px; }
.cabecera-inicio small { color: var(--suave); }
.resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; font: inherit; color: var(--texto);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 80px; cursor: pointer;
}
.res b { font-size: 28px; color: var(--marca); line-height: 1.1; }
.res span { font-size: 15px; color: var(--suave); }
.res.ancho { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-height: 64px; }
.res.ancho b { font-size: 24px; color: var(--acento-osc); }
.titulo-seccion { font-size: 19px; margin: 12px 0 0; color: var(--marca); }
.titulo-seccion.con-icono { display: flex; align-items: center; gap: 8px; }
.buscador { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--borde); border-radius: 12px; padding-left: 12px; }
.buscador .ic { color: var(--suave); }
.buscador input { border: 0 !important; box-shadow: none !important; padding-left: 4px; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.filtro, .chip {
  flex: none; min-height: 48px; padding: 8px 16px; border-radius: 24px; border: 2px solid var(--borde);
  background: #fff; color: var(--texto); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.filtro.activo, .chip.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lista-pres { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-pres {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; cursor: pointer;
}
.tarjeta-pres:active { background: #F7F8FA; }
.tp-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp-nombre { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
.tp-sub, .tp-fecha { font-size: 15px; color: var(--suave); }
.tp-total { font-size: 19px; white-space: nowrap; }
.tag { font-style: normal; font-size: 13px; font-weight: 700; background: #EEF0F3; color: var(--suave); padding: 2px 8px; border-radius: 8px; white-space: nowrap; display: inline-block; }
.tag.saldo { background: var(--alerta-fondo); color: var(--alerta); }
.chip-estado {
  flex: none; font-size: 14px; font-weight: 700; color: var(--c); border: 2px solid var(--c);
  padding: 2px 10px; border-radius: 12px; background: #fff; white-space: nowrap;
}
.sin-resultados { text-align: center; color: var(--suave); }
.vacio { text-align: center; color: var(--suave); padding: 24px 12px; }
.vacio .ic { width: 52px; height: 52px; color: #9AA3AD; }
.vacio p { margin: 8px 0 0; }

/* Menú */
.menu-lista { display: flex; flex-direction: column; gap: 8px; }
.item-menu {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; min-height: 68px; cursor: pointer;
}
.item-menu .ic { color: var(--acento); width: 30px; height: 30px; }
.item-menu span { display: flex; flex-direction: column; }
.item-menu small { color: var(--suave); }

/* Asistente */
.sugerencias { display: flex; flex-direction: column; gap: 6px; }
.sugerencia {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: var(--info-fondo); border: 1px solid #C9D6F7; border-radius: 12px; padding: 10px 12px; min-height: 56px;
}
.sugerencia span { flex: 1; display: flex; flex-direction: column; }
.sugerencia small { color: var(--suave); }
.sugerencia em { font-style: normal; font-weight: 700; color: var(--info); }
.grilla-trabajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tarjeta-trabajo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 110px; padding: 12px 8px; background: var(--tarjeta); border: 2px solid var(--borde); border-radius: var(--radio);
  font: inherit; font-size: 17px; font-weight: 700; color: var(--texto); cursor: pointer;
}
.tarjeta-trabajo .ic { width: 40px; height: 40px; color: var(--acento); }
.tarjeta-trabajo.otro { border-style: dashed; }
.tarjeta-trabajo:active { border-color: var(--acento); }
.trabajo-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; }
.trabajo-cabeza .ic { color: var(--acento); width: 32px; height: 32px; }
.trabajo-cabeza b { flex: 1; }
.trabajo-cabeza small { color: var(--suave); width: 100%; }
.opciones { display: flex; flex-direction: column; gap: 10px; }
.opciones.dos { flex-direction: row; } .opciones.dos > * { flex: 1; }
.tarjeta-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left;
  background: var(--tarjeta); border: 2px solid var(--borde); border-radius: var(--radio);
  font: inherit; font-size: 19px; font-weight: 700; color: var(--texto); cursor: pointer;
}
.tarjeta-opcion span { display: flex; flex-direction: column; }
.tarjeta-opcion small { font-weight: 400; color: var(--suave); }
.tarjeta-opcion .ic { color: var(--acento); width: 30px; height: 30px; }
.tarjeta-opcion.activa { border-color: var(--acento); background: #E6F0F0; box-shadow: inset 0 0 0 1px var(--acento); }
.subtotal-grande { background: var(--tarjeta); border: 2px solid var(--marca); border-radius: var(--radio); padding: 14px; text-align: center; }
.subtotal-grande span { display: block; color: var(--suave); font-size: 16px; }
.subtotal-grande b { font-size: 34px; color: var(--marca); }
.lista-items { display: flex; flex-direction: column; gap: 8px; }
.item-trabajo, .item-cat {
  display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px;
}
.it-ic .ic { color: var(--acento); width: 30px; height: 30px; }
.it-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.it-txt small { color: var(--suave); }
.it-sub { font-weight: 700; font-size: 18px; }
.it-acc { display: flex; gap: 6px; }
.boton-fila { background: none; border: 0; font: inherit; color: inherit; text-align: left; padding: 0; cursor: pointer; }
.total-linea { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px; font-size: 19px; }
.bloque { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bloque h3 { margin: 0; font-size: 18px; }
.calculo { margin: 0; color: var(--marca); }

/* Revisión y ficha */
.codigo-grande { font-size: 22px; font-weight: 800; color: var(--marca); margin: 0; }
.codigo-grande small { display: block; font-size: 15px; font-weight: 600; color: var(--suave); }
.res-bloque { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; }
.res-bloque p { margin: 4px 0; }
.res-titulo { display: flex; align-items: center; justify-content: space-between; }
.res-titulo h3 { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); }
.res-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #EEF0F3; }
.res-item:first-of-type { border-top: 0; }
.res-item div { display: flex; flex-direction: column; }
.res-item small { color: var(--suave); }
.res-item span { font-weight: 700; white-space: nowrap; }
.res-cond { margin: 4px 0 0; padding-left: 20px; }
.res-cond li { margin: 4px 0; }
.total-grande { background: var(--marca); color: #fff; border-radius: var(--radio); padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.total-grande span { font-weight: 700; letter-spacing: 1px; }
.total-grande b { font-size: 32px; }
.ficha-cabeza { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.ficha-cabeza h2 { margin: 2px 0 6px; font-size: 23px; line-height: 1.2; }
.ficha-cabeza p { margin: 4px 0; display: flex; align-items: center; gap: 8px; }
.ficha-cabeza p .ic { width: 20px; height: 20px; color: var(--suave); }
.ficha-cabeza .codigo { color: var(--suave); font-size: 15px; font-weight: 600; }
.ficha-cabeza.marca { text-align: center; }
.ficha-cabeza.marca img { width: 160px; height: auto; }
.ficha-cabeza.marca p { justify-content: center; }
.estado-boton { display: flex; align-items: center; gap: 10px; margin-top: 8px; background: none; border: 0; padding: 6px 0; font: inherit; color: var(--marca); font-weight: 600; text-decoration: underline; min-height: 48px; cursor: pointer; }
.estado-boton .chip-estado { font-size: 16px; padding: 4px 12px; text-decoration: none; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cifras > div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; }
.cifras span { font-size: 14px; color: var(--suave); }
.cifras b { font-size: 17px; word-break: break-word; }
.cifras .debe b { color: var(--alerta); }
.cifras .pagado b { color: var(--ok); }
.cifras.trabajo > div { border-color: var(--marca); }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-accion {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 10px;
  background: var(--tarjeta); border: 2px solid var(--borde); border-radius: var(--radio); font: inherit; font-size: 16px; font-weight: 700;
  color: var(--texto); text-align: center; text-decoration: none; cursor: pointer;
}
.btn-accion .ic { width: 32px; height: 32px; color: var(--marca); }
.detalle { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0 14px; }
.detalle summary { min-height: 56px; display: flex; align-items: center; font-weight: 700; color: var(--marca); cursor: pointer; }
.detalle[open] { padding-bottom: 14px; }
.detalle[open] > .res-bloque { border: 0; padding: 8px 0; border-top: 1px solid #EEF0F3; border-radius: 0; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.linea-tiempo li { display: flex; gap: 12px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; }
.linea-tiempo li .ic { color: var(--acento); }
.linea-tiempo li div { display: flex; flex-direction: column; }
.linea-tiempo small { color: var(--suave); }

/* Catálogo de trabajos */
.item-cat { flex-direction: column; align-items: stretch; }
.item-cat.apagado { opacity: .6; }
.ir-fila { display: flex; align-items: center; gap: 10px; }
.ir-acc { display: flex; gap: 6px; justify-content: space-between; }
.ir-acc .btn-icono { flex: 1; }
.grilla-iconos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tarjeta-icono {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 88px;
  background: var(--tarjeta); border: 2px solid var(--borde); border-radius: 12px; font: inherit; font-size: 14px; color: var(--texto); cursor: pointer;
}
.tarjeta-icono .ic { width: 38px; height: 38px; color: var(--acento); }
.tarjeta-icono.activa { border-color: var(--acento); background: #E6F0F0; }
.fila-opcion { display: flex; gap: 8px; margin-bottom: 8px; }
.vista-previa { border: 2px dashed var(--borde); border-radius: var(--radio); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vista-previa .grilla-trabajos { grid-template-columns: 1fr 1fr; }
.vista-previa .tarjeta-opcion { min-height: 52px; font-size: 17px; }

/* Precios */
.lista-precios { display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.fila-precio {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; min-height: 60px;
  background: none; border: 0; border-top: 1px solid #EEF0F3; font: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.fila-precio:first-child { border-top: 0; }
.fila-precio span { display: flex; flex-direction: column; }
.fila-precio small { color: var(--suave); }
.fila-precio .monto { white-space: nowrap; text-align: right; }
.fila-precio .monto small { font-weight: 400; }
.antes-despues { align-items: flex-end; white-space: nowrap; }
.antes-despues s { color: var(--suave); font-size: 15px; }

/* Bienvenida, acerca, PDF */
.sin-barra .cuerpo { justify-content: center; }
.bienvenida { text-align: center; padding: 16px 8px; }
.bienvenida .logo-grande { width: 190px; max-width: 70%; }
.bv-icono .ic { width: 96px; height: 96px; color: var(--acento); }
.bienvenida h2 { font-size: 27px; margin: 12px 0 8px; color: var(--marca); }
.bienvenida p { font-size: 19px; margin: 0; }
.puntos { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.puntos i { width: 12px; height: 12px; border-radius: 50%; background: var(--borde); }
.puntos i.activo { background: var(--acento); width: 28px; border-radius: 6px; }
.acerca { text-align: center; }
.acerca img { width: 170px; }
.autoria { font-weight: 700; color: var(--marca); }
.pdf-listo { text-align: center; padding: 8px 0; }
.pdf-listo > .ic { width: 72px; height: 72px; color: var(--peligro); }
.pdf-listo h2 { margin: 6px 0; font-size: 22px; }
.pdf-listo p { margin: 0; word-break: break-all; }

@media (min-width: 400px) {
  .grilla-trabajos { grid-template-columns: repeat(3, 1fr); }
  .vista-previa .grilla-trabajos { grid-template-columns: repeat(3, 1fr); }
}

/* El logo tiene fondo blanco: que se funda con el fondo gris */
.bienvenida .logo-grande, .acerca img, .ficha-cabeza.marca img, .cabecera-inicio img { mix-blend-mode: multiply; }
.estado-boton .chip-estado { display: inline-block; text-decoration: none; }
.estado-boton span:last-child { text-decoration: underline; }
.estado-boton { text-decoration: none; }


/* ===== Taller: patente, vehículos y repuestos ===== */

/* Patente: se lee como una chapa */
.patente {
  display: inline-block; font-weight: 800; letter-spacing: 2px; font-size: 17px; white-space: nowrap;
  background: #fff; color: var(--marca); border: 2px solid var(--marca); border-radius: 7px; padding: 2px 9px;
}
.patente.grande { font-size: 27px; letter-spacing: 3px; padding: 6px 14px; border-width: 3px; }
.patente.chica { font-size: 14px; letter-spacing: 1.5px; padding: 1px 6px; border-width: 1.5px; }
.patente.rara { border-style: dashed; }
input.patente-campo {
  text-transform: uppercase; letter-spacing: 4px; font-weight: 800; font-size: 28px; text-align: center; min-height: 72px;
}
.buscador input.patente-campo { font-size: 22px; letter-spacing: 3px; text-align: left; min-height: 56px; }

/* Resultados del buscador de patentes */
.resultados-patente { display: flex; flex-direction: column; gap: 6px; }
.resultado-auto {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; min-height: 60px; cursor: pointer;
}
.resultado-auto span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.resultado-auto small { color: var(--suave); }

/* Ficha del vehículo */
.auto-cabeza { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.auto-cabeza h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.auto-cabeza p { margin: 0; display: flex; align-items: center; gap: 8px; }
.auto-cabeza p .ic { width: 20px; height: 20px; color: var(--suave); flex: none; }
.auto-notas { background: var(--alerta-fondo); border: 1px solid #F0D08A; border-radius: 12px; padding: 10px 12px; }
.auto-notas b { display: block; font-size: 15px; color: var(--alerta); }

/* "Solo lo ves vos": nunca sale en el PDF */
.caja-privada { background: #fff; border: 2px dashed var(--marca); border-radius: var(--radio); padding: 12px 14px; }
.caja-privada > h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--marca);
}
.caja-privada > h3 .ic { width: 20px; height: 20px; }
.caja-privada .res-item { border-top-color: #E6E8EB; }
.caja-privada .ganancia b { color: var(--ok); }

/* Repuestos: precio al cliente grande y la ganancia chiquita */
.precio-cliente { background: var(--tarjeta); border: 2px solid var(--marca); border-radius: var(--radio); padding: 14px; text-align: center; }
.precio-cliente span { display: block; color: var(--suave); font-size: 16px; }
.precio-cliente b { font-size: 32px; color: var(--marca); display: block; line-height: 1.15; }
.precio-cliente .ganancia { color: var(--ok); font-weight: 700; font-size: 16px; margin-top: 2px; }
.precio-cliente .detalle-calculo { font-size: 15px; }
.sugeridos { display: flex; flex-direction: column; gap: 6px; }
.sugerido-rep {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: var(--info-fondo); border: 1px solid #C9D6F7; border-radius: 12px; padding: 10px 12px; min-height: 56px; cursor: pointer;
}
.sugerido-rep span { flex: 1; }
.sugerido-rep em { font-style: normal; font-weight: 700; color: var(--info); }

/* Valor hora / % de ganancia arriba del panel de precios */
.destacado { background: var(--tarjeta); border: 2px solid var(--marca); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.destacado h3 { margin: 0; font-size: 17px; }
.destacado .valor { font-size: 30px; font-weight: 800; color: var(--marca); }
.tag.ejemplo { background: var(--alerta-fondo); color: var(--alerta); }
.tag.sinprecio { background: #EEF0F3; color: var(--suave); }


/* ===== ALMEN: módulos del inicio, historial del auto y services ===== */
:root { --detalle: #E7A559; --detalle-fondo: #FDF3E6; }

/* Tarjeta "Tenés N services para avisar" */
.tarjeta-services {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--detalle-fondo); border: 2px solid var(--detalle); border-radius: var(--radio); padding: 14px; min-height: 76px;
}
.tarjeta-services > .ic:first-child { width: 36px; height: 36px; color: #A8641A; }
.tarjeta-services span { flex: 1; display: flex; flex-direction: column; }
.tarjeta-services b { font-size: 19px; }
.tarjeta-services small { color: var(--suave); }

/* Los dos módulos */
.modulos { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.modulo {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--tarjeta); border: 2px solid var(--marca); border-radius: var(--radio); padding: 18px 16px; min-height: 104px;
}
.modulo > .ic:first-child { width: 44px; height: 44px; color: var(--acento); }
.modulo span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.modulo b { font-size: 22px; color: var(--marca); }
.modulo small { color: var(--suave); }
.modulo:active { background: #F7F8FA; }

/* Ficha del auto: km y service */
.resumen-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.resumen-auto > div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.resumen-auto span { font-size: 14px; color: var(--suave); }
.resumen-auto b { font-size: 18px; }
.resumen-auto small { color: var(--suave); font-size: 14px; }
.caja-service { background: var(--tarjeta); border: 2px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.caja-service.pronto { border-color: var(--detalle); background: var(--detalle-fondo); }
.caja-service.vencido { border-color: #E08A8A; background: var(--peligro-fondo); }
.cs-fila { display: flex; gap: 10px; align-items: flex-start; }
.cs-fila > .ic { color: var(--acento); margin-top: 2px; }
.cs-fila div { display: flex; flex-direction: column; }
.cs-fila span { font-size: 14px; color: var(--suave); }
.cs-fila b { font-size: 20px; }
.cs-fila small { color: var(--suave); }
.cs-estado { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--marca); }
.cs-estado .ic { width: 20px; height: 20px; }
.caja-service .btn.chico { flex: 1 1 auto; }

/* Línea de tiempo del auto */
.linea-tiempo li[data-ir] { cursor: pointer; }
.linea-tiempo li > div { flex: 1; min-width: 0; }
.lt-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.lt-pie > b { margin-left: auto; white-space: nowrap; }
.lt-pie .chip-estado { font-size: 13px; padding: 1px 8px; }
.linea-tiempo li.lt-trabajo { border-left: 4px solid var(--acento); }
.linea-tiempo li.lt-aviso { background: transparent; border-style: dashed; padding: 8px 12px; font-size: 16px; }
.linea-tiempo li.lt-aviso .ic { width: 20px; height: 20px; color: var(--suave); }
.tag.service { background: #E1EFEF; color: var(--acento-osc); }
.resultado-auto .tag { align-self: flex-start; margin-top: 2px; }

/* Services para avisar */
.lista-services { display: flex; flex-direction: column; gap: 10px; }
.detalle .lista-services { padding-top: 4px; }
.fila-service { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.fila-service.vencido { border-left: 5px solid var(--peligro); }
.fs-cabeza { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: inherit; color: var(--texto); text-align: left; cursor: pointer; min-height: 48px; }
.fs-cabeza span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fs-cabeza small { color: var(--suave); }
.fs-estado, .fs-ultimo { margin: 0; display: flex; align-items: center; gap: 6px; }
.fs-estado .ic { width: 20px; height: 20px; color: var(--acento); }
.fila-service.vencido .fs-estado b { color: var(--peligro); }
.fs-ultimo { color: var(--suave); font-size: 15px; }
.fs-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fs-acciones .btn.texto { color: var(--peligro); min-height: 44px; font-size: 16px; }

/* Vista previa del mensaje (como burbuja de WhatsApp) */
.burbuja-wa { background: #DCF8C6; border-radius: 12px 12px 12px 2px; padding: 12px 14px; font-size: 17px; line-height: 1.4; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Trabajos hechos */
.fila-agregar { display: flex; gap: 8px; align-items: stretch; }
.fila-agregar input { flex: 1; min-width: 0; }
.fila-agregar .btn { flex: none; }
.bloque-check { background: var(--tarjeta); border: 2px solid var(--acento); border-radius: var(--radio); padding: 12px 14px; align-items: flex-start; }
.bloque-check span { display: flex; flex-direction: column; }
.bloque-check small { font-weight: 400; color: var(--suave); }
/* Flecha "entrar" (el ícono volver, dado vuelta) */
.resultado-auto .ic.der, .modulo .ic.der, .tarjeta-services .ic.der, .fs-cabeza .ic.der, .aviso-cuenta .ic.der { transform: scaleX(-1); color: var(--suave); }
.fs-cabeza .patente, .resultado-auto .patente { flex: none; }


/* ===== Operalo: repuesteras y precios de repuestos ===== */
select.selector {
  width: 100%; min-height: 56px; padding: 12px 14px; font: inherit; font-size: 19px; color: var(--texto);
  background: #fff; border: 2px solid var(--borde); border-radius: 12px; appearance: auto;
}
select.selector:focus { outline: none; border-color: var(--marca); }
.tarjeta-rep { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-rep p { margin: 0; display: flex; align-items: center; gap: 6px; }
.tarjeta-rep p .ic { width: 20px; height: 20px; color: var(--suave); }
.tr-cabeza b { font-size: 20px; color: var(--marca); display: block; }
.tr-cabeza small { color: var(--suave); }
.fila-hist { align-items: flex-start; }
.fila-hist > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.fila-hist .montos { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.fila-hist .montos small { color: var(--suave); font-size: 13px; }
.fila-hist .monto-cli { font-size: 15px; color: var(--suave); }
.tag.viejo { background: var(--alerta-fondo); color: var(--alerta); border-color: #F0D08A; align-self: flex-start; }
.fila-2 { display: flex; gap: 8px; }
.fila-2 input { flex: 1; min-width: 0; }

/* Datos del taller: logo y colores */
.ficha-cabeza.marca .btn { margin-top: 10px; }
.logo-editor { display: flex; gap: 14px; align-items: center; }
.logo-marco {
  width: 128px; height: 128px; flex: none; border: 1px dashed var(--borde); border-radius: var(--radio);
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-marco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-marco span { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--suave); font-size: 15px; }
.logo-botones { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.logo-botones label.btn { cursor: pointer; }
.paletas { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.paleta {
  display: flex; width: 64px; height: 44px; padding: 3px; border: 2px solid var(--borde); border-radius: 12px;
  background: #fff; cursor: pointer; overflow: hidden;
}
.paleta i { flex: 1; }
.paleta i:first-child { border-radius: 8px 0 0 8px; } .paleta i:last-child { border-radius: 0 8px 8px 0; }
.paleta.activo { border-color: var(--texto); box-shadow: 0 0 0 2px var(--texto); }
.fila-colores { display: flex; gap: 10px; }
.color-campo {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; cursor: pointer; font-size: 16px;
}
.color-campo input[type=color] { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.muestra-colores { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--fondo); }
.mc-barra { background: var(--m); color: #fff; padding: 14px 16px; font-size: 18px; }
.mc-cuerpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mc-boton { display: block; text-align: center; background: var(--a); color: #fff; font-weight: 700; border-radius: 12px; padding: 12px; }
.mc-linea { display: block; height: 4px; border-radius: 2px; background: var(--a); }
#aviso-contraste .caja-aviso { margin-top: 12px; }


/* Mi cuenta: avisos, banner de solo lectura y módulos */
.banner-cuenta {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 28px; border: 0; cursor: pointer;
  background: var(--peligro); color: #fff; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px;
}
.banner-cuenta.soporte { background: #6D28D9; }
.aviso-cuenta { width: 100%; text-align: left; font: inherit; color: inherit; margin-bottom: 14px; align-items: center; }
.aviso-cuenta span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-cuenta small { font-size: 15px; color: var(--suave); }
.cuenta-cabeza .estado-cuenta { font-size: 17px; }
.estado-cuenta { display: inline-block; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.estado-cuenta.info { background: var(--info-fondo); color: var(--info); }
.estado-cuenta.ok { background: var(--ok-fondo); color: var(--ok); }
.estado-cuenta.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.estado-cuenta.peligro { background: var(--peligro-fondo); color: var(--peligro); }
.lista-modulos { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-modulo { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.tarjeta-modulo.activo { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.tarjeta-modulo p { margin: 6px 0; }
.tarjeta-modulo .btn { margin-top: 6px; }
.tm-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-cabeza b { font-size: 19px; }
.tag.activo { background: var(--ok-fondo); color: var(--ok); }

/* ===========================================================================
   Versión para PC (pantalla de 1024 px o más): menú lateral fijo, contenido
   ancho y, en presupuestos / autos / clientes, la lista con el detalle al lado.
   En el celular nada de esto aplica.
   =========================================================================== */
#lateral { display: none; }
@media (min-width: 1024px) {
  :root { --lateral: 264px; }
  body { font-size: 17px; }
  #lateral {
    display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 20;
    top: var(--banner); bottom: 0; left: 0; width: var(--lateral); overflow-y: auto;
    background: var(--marca); color: #fff; padding: 14px 12px 16px;
  }
  #app { max-width: none; }
  body.con-lateral #app { margin-left: var(--lateral); }

  .lat-marca {
    display: flex; align-items: center; gap: 10px; background: none; border: 0; color: #fff; font: inherit;
    text-align: left; padding: 6px 6px 12px; cursor: pointer;
  }
  .lat-marca img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; flex: none; }
  .lat-marca span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .lat-marca b { font-size: 17px; overflow-wrap: anywhere; }
  .lat-marca small { opacity: .75; font-size: 13px; }
  .lat-nuevo { min-height: 46px; font-size: 16px; margin: 2px 0 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
  .lat-titulo { margin: 12px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; opacity: .6; }
  .lat-grupo { display: flex; flex-direction: column; gap: 2px; }
  .lat-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 6px 10px;
    background: none; border: 0; border-radius: 10px; color: rgba(255,255,255,.88); font: inherit; font-size: 15px;
    font-weight: 600; text-align: left; cursor: pointer;
  }
  .lat-item .ic { width: 21px; height: 21px; opacity: .9; }
  .lat-item:hover { background: rgba(255,255,255,.08); color: #fff; }
  .lat-item.activo { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
  .lat-item:focus-visible, .lat-marca:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
  .lat-salir { margin-top: auto; }
  .lat-salir span { display: flex; flex-direction: column; min-width: 0; }
  .lat-salir small { font-weight: 400; font-size: 12px; opacity: .7; overflow: hidden; text-overflow: ellipsis; }

  /* El botón "Menú" del inicio sobra: el menú está siempre a la vista */
  .cabecera-inicio [data-ir="menu"] { display: none; }

  /* Contenido: ancho cómodo para leer, centrado */
  .barra { padding: 8px 24px; }
  .cuerpo { width: 100%; max-width: 920px; margin: 0 auto; padding: 24px; }
  .pie { flex-direction: row-reverse; justify-content: flex-start; padding: 12px max(24px, calc((100% - 920px) / 2 + 24px)); }
  .pie .btn { width: auto; min-width: 220px; }
  .progreso { padding-left: max(24px, calc((100% - 920px) / 2 + 24px)); padding-right: max(24px, calc((100% - 920px) / 2 + 24px)); }

  /* Grillas que en el celular van de a una o dos */
  .modulos { display: grid; grid-template-columns: 1fr 1fr; }
  .grilla-trabajos { grid-template-columns: repeat(4, 1fr); }
  .acciones { grid-template-columns: repeat(4, 1fr); }
  .lista-modulos { display: grid; grid-template-columns: 1fr 1fr; }
  .resumen { grid-template-columns: 1fr 1fr 2fr; }
  .resumen .res.ancho { grid-column: auto; }

  /* Ventanas en el medio de la pantalla, no abajo */
  .modal-fondo { align-items: center; }
  body.con-lateral .modal-fondo { padding-left: var(--lateral); }
  .modal { border-radius: var(--radio); }
  .aviso, #aviso { bottom: 24px; }
  body.con-lateral .aviso { left: calc(var(--lateral) + 24px); right: 24px; }

  /* ---- Lista + detalle ---- */
  .dividida .columnas { flex: 1; display: grid; grid-template-columns: minmax(340px, 420px) 1fr; align-items: start; }
  .dividida .lista-col { max-width: none; margin: 0; padding: 20px; border-right: 1px solid var(--borde); min-height: calc(100vh - 60px - var(--banner)); }
  .dividida .lista-col .resumen { grid-template-columns: 1fr 1fr; }
  .dividida .lista-col .resumen .res.ancho { grid-column: 1 / -1; }
  .detalle-col {
    position: sticky; top: calc(60px + var(--banner)); max-height: calc(100vh - 60px - var(--banner)); overflow-y: auto;
    padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 12px;
  }
  .detalle-barra { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
  .detalle-barra h2 { margin: 0; font-size: 22px; }
  .detalle-cuerpo { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
  .detalle-pie { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--borde); }
  .detalle-pie .btn { width: auto; }
  .detalle-col .acciones { grid-template-columns: repeat(3, 1fr); }
  .detalle-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--suave); padding: 80px 20px; text-align: center; }
  .detalle-vacio .ic { width: 44px; height: 44px; }
  .lista-col .seleccionado { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); background: var(--tarjeta); }
}
@media (min-width: 1440px) {
  .dividida .columnas { grid-template-columns: 460px 1fr; }
}

/* Panel del administrador */
.adm-cabecera b { font-size: 22px; }
.adm-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-cifras > div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.adm-cifras > div:first-child { grid-column: 1 / -1; }
.adm-cifras span { font-size: 14px; color: var(--suave); }
.adm-cifras b { font-size: 22px; }
.adm-cifras small { color: var(--suave); }
.adm-atender { align-items: center; }
.adm-atender span { display: flex; flex-direction: column; gap: 2px; }
.adm-atender small { color: var(--suave); font-size: 15px; }
.adm-acciones { grid-template-columns: 1fr 1fr; }
.btn-accion.peligro { color: var(--peligro); border-color: #F3B4B4; }
.adm-mas { margin-top: 12px; }
@media (min-width: 1024px) {
  .adm-cifras { grid-template-columns: repeat(3, 1fr); }
  .adm-cifras > div:first-child { grid-column: auto; }
  .adm-acciones { grid-template-columns: repeat(5, 1fr); }
}
.adm-modulo { justify-content: flex-start; cursor: pointer; }
.adm-modulo span { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }

.zona-peligro { margin-top: 24px; border: 2px solid #F3B4B4; background: var(--peligro-fondo); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.zona-peligro h3 { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--peligro); }
.zona-peligro p { margin: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }