:root {
  --fondo: #f4f5f7;
  --superficie: #ffffff;
  --texto: #1d2330;
  --suave: #5b6475;
  --borde: #d9dde4;
  --primario: #1f4e8c;
  --primario-oscuro: #163a69;
  --exito-fondo: #e7f5ec; --exito-texto: #1d6b3a;
  --error-fondo: #fdecec; --error-texto: #8a1c1c;
  --aviso-fondo: #fff6e0; --aviso-texto: #7a5300;
  --radio: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--primario); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }

/* Barra superior */
.barra {
  background: var(--primario); color: #fff; display: flex; flex-wrap: wrap;
  align-items: center; gap: .5rem; padding: .5rem 1rem;
}
.marca { color: #fff; font-weight: 700; text-decoration: none; margin-right: auto; }
.conexion { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.15); white-space: nowrap; }
.conexion-punto { width: .65rem; height: .65rem; border-radius: 50%; background: #3ccf6e; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.conexion-amarillo .conexion-punto { background: #ffc531; }
.conexion-rojo { background: #c62828; font-weight: 700; }
.conexion-rojo .conexion-punto { background: #fff; animation: latir 1s infinite; }
@keyframes latir { 50% { opacity: .3; } }
.campana { position: relative; color: #fff; text-decoration: none; font-size: 1.1rem; padding: 0 .25rem; }
.campana .contador { position: absolute; top: -.35rem; right: -.45rem; background: #d32f2f; color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 0 .35rem; line-height: 1.2rem; min-width: 1.2rem; text-align: center; }
.aviso-conexion { position: sticky; top: 0; z-index: 5; }
.menu { display: flex; align-items: center; gap: .25rem 1rem; flex-wrap: wrap; }
.menu a { color: #fff; text-decoration: none; padding: .35rem .25rem; border-bottom: 2px solid transparent; }
.menu a.activo, .menu a:hover { border-bottom-color: #fff; }
.quien { font-size: .85rem; opacity: .85; }
.form-salir { margin: 0; }
.boton-enlace { background: none; border: 1px solid rgba(255,255,255,.6); color: #fff; border-radius: 6px; padding: .3rem .7rem; cursor: pointer; font: inherit; }
.menu-toggle, .menu-boton { display: none; }
@media (max-width: 760px) {
  .menu-boton { display: block; font-size: 1.5rem; cursor: pointer; padding: 0 .25rem; }
  .menu { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding: .5rem 0; }
  .menu-toggle:checked ~ .menu { display: flex; }
}

/* Contenido */
.contenido { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; margin-bottom: 1rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.modulo { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; text-decoration: none; color: var(--texto); }
.modulo:hover { border-color: var(--primario); }
.modulo strong { display: block; color: var(--primario); }
.modulo span { font-size: .9rem; color: var(--suave); }
.modulo.pendiente { opacity: .55; pointer-events: none; }

/* Mensajes */
.mensaje { padding: .75rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; }
.mensaje-exito { background: var(--exito-fondo); color: var(--exito-texto); }
.mensaje-error, .alerta-error { background: var(--error-fondo); color: var(--error-texto); }
.mensaje-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }

/* Formularios */
label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; max-width: 480px; padding: .6rem .7rem; border: 1px solid var(--borde); border-radius: 6px; font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.casillas label { font-weight: 400; display: flex; gap: .5rem; align-items: center; margin: .3rem 0; }
.ayuda { font-size: .85rem; color: var(--suave); margin: .25rem 0 0; }
.boton, button.boton {
  display: inline-block; background: var(--primario); color: #fff; border: 0; border-radius: 6px;
  padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; margin-top: 1rem;
}
.boton:hover { background: var(--primario-oscuro); }
.boton.secundario { background: #fff; color: var(--primario); border: 1px solid var(--primario); }
.boton.peligro { background: #a12b2b; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: #eef1f5; font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-block; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; background: #e8ecf3; color: var(--suave); }
.etiqueta.ok { background: var(--exito-fondo); color: var(--exito-texto); }
.etiqueta.no { background: var(--error-fondo); color: var(--error-texto); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros label { margin: 0 0 .2rem; font-size: .85rem; }
.filtros input, .filtros select { width: auto; min-width: 150px; }
.filtros .boton { margin-top: 0; }

/* Login */
.login { max-width: 380px; margin: 8vh auto 0; }
.login h1 { text-align: center; }
.login input { max-width: none; }
.login .boton { width: 100%; }
.sin-margen { margin-top: 0; }
.boton-enlace-claro { background: none; border: 0; color: var(--primario); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
td.acciones form { margin: 0; }
.paginacion { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1rem 0; }
.resumen { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 1rem 0; }
.dato { background: #eef1f5; border-radius: var(--radio); padding: .75rem 1rem; }
.dato span { display: block; font-size: .85rem; color: var(--suave); }
.dato strong { font-size: 1.5rem; }
.dato.ok { background: var(--exito-fondo); } .dato.no { background: var(--error-fondo); }
tr.resaltado td { background: #fffbe6; }
tr.inactivo td { color: var(--suave); }
.campo-corto { max-width: 120px !important; text-align: right; }
.minimos { max-width: 560px; }
input[type=file] { max-width: 100%; }
.num, .sku { white-space: nowrap; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1.5rem; }
.dos-columnas input, .dos-columnas select { max-width: none; }
[hidden] { display: none !important; }
table.lineas input { max-width: none; min-width: 90px; }
table.lineas .campo-articulo { min-width: 260px; }
table.lineas .campo-codigos { min-width: 220px; }
.campo-ancho { min-width: 320px !important; }
th.centro { text-align: center; }
tr.anulado td { color: var(--suave); text-decoration: line-through; }
tr.anulado td .etiqueta { text-decoration: none; }
.total-fila td { font-weight: 700; background: #eef1f5; }
.serie-numero { display: grid; grid-template-columns: 1fr 2fr; gap: .75rem; }
.serie-numero input { max-width: none; }
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); margin: 1rem 0; flex-wrap: wrap; }
.pestanas a { padding: .5rem .9rem; text-decoration: none; color: var(--suave); border-bottom: 3px solid transparent; }
.pestanas a.activo { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }
.boton-chico { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--primario); border-radius: 6px; text-decoration: none; font-size: .9rem; white-space: nowrap; }
tr.vencido td { background: #fff5f5; }
@media (min-width: 761px) and (max-width: 1150px) {
  .quien { display: none; }
  .menu { gap: .25rem .7rem; }
}
tr.fila-anulacion td { background: #fff8e6; }
@media (max-width: 760px) { .conexion-texto { display: none; } }
button:disabled { opacity: .55; cursor: not-allowed; }
.aviso-tipo { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.aviso-tipo.rojo { color: var(--error-texto); } .aviso-tipo.verde { color: var(--exito-texto); } .aviso-tipo.ambar { color: var(--aviso-texto); }
.aviso-item { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: start; }
.aviso-item form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.aviso-item form input[type=text] { width: 220px; }
.punto-estado { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.punto-estado.conectada { background: #2e9e57; } .punto-estado.caida { background: #c62828; } .punto-estado.sin_datos { background: #9aa3b2; }
.boton-chico.activo { background: var(--primario); color: #fff; }
button.boton-chico { background: #fff; color: var(--primario); cursor: pointer; font: inherit; font-size: .9rem; }
.aviso-item h2 { font-size: 1.05rem; margin: .25rem 0; }
@media (max-width: 760px) {
  .aviso-item { grid-template-columns: 1fr; }
  .aviso-item form input[type=text] { width: 100%; max-width: none; }
}
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.indicador { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; text-decoration: none; color: var(--texto); }
.indicador:hover { border-color: var(--primario); }
.indicador.alerta { border-left: 4px solid #c62828; }
.indicador-nombre { display: block; font-size: .85rem; color: var(--suave); }
.indicador-valor { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.indicador-nota { display: block; font-size: .8rem; color: var(--suave); }
.accesos { margin-bottom: 1rem; }
.accesos .modulo { flex: 1 1 200px; }
.dos-paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.dos-paneles > .tarjeta { margin-bottom: 0; }
.dos-paneles + .dos-paneles { margin-top: 1rem; }
table.barras, table.compacta { width: 100%; margin-top: .75rem; }
table.barras th, table.barras td, table.compacta td { border-bottom: 1px solid #eef0f4; padding: .4rem .5rem; background: none; font-weight: 400; }
table.barras th { white-space: nowrap; width: 1%; }
.barra-celda { width: 60%; }
svg.grafico-barra rect { fill: var(--primario); }
table.barras tr:hover svg.grafico-barra rect { fill: var(--primario-oscuro); }
table.barras tr:hover td, table.barras tr:hover th { background: #f5f7fb; }
svg.grafico-barra { display: block; }
.indicadores { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.instalador { max-width: 560px; margin-top: 3vh; }
.requisitos { list-style: none; padding: 0; }
.requisitos li { padding: .2rem 0; }
.requisitos li.ok { color: var(--exito-texto); } .requisitos li.no { color: var(--error-texto); font-weight: 600; }
textarea.codigo { width: 100%; max-width: none; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
details { margin-top: .75rem; }