:root{
    --ink:#0A2E4D; --azul:#1169AE; --azul-claro:#E7F0F8;
    --verde:#70BD53; --verde-osc:#4E9139; --verde-claro:#EDF6EA;
    --papel:#F1F5FA; --sup:#FFFFFF; --linea:#DCE7F0;
    --texto:#4C6377; --tenue:#8199AF;
    --alerta:#B8413B; --alerta-claro:#FBEDEC;
    --ambar:#B8761C; --ambar-claro:#FBF3E6;
    --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--papel); color:var(--ink);
    font-family:var(--sans); font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:var(--serif); font-weight:700; margin:0; letter-spacing:-.01em}
  h1{font-size:26px}
  h2{font-size:21px}
  h3{font-size:16px}
  p{margin:0 0 10px}
  button{font-family:inherit; font-size:14px; cursor:pointer}
  select,input,textarea{font-family:inherit; font-size:14px; color:var(--ink)}
  a{color:var(--azul)}

  /* ---- Estructura ---- */
  header{
    background:var(--sup); border-bottom:1px solid var(--linea);
    padding:14px 26px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;
    position:sticky; top:0; z-index:10;
  }
  header img{height:26px; width:auto; display:block}
  .cliente{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap}
  .wrap{max-width:1240px; margin:0 auto; padding:22px 26px 70px}

  /* ---- Franja de estado: el elemento principal ---- */
  .estado{
    background:var(--sup); border:1px solid var(--linea);
    border-left:6px solid var(--verde); border-radius:3px;
    padding:20px 24px; margin-bottom:26px;
  }
  .estado.bloqueo{border-left-color:var(--alerta); background:var(--alerta-claro); border-color:#EFD5D3}
  .estado.aviso{border-left-color:var(--ambar); background:var(--ambar-claro); border-color:#EEE0C6}
  .estado h2{margin-bottom:6px}
  .estado .accion{color:var(--texto); max-width:74ch}
  .estado ul{margin:12px 0 0; padding-left:19px; color:var(--texto)}
  .estado li{margin-bottom:5px}
  .estado .avance{
    margin-top:16px; display:flex; align-items:center; gap:12px;
    font-size:13px; color:var(--texto);
  }
  .barra{height:6px; background:var(--linea); border-radius:3px; flex:1; max-width:300px; overflow:hidden}
  .barra span{display:block; height:100%; background:var(--verde)}

  /* ---- Navegación ---- */
  nav{display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--linea); flex-wrap:wrap}
  nav button{
    background:none; border:none; border-bottom:2px solid transparent;
    padding:9px 15px; color:var(--texto); margin-bottom:-1px;
  }
  nav button[aria-current="true"]{color:var(--ink); border-bottom-color:var(--azul); font-weight:600}
  nav button:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

  /* ---- Ruta: espina + detalle ---- */
  .ruta{display:grid; grid-template-columns:250px 1fr; gap:26px; align-items:start}
  .espina{list-style:none; margin:0; padding:0; position:relative}
  .espina::before{content:""; position:absolute; left:15px; top:14px; bottom:14px; width:2px; background:var(--linea)}
  .espina li{position:relative; margin:0}
  .espina button{
    background:none; border:none; text-align:left; width:100%;
    padding:9px 8px 9px 42px; color:var(--texto); border-radius:3px; line-height:1.3;
  }
  .espina button:hover{background:var(--sup)}
  .espina button[aria-current="true"]{background:var(--sup); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(10,46,77,.09)}
  .punto{
    position:absolute; left:8px; top:12px; width:16px; height:16px; border-radius:50%;
    background:var(--papel); border:2px solid var(--linea); z-index:1;
  }
  .punto.agendada{border-color:var(--azul)}
  .punto.hecha{border-color:var(--verde); background:var(--verde)}
  .espina .cod{font-size:11px; color:var(--tenue); display:block}

  .panel{background:var(--sup); border:1px solid var(--linea); border-radius:3px; padding:24px 26px}
  .panel .cab{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; margin-bottom:4px}
  .panel .cab h2{flex:1; min-width:220px}
  .sub{color:var(--texto); margin-bottom:20px}

  fieldset{border:none; margin:0 0 22px; padding:0}
  legend{font-weight:600; font-size:14px; padding:0 0 9px; color:var(--ink)}
  .campos{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px}
  label.campo{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--texto)}
  select,input[type=text],input[type=date],textarea{
    border:1px solid var(--linea); border-radius:3px; padding:7px 9px; background:var(--sup);
  }
  select:focus,input:focus,textarea:focus{outline:2px solid var(--azul); outline-offset:0; border-color:var(--azul)}
  textarea{width:100%; min-height:70px; resize:vertical}

  .chk{display:flex; gap:11px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--linea)}
  .chk:last-child{border-bottom:none}
  .chk input{margin-top:3px; width:16px; height:16px; accent-color:var(--verde)}
  .chk span{flex:1; line-height:1.45}
  .chk .quien{color:var(--tenue); font-size:12px; white-space:nowrap}
  .chk.listo span{color:var(--tenue)}

  table{width:100%; border-collapse:collapse; font-size:14px}
  th{text-align:left; font-weight:600; font-size:12px; color:var(--texto); padding:0 10px 8px 0; border-bottom:1px solid var(--linea)}
  td{padding:9px 10px 9px 0; border-bottom:1px solid var(--linea); vertical-align:middle}
  td.num{font-variant-numeric:tabular-nums}
  .cod-fmt{font-weight:700; color:var(--azul); font-size:13px}

  .pill{display:inline-block; padding:2px 9px; border-radius:11px; font-size:12px; border:1px solid}
  .pill.pendiente{color:var(--tenue); border-color:var(--linea)}
  .pill.curso{color:var(--ambar); border-color:#EEE0C6; background:var(--ambar-claro)}
  .pill.entregado{color:var(--azul); border-color:#C9DEF0; background:var(--azul-claro)}
  .pill.aprobado{color:var(--verde-osc); border-color:#C9E5BC; background:var(--verde-claro)}

  .btn{background:var(--azul); color:#fff; border:none; border-radius:3px; padding:8px 15px}
  .btn:hover{background:#0E5B96}
  .btn.sec{background:var(--sup); color:var(--ink); border:1px solid var(--linea)}
  .btn.sec:hover{background:var(--papel)}
  .btn.mini{padding:4px 9px; font-size:13px}
  .btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
  .acciones{display:flex; gap:9px; flex-wrap:wrap; margin-top:18px}

  .vacio{color:var(--tenue); padding:22px 0; border-top:1px solid var(--linea)}
  .fila-nueva{display:flex; gap:9px; flex-wrap:wrap; align-items:flex-end; margin-top:14px}
  .nota{color:var(--texto); font-size:13px; margin-top:10px}
  .pie{margin-top:34px; padding-top:14px; border-top:1px solid var(--linea);
       color:var(--tenue); font-size:12.5px}
  .pie.alerta{color:var(--alerta)}
  dialog{border:none; border-radius:4px; padding:0; max-width:760px; width:92%; box-shadow:0 20px 60px rgba(10,46,77,.28)}
  dialog::backdrop{background:rgba(10,46,77,.45)}
  .dlg{padding:24px 26px}
  .dlg textarea{min-height:340px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.5}

  @media (max-width:820px){
    table{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
    .fila-nueva{flex-direction:column; align-items:stretch}
    .ruta{grid-template-columns:1fr}
    .espina{display:flex; overflow-x:auto; gap:4px; padding-bottom:8px}
    .espina::before{display:none}
    .espina li{flex:0 0 auto}
    .espina button{padding:8px 12px; white-space:nowrap; border:1px solid var(--linea)}
    .punto{display:none}
    .wrap{padding:18px 16px 60px}
    header{padding:12px 16px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ===================================================================
   Añadidos de la versión con servidor: entrada, avisos y usuarios
   =================================================================== */

.marca{font-family:var(--serif); font-size:17px}
header .usuario{color:var(--tenue); font-size:12.5px}
.campo.linea{flex-direction:row; align-items:center; gap:8px}
a.btn{text-decoration:none; display:inline-block}

/* --- Pantalla de entrada --- */
.pantalla-entrada{display:grid; place-items:center; min-height:100vh; padding:24px}
.entrada{
  background:var(--sup); border:1px solid var(--linea); border-radius:4px;
  padding:38px 40px; width:100%; max-width:410px;
  box-shadow:0 12px 40px rgba(10,46,77,.10);
}
.entrada-logo{height:30px; width:auto; display:block; margin-bottom:26px}
.entrada h1{font-size:23px; margin-bottom:4px}
.entrada .sub{margin-bottom:24px}
.entrada form{display:flex; flex-direction:column; gap:16px}
.entrada .campo input{width:100%; padding:9px 10px}
.entrada .btn{margin-top:4px; padding:10px}
.entrada .pie{margin-top:26px; font-size:12.5px}
.error{
  background:var(--alerta-claro); border:1px solid #EFD5D3; border-left:4px solid var(--alerta);
  color:var(--alerta); padding:11px 14px; border-radius:3px; margin-bottom:20px; font-size:14px;
}

/* --- Aviso flotante para respuestas del servidor --- */
.aviso{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:3px;
  font-size:14px; max-width:min(560px,92vw); box-shadow:0 10px 30px rgba(10,46,77,.3);
  z-index:50; opacity:0;
}
.aviso.visible{transform:translateX(-50%) translateY(0); opacity:1; transition:transform .18s ease, opacity .18s ease}
.aviso.mal{background:var(--alerta)}
@media (prefers-reduced-motion:reduce){ .aviso.visible{transition:none} }

/* --- Tabla de usuarios y bitácora --- */
.rol{font-size:12px; color:var(--tenue)}
.inactivo td{opacity:.55}
.bitacora td{font-size:13px}
.bitacora .cuando{color:var(--tenue); white-space:nowrap; font-variant-numeric:tabular-nums}
.cargando{color:var(--tenue); padding:40px 0; text-align:center}

/* --- Documentos y pendientes --- */
.adj-lista{font-size:12px; color:var(--texto)}
.adj-lista a{color:var(--azul); text-decoration:none}
.adj-lista a:hover{text-decoration:underline}
tr.vencido td:first-child{border-left:3px solid var(--alerta); padding-left:9px}
tr.riesgo  td:first-child{border-left:3px solid var(--ambar);  padding-left:9px}
tr.proximo td:first-child{border-left:3px solid var(--azul);   padding-left:9px}
input[type=file]{font-size:13px}