/* Portal del cliente — identidad CORAL */
:root{
  --navy:#003366; --coral:#fa5d5d; --coral-s:#eba79a; --green:#8ca89a; --yellow:#ffde59;
  --ink:#3f3f3f; --muted:#7d7d79; --bg:#f5f4f1; --card:#ffffff; --line:#e4e6e1;
  --radius:14px; --sh:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04);
  --num:"Anonymous Pro",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.5}
h1,h2,h3,button,label,.btn,.ceja{font-family:Barlow,Inter,system-ui,sans-serif}
#app{height:100%}
.cargando{color:var(--muted); text-align:center; padding:48px 16px}
.hidden{display:none !important}
a{color:var(--navy)}

/* Ingreso */
.ingreso{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px 16px}
.caja{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--sh);
  width:100%; max-width:400px; padding:32px 24px; text-align:center}
.caja img{width:60%; max-width:200px; height:auto}
.caja h1{color:var(--navy); font-size:1.35rem; font-weight:700; margin:18px 0 2px}
.caja .sub{color:var(--muted); margin:0 0 18px; font-size:.95rem}
.caja form{text-align:left}
label{display:block; font-weight:600; font-size:.9rem; color:var(--navy); margin-top:14px}
input{display:block; width:100%; margin-top:6px; padding:12px; font:inherit; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; background:#fff}
input:focus{outline:2px solid var(--coral-s); outline-offset:1px; border-color:var(--coral-s)}
.btn{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--navy); border-radius:10px;
  background:#fff; color:var(--navy); font-weight:600; font-size:.95rem; padding:9px 14px; cursor:pointer; text-decoration:none}
.btn-principal{background:var(--navy); color:#fff}
form .btn-principal{width:100%; padding:13px; font-size:1rem; margin-top:20px}
.btn:disabled{opacity:.6; cursor:default}
.error{background:#fdecea; color:#b3261e; border-radius:10px; padding:10px 12px; font-size:.9rem; font-weight:600; margin:14px 0 0}
.ok{background:#e6efe9; color:#2f5a48; border-radius:10px; padding:10px 12px; font-size:.9rem; font-weight:600; margin:14px 0 0}
.nota{color:var(--muted); font-size:.85rem; margin:18px 0 0}

/* Estructura */
.portal{height:100%; display:flex; flex-direction:column}
.barra{flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line)}
.barra .marca{display:flex}
.barra img{height:30px; width:auto}
.barra .quien{flex:1 1 auto; min-width:0; font-size:.9rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barra .quien strong{color:var(--navy); font-family:Barlow,Inter,sans-serif; font-weight:700}
.barra .acciones{flex:0 0 auto; display:flex; gap:4px}
.link{background:none; border:none; color:var(--muted); font-weight:500; font-size:.85rem; padding:8px; cursor:pointer}
.link:hover{color:var(--navy)}
.vista{flex:1 1 auto; overflow:auto; min-height:0}
.vista.fija{display:flex; flex-direction:column; overflow:hidden}
.pagina{max-width:820px; margin:0 auto; padding:32px 20px 56px}
.volver{display:inline-block; font-size:.9rem; font-weight:600; text-decoration:none; margin-bottom:14px}
.pagina h1{color:var(--navy); font-size:1.7rem; font-weight:700; line-height:1.2; margin:0 0 6px}
.bajada{font-size:1.02rem; margin:0 0 26px; max-width:60ch}
.ceja{color:var(--coral); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 4px}
.sin{color:var(--muted); background:var(--card); border:1px dashed var(--line); border-radius:var(--radius); padding:22px; text-align:center}
.fila-botones{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.fila-botones .btn{padding:11px 18px}

/* Inicio */
.hola{font-size:2rem !important}
.destacado{background:var(--card); border:1px solid var(--line); border-left:5px solid var(--coral-s); border-radius:var(--radius);
  box-shadow:var(--sh); padding:22px 24px; margin-bottom:22px}
.destacado h2{color:var(--navy); font-size:1.5rem; margin:0}
.caminos{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.camino{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; text-decoration:none; color:var(--ink); transition:border-color .15s, box-shadow .15s}
.camino:hover,.camino:focus-visible{border-color:var(--navy); box-shadow:var(--sh)}
.camino h3{color:var(--navy); font-size:1.08rem; margin:0 0 6px}
.camino p{font-size:.9rem; margin:0 0 14px; flex:1 1 auto}
.camino .cuenta{font-family:var(--num); font-size:.82rem; color:var(--muted)}
.pie{color:var(--muted); font-size:.85rem; margin:30px 0 0; text-align:center}

/* Números */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0 4px}
.kpi{background:var(--bg); border-radius:10px; padding:12px}
.kpi b{display:block; font-family:var(--num); font-size:1.6rem; line-height:1.1; color:var(--navy)}
.kpi span{display:block; font-size:.78rem; color:var(--muted); margin-top:4px; line-height:1.3}
.kpi.mal b{color:#c2453f}
.kpi.bien b{color:#4f7a66}
.informe .kpi{background:var(--card); border:1px solid var(--line)}

/* Listas de informes */
.lista{list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius)}
.lista li{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 18px; border-top:1px solid var(--line)}
.lista li:first-child{border-top:0}
.lista strong{font-family:Barlow,Inter,sans-serif; color:var(--navy); font-size:1.05rem}
.botones{display:flex; flex-wrap:wrap; gap:6px}

/* Resumen de un informe */
.meta{color:var(--muted); font-size:.9rem; margin:0 0 8px}
.informe section{margin-top:30px}
.informe h2{color:var(--navy); font-size:1.2rem; margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--coral-s)}
.informe h3{font-size:.95rem; color:var(--ink); margin:18px 0 8px}
.arqueos{list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:12px}
.arqueos li{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 14px; border-top:1px solid var(--line)}
.arqueos li:first-child{border-top:0}
.barra-n{font-weight:600}
.barra-n small{font-family:var(--num); font-weight:400; color:var(--muted); margin-left:8px}
.estado{font-size:.85rem; border-radius:999px; padding:4px 12px; background:#ecebe7; color:var(--ink)}
.estado b{font-family:var(--num); font-weight:700}
.estado.ok{background:#e3ece6; color:#35604e}
.estado.sobrante{background:#fff3c2; color:#6b5300}
.estado.faltante{background:#fbe3de; color:#a3352e}
.aclara{color:var(--muted); font-size:.85rem; margin:10px 0 6px}
.puntos,.viajes,.comentarios{margin:0; padding-left:22px}
.puntos li,.comentarios li{margin:0 0 12px}
.viajes{font-size:.9rem; color:var(--muted); margin-bottom:16px}
.viajes li{margin-bottom:4px}
.puntos li::marker{color:var(--coral)}
.comentarios li::marker{font-family:var(--num); color:var(--navy); font-weight:700}
.cierre{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.cierre p{margin:0; font-size:.92rem}

/* Resultados acumulados */
.subbarra{flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:8px 20px; border-bottom:1px solid var(--line)}
.subbarra .volver{margin:0}
.subbarra strong{font-family:Barlow,Inter,sans-serif; color:var(--navy)}
.marco{flex:1 1 auto; width:100%; border:0; background:var(--bg)}
.vacio{flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:24px 16px; text-align:center; color:var(--muted)}
.vacio div{max-width:420px}
.vacio h2{color:var(--navy); font-size:1.15rem; margin:0 0 6px}

/* Paneles (usuarios / contraseña) */
.fondo{position:fixed; inset:0; background:rgba(0,30,60,.35); display:flex; align-items:flex-start; justify-content:center; padding:70px 16px 16px; z-index:10}
.panel{background:var(--card); border-radius:var(--radius); box-shadow:0 8px 32px rgba(0,0,0,.2); width:100%; max-width:440px; max-height:calc(100% - 20px); overflow:auto; padding:20px}
.panel h2{color:var(--navy); font-size:1.1rem; margin:0 0 8px}
.panel h2.sep{margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.panel .cerrar{float:right; margin:-8px -8px 0 0}
.informes{list-style:none; margin:0; padding:0}
.informes li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line)}
.informes li:first-child{border-top:0}
.informes span{min-width:0; overflow-wrap:anywhere; font-size:.92rem}
.informes em{color:var(--muted)}
.informes .btn{flex:0 0 auto}

@media (max-width:640px){
  .barra{padding:8px 16px; gap:8px}
  .barra img{height:24px}
  .link{padding:8px 5px}
  .pagina{padding:22px 16px 44px}
  .hola{font-size:1.6rem !important}
  .caminos{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .destacado{padding:18px}
  .subbarra{padding:8px 16px}
}