:root{
  --azul:#00629B;          /* Pantone 308C, corporativo AloOnline */
  --azul-osc:#004063;
  --verde:#1b8a4b;
  --verde-suave:#e7f5ec;
  --rojo:#b4232a;
  --rojo-suave:#fbeaea;
  --gris:#5c6672;
  --naranja:#c2650b;
  --naranja-suave:#fdf0e2;
  --linea:#dfe4ea;
  --fondo:#f4f6f8;
  --papel:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--fondo);color:#1c2430;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
header{
  background:var(--azul);color:#fff;padding:14px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
header h1{font-size:17px;margin:0;font-weight:600;letter-spacing:.2px}
header nav{margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
header a{color:#cfe6f5;text-decoration:none;font-size:14px}
header a:hover{color:#fff;text-decoration:underline}
main{max-width:1180px;margin:0 auto;padding:18px}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:16px;margin-bottom:18px}
.tarjeta h2{margin:0 0 12px;font-size:15px;color:var(--azul-osc);text-transform:uppercase;letter-spacing:.6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);padding:8px;border-bottom:2px solid var(--linea)}
td{padding:10px 8px;border-bottom:1px solid var(--linea);vertical-align:top}
tr.disponible td:first-child{border-left:4px solid var(--verde)}
tr.agotado td:first-child{border-left:4px solid var(--rojo)}
tr.desconocido td:first-child{border-left:4px solid #c9ac3a}
tr.error td:first-child{border-left:4px solid #c9ac3a}
tr.error{background:#fffdf6}
.chip{display:inline-block;padding:2px 9px;border-radius:11px;font-size:12px;font-weight:600}
.chip.disponible{background:var(--verde-suave);color:var(--verde)}
.chip.agotado{background:var(--rojo-suave);color:var(--rojo)}
.chip.desconocido{background:#fdf5dd;color:#8a6d10}
.chip.error{background:#fdf5dd;color:#8a6d10}
.nombre{font-weight:600}
.url{display:block;color:var(--gris);font-size:12px;overflow-wrap:anywhere;word-break:break-word;text-decoration:none;max-width:100%}
.url:hover{color:var(--azul)}
.fecha{color:var(--gris);font-size:13px;overflow-wrap:anywhere}
td.fecha{white-space:nowrap}
.error{color:var(--rojo);font-size:12px}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px;color:#33404f}
label small{display:block;font-weight:400;color:var(--gris)}
input[type=text],input[type=url],input[type=password],textarea,select{
  width:100%;padding:9px 10px;border:1px solid #c3ccd6;border-radius:6px;font:inherit;background:#fff
}
textarea{min-height:70px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.botones{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
button,.boton{
  background:var(--azul);color:#fff;border:0;border-radius:6px;padding:9px 16px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block
}
button:hover,.boton:hover{background:var(--azul-osc)}
button.gris{background:#fff;color:var(--azul);border:1px solid var(--azul)}
button.gris:hover{background:#eef5fa}
button.pequeno{padding:4px 9px;font-size:12px;font-weight:500}
button.peligro{background:#fff;color:var(--rojo);border:1px solid var(--rojo)}
button.peligro:hover{background:var(--rojo);color:#fff}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.aviso{background:#eef5fa;border-left:4px solid var(--azul);padding:11px 14px;border-radius:0 6px 6px 0;margin-bottom:16px;font-size:14px}
.vacio{padding:26px;text-align:center;color:var(--gris)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:13px}
.filtros a{padding:5px 11px;border:1px solid var(--linea);border-radius:14px;color:var(--gris);text-decoration:none;background:#fff}
.filtros a.activa{background:var(--azul);color:#fff;border-color:var(--azul)}
.login{max-width:340px;margin:14vh auto;background:#fff;padding:26px;border-radius:8px;border:1px solid var(--linea)}
.login h1{font-size:18px;color:var(--azul);margin:0 0 4px}
.login p.sub{margin:0 0 18px;color:var(--gris);font-size:13px}
details summary{cursor:pointer;font-size:13px;color:var(--azul);font-weight:600;padding:6px 0}
@media(max-width:720px){
  .rejilla{grid-template-columns:1fr}
  th.opcional,td.opcional{display:none}
  main{padding:12px}
}

.vigilado{margin-top:5px;font-size:12px;color:var(--gris);background:#f1f5f8;border-radius:5px;padding:3px 8px;display:inline-block}
.vigilado strong{color:var(--azul-osc)}
.fila-editar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fila-editar select{width:auto;min-width:130px;padding:5px 7px;font-size:13px}
.fila-editar input[type=text]{flex:1;min-width:150px;padding:5px 8px;font-size:13px}

/* Latido del cron */
.latido{padding:14px 16px}
.latido-cab{display:flex;gap:12px;align-items:flex-start}
.latido .punto{width:11px;height:11px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.latido.bien  .punto{background:var(--verde);box-shadow:0 0 0 4px var(--verde-suave)}
.latido.medio .punto{background:var(--naranja);box-shadow:0 0 0 4px var(--naranja-suave)}
.latido.mal   .punto{background:var(--rojo);box-shadow:0 0 0 4px var(--rojo-suave)}
.latido.bien {border-left:4px solid var(--verde)}
.latido.medio{border-left:4px solid var(--naranja)}
.latido.mal  {border-left:4px solid var(--rojo)}
.latido strong{font-size:15px}
.latido details{margin-top:10px}
.latido table{margin-top:8px}
@media (prefers-reduced-motion: no-preference){
  .latido.bien .punto{animation:latir 2.4s ease-in-out infinite}
}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* Fichas de responsable */
.ficha-persona{border:1px solid var(--linea);border-radius:7px;padding:12px 14px;margin-bottom:12px;background:#fbfcfd}
.ficha-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
.ficha-pie{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.check{display:flex;gap:7px;align-items:center;font-weight:400;font-size:13px;margin:10px 0 0}
.check input{width:auto}
@media(max-width:720px){.ficha-fila{grid-template-columns:1fr}}

.pie{text-align:center;color:var(--gris);font-size:12px;margin:22px 0 8px}
.pasos{margin:0;padding-left:20px;font-size:14px}
.pasos li{margin-bottom:7px}

.ejemplos{background:#f1f5f8;border-radius:6px;padding:10px 12px;font-size:13px;color:var(--gris);margin:10px 0}
.ejemplos code{background:#fff;border:1px solid var(--linea);border-radius:4px;padding:1px 6px;font-size:12px;color:var(--azul-osc)}
.volcado{background:#f7f9fb;border:1px solid var(--linea);border-radius:6px;padding:12px;font-size:12px;color:var(--gris);max-height:220px;overflow:auto;white-space:pre-wrap}

.registro{margin:0;padding-left:20px;font-size:14px}
.registro li{margin-bottom:5px}
input[type=file]{width:100%;padding:9px;border:1px dashed #c3ccd6;border-radius:6px;background:#fff;font:inherit}

/* Nada se sale del ancho de la pantalla */
html,body{max-width:100%;overflow-x:hidden}
header,main{width:100%}
.tarjeta,.aviso,.latido{max-width:100%;overflow-wrap:anywhere}
table{word-break:break-word}
.chip{white-space:nowrap}

@media(max-width:720px){
  td.fecha{white-space:normal}
  .tarjeta{overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding:8px 6px;font-size:13px}
  header{padding:12px 14px}
  header nav{gap:10px 14px}
  .filtros{gap:6px}
  .filtros a{padding:5px 10px}
  .latido-cab{gap:10px}
  .pasos,.registro{padding-left:18px}
}

/* En móvil, las tablas grandes se convierten en fichas apiladas */
@media(max-width:720px){
  table.fichas,
  table.fichas thead,
  table.fichas tbody,
  table.fichas tr,
  table.fichas td{display:block;width:100%}
  table.fichas thead{display:none}
  table.fichas tr{
    border:1px solid var(--linea);border-left-width:4px;border-radius:8px;
    padding:12px 14px;margin-bottom:14px;background:#fff
  }
  table.fichas tr.disponible{border-left-color:var(--verde)}
  table.fichas tr.agotado{border-left-color:var(--rojo)}
  table.fichas tr.error{border-left-color:#c9ac3a}
  table.fichas tr.desconocido{border-left-color:#c9ac3a}
  table.fichas td{border:0;padding:7px 0;word-break:normal;overflow-wrap:anywhere}
  table.fichas td:first-child{border-left:0}
  table.fichas td + td{border-top:1px solid #f0f3f6}
  table.fichas td::before{
    content:attr(data-etiqueta);display:block;
    font-size:11px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--gris);margin-bottom:4px
  }
  table.fichas td:not([data-etiqueta])::before{content:none}
  /* con las etiquetas puestas, ya caben las columnas antes ocultas */
  table.fichas td.opcional{display:block}
  table.fichas td.fecha{white-space:normal}
  .fila-editar select,.fila-editar input[type=text]{width:100%;min-width:0;flex:none}
  .tarjeta{overflow-x:visible}
}

.diagnostico{margin-top:6px;font-size:12px;color:#8a6d10;background:#fdf5dd;border-radius:5px;padding:6px 9px}

a.nombre{color:var(--azul-osc);text-decoration:none;border-bottom:1px solid transparent}
a.nombre:hover{border-bottom-color:var(--azul)}
.boton.pequeno{padding:4px 9px;font-size:12px;font-weight:500;line-height:1.5}

/* Barra de filtros compacta */
.barra-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.barra-filtros select{
  width:auto;min-width:0;flex:1 1 165px;padding:7px 9px;font-size:13px;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235c6672' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") right 9px center no-repeat;
  -webkit-appearance:none;appearance:none;padding-right:26px
}
.quitar-filtros{font-size:13px;color:var(--rojo);text-decoration:none;white-space:nowrap;padding:6px 4px}
.quitar-filtros:hover{text-decoration:underline}
@media(max-width:720px){.barra-filtros select{flex:1 1 47%}}

/* Cabecera fija con menú siempre completo */
.cabecera-alta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.marca{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:#bcdcf0}
.salir{margin-left:auto;font-size:13px}
header h1{margin:10px 0 0;font-size:20px}
header nav{margin-left:0;gap:4px 6px}
header nav a{
  padding:5px 11px;border-radius:14px;font-size:14px;color:#cfe6f5;
  border:1px solid rgba(255,255,255,.25);text-decoration:none;white-space:nowrap
}
header nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
header nav a.activo{background:#fff;color:var(--azul);border-color:#fff;font-weight:600}

/* Botón + junto al título */
h2.con-boton{display:flex;align-items:center;gap:10px}
.mas{
  margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  text-decoration:none;font-weight:400
}
.mas:hover{background:var(--azul-osc)}

/* Lista de productos en una línea, desplegable */
.lista{border-top:1px solid var(--linea)}
.linea{border-bottom:1px solid var(--linea)}
.linea>summary{
  display:flex;align-items:center;gap:9px;padding:11px 4px;cursor:pointer;
  list-style:none;font-size:14px
}
.linea>summary::-webkit-details-marker{display:none}
.linea>summary:hover{background:#f7f9fb}
.linea[open]>summary{background:#f2f6f9;font-weight:600}
.punto-estado{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--gris)}
.linea.disponible .punto-estado{background:var(--verde)}
.linea.agotado .punto-estado{background:var(--rojo)}
.linea.error .punto-estado,.linea.desconocido .punto-estado{background:#c9ac3a}
.l-nombre{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-extra{color:var(--gris);font-size:12px;white-space:nowrap;flex:0 0 auto}
.l-estado{flex:0 0 auto}
.chip.mini{font-size:11px;padding:1px 7px;flex:0 0 auto}
.detalle{padding:4px 4px 16px;border-top:1px dashed var(--linea)}
.detalle .url{margin:8px 0}
.comentario{margin:6px 0;font-size:14px}
.datos-linea{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--gris);margin:10px 0}
.datos-linea b{font-weight:600;color:#33404f}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media(max-width:720px){
  .oculta-movil{display:none}
  .l-estado{display:none}
  .linea>summary{font-size:14px;gap:7px}
}

/* Selección múltiple y buscador */
.barra-masiva{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 4px;border-bottom:1px solid var(--linea)}
.buscador{flex:1 1 240px;min-width:0;padding:7px 10px;font-size:13px}
.linea>summary .marca{width:auto;margin:0;flex:0 0 auto}

.l-fecha{color:var(--gris);font-size:12px;white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
@media(max-width:720px){.l-fecha{font-size:11px}}

.fila-estado{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.posicion{color:var(--gris);font-size:12px;width:24px;text-align:right;flex:0 0 auto}
.flechas{display:flex;gap:3px;flex:0 0 auto}
.flechas button{padding:3px 8px;line-height:1.2}
.flechas button[disabled]{opacity:.3;cursor:default}

/* Buscador fijo arriba y filtros plegables */
.barra-busqueda{
  position:sticky;top:0;z-index:20;background:var(--papel);
  display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linea)
}
.abre-filtros{flex:0 0 auto;cursor:pointer}
.interruptor{display:none}
.barra-filtros.plegable{display:none;padding-top:12px}
.interruptor:checked ~ .barra-filtros.plegable{display:flex}

/* Contadores del título */
.contadores{display:flex;gap:6px;margin-left:12px}
.contadores a{
  min-width:26px;padding:1px 8px;border-radius:11px;font-size:12px;font-weight:700;
  text-align:center;text-decoration:none
}
.c-verde{background:var(--verde-suave);color:var(--verde)}
.c-rojo{background:var(--rojo-suave);color:var(--rojo)}
.c-amarillo{background:#fdf5dd;color:#8a6d10}

/* Barra de selección múltiple: solo cuando hay algo marcado */
.barra-masiva.flotante{
  position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);
  width:min(94%,700px);background:var(--azul);color:#fff;border:0;border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);padding:10px 14px;z-index:60;
  transition:transform .18s ease
}
.barra-masiva.flotante.visible{transform:translate(-50%,0)}
.barra-masiva.flotante .fecha,.barra-masiva.flotante .check{color:#fff}
.barra-masiva.flotante button.gris{background:#fff;color:var(--azul);border:0}
.barra-masiva.flotante button.peligro{background:transparent;color:#ffd7d7;border-color:#ffd7d7}
.barra-masiva.flotante button.peligro:hover{background:#fff;color:var(--rojo)}

/* Bloque de agotados */
.bloque-agotados{margin-top:16px;border-top:1px solid var(--linea);padding-top:8px}
.bloque-agotados>summary{cursor:pointer;font-size:13px;color:var(--gris);padding:8px 4px;font-weight:600}
.bloque-agotados>summary:hover{color:var(--azul)}

/* Copias agrupadas en acordeón */
.grupo-copias{border:1px solid var(--linea);border-radius:7px;margin-bottom:9px;background:#fbfcfd}
.grupo-copias>summary{
  cursor:pointer;padding:11px 13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;
  list-style:none
}
.grupo-copias>summary::-webkit-details-marker{display:none}
.grupo-copias>summary::before{
  content:'▸';color:var(--azul);font-size:13px;flex:0 0 auto;transition:transform .15s ease;display:inline-block
}
.grupo-copias[open]>summary::before{transform:rotate(90deg)}
.grupo-copias>summary:hover{background:#f2f6f9}
.grupo-copias[open]>summary{border-bottom:1px solid var(--linea)}
.grupo-copias>summary .fecha{margin-left:auto}
.grupo-copias>p,.grupo-copias>table{padding:0 13px}
.grupo-copias table{margin-bottom:10px}

/* Suscripción a avisos */
.sobre{color:var(--azul);font-size:13px;flex:0 0 auto}
.avisos-linea{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0;
  background:#f1f5f8;border-radius:6px;padding:8px 10px}

/* Flecha visible en todos los desplegables */
details>summary{cursor:pointer}
.bloque-agotados>summary::before{content:'▸ ';color:var(--azul);display:inline-block}
.bloque-agotados[open]>summary::before{content:'▾ '}

/* Confirmación flotante junto a la ficha, en vez de perder el sitio */
.toast-guardado{
  display:inline-block;margin-top:10px;padding:6px 12px;border-radius:16px;
  background:var(--verde);color:#fff;font-size:13px;font-weight:600;
  opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease
}
.toast-guardado.visible{opacity:1;transform:translateY(0)}
.linea[open]{scroll-margin-top:70px}

/* Visor de páginas */
.visor{
  width:100%;height:70vh;border:1px solid var(--linea);border-radius:8px;background:#fff;
  margin-top:10px
}
@media(max-width:720px){.visor{height:60vh}}