/* Panel Del Pedregal — diseño C aprobado por Martín el 2026-11-08 (la marca al frente de la alternativa B con
   "El día del arnés" de la A). Identidad: artículo marca/identidad-corporativa (banda roja #BD1522 con el logo, franja
   tricolor bajo la banda y en espejo al pie, Montserrat; Sistema A: titular blanco con la frase clave en amarillo e
   íconos de línea dorados). Montserrat la sirve el propio panel (subconjunto latino, licencia OFL en fuentes/OFL.txt):
   nada se pide afuera. Ningún texto mide menos de 14 px (CA-22): el test lo revisa en esta hoja. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url("fuentes/montserrat-400.173d398f811b.woff") format('woff');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url("fuentes/montserrat-600.9281fe3e844e.woff") format('woff');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url("fuentes/montserrat-700.62dc5cc7c2ff.woff") format('woff');}

:root{
  --dp-rojo:#BD1522;
  --dp-rojo-osc:#8E2B17;
  --dp-dorado:#E7AD29;
  --dp-amarillo:#FFEE00;
  --dp-tinta:#1C1C1C;
  --dp-tinta-2:#5A524E;
  --dp-papel:#FFFFFF;
  --dp-papel-2:#F6F3F0;
  --dp-borde:#E7E1DB;
  --dp-oscuro:#2B2522;
  --dp-ok:#1E6B3A;
  --dp-alerta:#B57500;
  --dp-alerta-texto:#8A5A00;   /* el ámbar para letra: #B57500 no llega a 4,5:1 sobre blanco */
  --ancho:1240px;
}

*{box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--dp-papel-2);color:var(--dp-tinta);
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:1rem;line-height:1.55;}
a{color:var(--dp-rojo);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--dp-rojo-osc);outline-offset:2px;}
.banda a:focus-visible,.banda button:focus-visible,.banda input:focus-visible,.heroe a:focus-visible,.cabecera a:focus-visible{outline-color:var(--dp-dorado);}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.in{width:min(var(--ancho),100% - 48px);margin:0 auto;}

/* ---- la banda ---- */
.banda{background:var(--dp-rojo);color:#fff;}
.banda .in{display:flex;align-items:center;gap:20px;min-height:76px;flex-wrap:wrap;padding:6px 0;}
.banda .marca img{display:block;width:118px;height:auto;}
.banda .nombre{font-weight:700;font-size:1.125rem;}
.banda .menu{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.banda .menu a{color:#fff;font-weight:600;text-decoration:none;font-size:.95rem;padding-bottom:3px;border-bottom:2px solid transparent;}
.banda .menu a:hover{border-bottom-color:rgba(255,255,255,.6);}
.banda .menu a.on{border-bottom-color:var(--dp-dorado);}
.banda form{margin:0;}
.banda .buscar input{font:inherit;font-size:.95rem;height:38px;width:260px;padding:0 12px;border:0;border-radius:6px;}
.banda .salir button{font:inherit;font-size:.95rem;font-weight:600;color:var(--dp-rojo);background:#fff;border:0;border-radius:6px;padding:7px 14px;cursor:pointer;}

/* ---- la franja: la firma de la marca ---- */
.franja{height:6px;display:flex;flex-shrink:0;}
.franja i{display:block;}
.franja .f1{background:#BF1522;flex:2.6;}
.franja .f2{background:#E7302A;flex:1.3;}
.franja .f3{background:#F29200;flex:1.1;}
.franja .f4{background:#F9EA1B;flex:.8;}

/* ---- el héroe del inicio (Sistema A: rojo pleno, titular blanco, la frase clave en amarillo) ---- */
.heroe{background:var(--dp-rojo);color:#fff;position:relative;overflow:hidden;}
.heroe .in{position:relative;z-index:1;padding:24px 0 30px;}
.heroe h1{font-size:2rem;line-height:1.12;font-weight:700;margin:0;max-width:20ch;letter-spacing:-.01em;}
.heroe h1 em{display:block;font-style:normal;color:var(--dp-amarillo);}
.heroe p{margin:12px 0 0;font-size:1.05rem;max-width:62ch;}
.heroe .cifras{display:flex;gap:44px;margin-top:18px;flex-wrap:wrap;}
.heroe .cifras div{font-size:.95rem;color:#f6dde0;}
.heroe .cifras b{display:block;font-size:2.1rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;line-height:1.25;}
.patron{position:absolute;right:-20px;top:14px;width:520px;height:100%;color:var(--dp-dorado);opacity:.55;z-index:0;}
.patron span{position:absolute;}
.patron .pat{width:46px;height:46px;}

/* ---- la cabecera de un área o una ficha ---- */
.cabecera{background:var(--dp-rojo);color:#fff;}
.cabecera .in{padding:18px 0 26px;}
.cabecera .volver{color:#f6dde0;font-size:.95rem;}
.cabecera h1{font-size:2rem;font-weight:700;margin:6px 0 8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.cabecera .ico-h{width:34px;height:34px;color:var(--dp-dorado);}
.cabecera .cuenta{background:rgba(255,255,255,.16);color:#fff;}
.etiquetas{display:flex;gap:10px;flex-wrap:wrap;}
.etiquetas span{background:rgba(255,255,255,.14);border-radius:999px;padding:4px 12px;font-size:.875rem;}
.etiquetas .estado-pill{background:#fff;font-weight:600;}
.etiquetas .marca{background:var(--dp-amarillo);color:var(--dp-tinta);font-weight:700;}

/* ---- contenido ---- */
main{flex:1 0 auto;}
main > .in{padding:30px 0 48px;}
main{overflow-wrap:break-word;}
h2{font-size:1.35rem;font-weight:700;color:var(--dp-rojo);margin:1.1em 0 .5em;}
h3{font-size:1.05rem;font-weight:700;margin:1.3em 0 .35em;color:var(--dp-rojo-osc);}
p,li,td,th,label{font-size:1rem;}
input,select,button,textarea{font:inherit;font-size:1rem;}
input[type=text],input[type=email],input[type=password],input[type=search],select{padding:8px 10px;border:1px solid var(--dp-borde);border-radius:6px;max-width:100%;background:#fff;}
button{background:var(--dp-rojo);color:#fff;border:0;border-radius:6px;padding:8px 16px;font-weight:600;cursor:pointer;}
.avisos{list-style:none;padding:0;}
.avisos li{background:#fff;border-left:4px solid var(--dp-dorado);padding:10px 14px;margin-bottom:8px;}
[role=alert]{color:var(--dp-tinta);}
code{overflow-wrap:anywhere;word-break:break-word;}
pre{white-space:pre-wrap;word-wrap:break-word;background:#fff;border:1px solid var(--dp-borde);padding:14px;font-size:.875rem;}

.secc-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px;}
.secc-t + .areas{margin-bottom:34px;}
.secc-t h2{font-size:1.4rem;margin:0;}
.secc-t span{color:var(--dp-tinta-2);font-size:.95rem;}
.cuenta{font-size:.875rem;font-weight:700;color:var(--dp-rojo-osc);background:var(--dp-papel-2);border-radius:10px;padding:1px 9px;font-variant-numeric:tabular-nums;}

/* inicio: las áreas como tarjetas con su ícono dorado y su número */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.area{background:#fff;border:1px solid var(--dp-borde);border-top:4px solid var(--dp-rojo);border-radius:6px;padding:16px 18px;
  text-decoration:none;color:var(--dp-tinta);display:flex;flex-direction:column;gap:6px;min-height:150px;}
.area:hover{border-color:#d9cfc6;border-top-color:var(--dp-rojo);}
.area .cab{display:flex;align-items:center;justify-content:space-between;}
.area .ico{width:34px;height:34px;color:var(--dp-dorado);}
.area .cuenta{font-size:1.9rem;font-weight:600;color:var(--dp-rojo-osc);background:none;padding:0;line-height:1;}
.area b{font-size:1.125rem;margin-top:4px;}
.area p{margin:0;font-size:.875rem;color:var(--dp-tinta-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.area.viene{background:var(--dp-oscuro);color:#fff;border-color:var(--dp-oscuro);border-top-color:var(--dp-dorado);}
.area.viene p{color:#ddd5cf;}
.area.viene .cuenta{color:var(--dp-dorado);}

/* "El día del arnés": cada tarea en una línea de 24 horas; cada marca es una corrida */
.dia-caja{background:#fff;border:1px solid var(--dp-borde);border-top:4px solid var(--dp-rojo);border-radius:6px;padding:12px 20px 16px;}
.eje{display:grid;grid-template-columns:minmax(260px,38%) 1fr;gap:18px;font-size:.875rem;color:var(--dp-tinta-2);padding:4px 0 8px;border-bottom:1px solid #efe9e2;}
.eje .h{display:flex;justify-content:space-between;}
.fila{display:grid;grid-template-columns:minmax(260px,38%) 1fr;gap:18px;align-items:center;padding:8px 0;}
.fila + .fila{border-top:1px solid #f4efe9;}
.fila .t{font-size:.95rem;line-height:1.35;}
.fila .t a{font-weight:600;color:var(--dp-tinta);text-decoration:none;}
.fila .t a:hover{color:var(--dp-rojo);text-decoration:underline;}
.fila .t .estado{display:block;font-size:.875rem;}
.maquina{color:var(--dp-tinta-2);font-size:.875rem;}
.dia{width:100%;height:20px;display:block;}
.dia .base{stroke:#e6dfd8;stroke-width:1;vector-effect:non-scaling-stroke;}
.dia .m-ok{stroke:var(--dp-ok);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.7;}
.dia .m-fallo{stroke:var(--dp-rojo);stroke-width:2.8;vector-effect:non-scaling-stroke;}
.leyenda{display:flex;gap:20px;flex-wrap:wrap;font-size:.875rem;color:var(--dp-tinta-2);margin-top:12px;}
.leyenda i{display:inline-block;width:2px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--dp-ok);}
.leyenda i.mal{width:3px;background:var(--dp-rojo);}

.estado{font-weight:600;}
.estado-ok{color:var(--dp-ok);}
.estado-fallo{color:var(--dp-rojo);}
.estado-corriendo{color:var(--dp-tinta-2);}
.estado-sin_noticias,.estado-nunca{color:var(--dp-alerta-texto);}

/* área: el directorio (alternativa 1, elegida por Martín el 08-11): una fila por herramienta con cómo se usa */
.cabecera .resumen{margin:0;color:#f6dde0;font-size:1rem;}
.leyenda-dir{display:flex;gap:18px;flex-wrap:wrap;font-size:.875rem;color:var(--dp-tinta-2);margin:0 0 12px;}
.leyenda-dir i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--dp-rojo-osc);}
.leyenda-dir i.sola{background:var(--dp-ok);}
.dir{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--dp-borde);border-radius:10px;overflow:hidden;}
.dir-fila{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(300px,380px) 24px;gap:16px;align-items:center;padding:14px 20px;
  text-decoration:none;color:var(--dp-tinta);border-top:1px solid #f1ece6;}
.dir li:first-child .dir-fila{border-top:0;}
.dir-fila:hover{background:#fbf8f5;}
.dir-fila:hover .dir-txt b{color:var(--dp-rojo);}
.dir-ini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1rem;color:#fff;background:var(--dp-rojo-osc);}
.dir-ini.sola{background:var(--dp-ok);}
.dir-txt{min-width:0;}
.dir-txt b{display:block;font-size:1.05rem;line-height:1.3;}
.dir-txt .desc{display:block;color:var(--dp-tinta-2);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dir-txt .marca{font-size:.875rem;font-weight:700;color:var(--dp-alerta-texto);}
.dir-como{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0;}
.dir-como .t{display:flex;flex-direction:column;gap:2px;}
.dir-como .cap{font-size:.875rem;color:var(--dp-tinta-2);line-height:1.35;}
.dir-como .estado{font-weight:600;}
.frase-p{align-self:flex-start;background:var(--dp-oscuro);color:#fff;border-radius:999px;padding:5px 14px;font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.frase-p small{color:var(--dp-dorado);font-weight:700;font-size:.875rem;margin-right:6px;}
.dir-flecha{color:var(--dp-rojo);font-size:1.2rem;}
main form[role=search]{margin:0 0 18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* el marco de acceso (ingresar, activar, códigos): la marca a la izquierda, el formulario en una tarjeta */
.acceso{flex:1 0 auto;display:grid;grid-template-columns:minmax(380px,46%) 1fr;}
.acceso .banda{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:48px 56px 54px;}
.acceso .patron{right:0;top:0;width:100%;height:100%;opacity:.4;}
.acceso .patron .pat{width:52px;height:52px;}
.acceso .presenta{position:relative;z-index:1;max-width:440px;margin-bottom:48px;}
.acceso .presenta img{display:block;width:230px;height:auto;margin-bottom:26px;}
.acceso .presenta .nombre{font-size:2rem;font-weight:700;margin:0;line-height:1.15;}
.acceso .lema{font-size:1.25rem;margin:10px 0 22px;line-height:1.35;}
.acceso .lema em{font-style:normal;color:var(--dp-amarillo);font-weight:600;}
.acceso .puntos{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.acceso .puntos li{font-size:1rem;color:#f6dde0;padding-left:26px;position:relative;}
.acceso .puntos li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--dp-dorado);
  border-bottom:2px solid var(--dp-dorado);transform:rotate(-45deg);}
.acceso .banda .franja{position:absolute;left:0;right:0;bottom:0;margin:0;}
.acceso main{display:flex;align-items:center;justify-content:center;padding:40px 24px;}
.acceso .tarjeta{width:min(440px,100%);background:#fff;border:1px solid var(--dp-borde);border-radius:12px;padding:34px 34px 28px;
  box-shadow:0 18px 40px rgba(28,28,28,.08);}
.acceso .tarjeta h1{font-size:1.6rem;color:var(--dp-rojo);margin:0 0 6px;}
.acceso .tarjeta h3{font-size:1.05rem;}
.acceso .tarjeta .ayuda{margin:0 0 18px;color:var(--dp-tinta-2);font-size:.95rem;}
.acceso form{display:flex;flex-direction:column;}
.acceso label{font-size:.95rem;font-weight:600;margin:12px 0 6px;}
.acceso input[type=email],.acceso input[type=password],.acceso input[type=text]{width:100%;height:46px;font-size:1rem;padding:0 14px;
  border:1px solid #d9cfc6;border-radius:8px;}
.acceso input:focus{border-color:var(--dp-rojo);}
.acceso form button{margin-top:22px;height:48px;font-size:1.05rem;border-radius:8px;}
.acceso .error{background:#fbeceb;border-left:4px solid var(--dp-rojo);padding:10px 14px;border-radius:6px;margin:0 0 6px;}
.acceso .nota{margin:18px 0 0;font-size:.875rem;color:var(--dp-tinta-2);text-align:center;}

/* ficha: el cuerpo en dos columnas; la frase para Pedri destacada */
.dos{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
.bloque{background:#fff;border:1px solid var(--dp-borde);border-left:4px solid var(--dp-dorado);border-radius:6px;padding:14px 20px;margin-bottom:14px;}
.bloque h2{font-size:1.05rem;margin:0 0 6px;}
.bloque p{margin:0;}
.bloque .fila{grid-template-columns:minmax(200px,44%) 1fr;}
.frase{background:var(--dp-oscuro);color:#fff;border-radius:6px;padding:14px 18px;font-size:1.05rem;margin-bottom:10px;}
.frase small{display:block;color:var(--dp-dorado);font-size:.875rem;font-weight:600;margin-bottom:4px;}
.accesos{list-style:none;margin:0;padding:0;}
.accesos li{margin-bottom:10px;}
.accesos a,.accesos span{display:block;background:#fff;border:1px solid var(--dp-borde);border-radius:6px;padding:12px 16px;font-weight:600;text-decoration:none;}
.accesos span{color:var(--dp-tinta-2);}

/* tablas (usuarios, lo que viene) */
table{border-collapse:collapse;width:100%;background:#fff;}
th{background:var(--dp-rojo);color:#fff;text-align:left;font-weight:600;padding:8px 10px;}
td{padding:8px 10px;border-bottom:1px solid var(--dp-borde);vertical-align:top;}
.tabla{overflow-x:auto;}

/* ---- el pie ---- */
footer{background:#fff;border-top:1px solid var(--dp-borde);}
footer p{margin:0 auto;padding:12px 0;color:var(--dp-tinta-2);font-size:.875rem;}

/* ---- teléfono ---- */
@media (max-width:900px){
  .in{width:calc(100% - 32px);}
  .banda .in{gap:10px;padding:10px 0;}
  .banda .marca img{width:84px;}
  .banda .menu{margin-left:0;width:100%;gap:10px 18px;}
  .banda .menu a{white-space:nowrap;font-size:.875rem;}
  .banda .salir{margin-left:auto;}
  .banda .buscar{flex:1 1 100%;order:10;}
  .banda .buscar input{width:100%;}
  .heroe .in{padding:20px 0 24px;}
  .heroe h1{font-size:1.6rem;}
  .heroe p{font-size:.95rem;}
  .heroe .cifras{gap:22px;}
  .heroe .cifras b{font-size:1.6rem;}
  .patron{display:none;}
  .cabecera h1{font-size:1.6rem;}
  .areas{grid-template-columns:1fr 1fr;gap:12px;}
  .area{min-height:0;padding:14px;}
  .area b{font-size:1rem;}
  .area p{display:none;}
  .dia-caja{padding:10px 14px 14px;}
  .eje,.fila,.bloque .fila{grid-template-columns:1fr;gap:4px;}
  .eje > span:first-child,.eje .h span:nth-child(2){display:none;}
  .dos{grid-template-columns:1fr;}
  .dir-fila{grid-template-columns:36px minmax(0,1fr) 18px;gap:10px;padding:12px 14px;}
  .dir-ini{width:34px;height:34px;}
  .dir-como{grid-column:2 / 4;grid-row:2;}
  .dir-flecha{grid-row:1;grid-column:3;}
  .acceso{grid-template-columns:1fr;}
  .acceso .banda{padding:22px 20px 28px;}
  .acceso .presenta{margin-bottom:22px;}
  .acceso .presenta img{width:140px;margin-bottom:12px;}
  .acceso .presenta .nombre{font-size:1.5rem;}
  .acceso .lema{font-size:1.05rem;margin:6px 0 12px;}
  .acceso .puntos{display:none;}
  .acceso main{padding:22px 16px 30px;align-items:flex-start;}
  .acceso .tarjeta{padding:24px 20px 20px;}
}
@media (min-width:901px) and (max-width:1180px){.dir-fila{grid-template-columns:44px minmax(0,1fr) 280px 20px;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}