/* =====================================================================
   Portal de Permisos — hoja de estilos
   ===================================================================== */
:root{
  --primario:#1E5A98;
  --acento:#2D74AA;
  --tenue:#EAF2FA;
  --texto:#1F3B57;

  --tinta:#16181D;
  --tinta-2:#4A5159;
  --tinta-3:#7C848D;
  --linea:#E3E7EC;
  --linea-2:#EFF2F5;
  --fondo:#F5F7FA;
  --panel:#FFFFFF;
  --ok:#1B7A3D;    --ok-bg:#E6F5EB;
  --alerta:#8A6100; --alerta-bg:#FFF6DF;
  --error:#A31515; --error-bg:#FBE9E9;
  --radio:12px;
  --sombra:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --sombra-alta:0 8px 32px rgba(16,24,40,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.25; font-weight:650; letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.22rem} h3{font-size:1.02rem}
p{margin:0 0 .8em}
a{color:var(--primario); text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--linea-2); padding:1px 5px; border-radius:5px; font-size:.88em}

/* ------------------------------------------------------------- login */
.fondo-auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
  background:
    radial-gradient(900px 500px at 12% -10%, #E8EEF6 0%, transparent 60%),
    radial-gradient(700px 480px at 105% 110%, #EDE6DA 0%, transparent 55%),
    var(--fondo);
}
.caja-auth{
  width:100%; max-width:430px; background:var(--panel);
  border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra-alta); padding:34px 32px;
}
.caja-instalador{max-width:520px}
.marca-auth{text-align:center; margin-bottom:22px}
.marca-auth .grupo{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:600; margin-bottom:6px;
}
.marca-auth h1{font-size:1.45rem; margin:0}
.marca-auth .lema{color:var(--tinta-3); font-size:.9rem; margin:6px 0 0}
.form-auth label{display:block; margin-bottom:14px; font-size:.85rem; font-weight:600; color:var(--tinta-2)}
.form-auth .pista{font-weight:400; color:var(--tinta-3)}
input,select,textarea{
  width:100%; font:inherit; color:var(--tinta); background:#fff;
  border:1px solid var(--linea); border-radius:9px; padding:9px 11px;
  margin-top:5px; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--primario);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primario) 16%, transparent);
}
input[readonly],input:disabled,select:disabled,textarea[readonly]{
  background:#F6F7F9; color:var(--tinta-2);
}
textarea{resize:vertical; min-height:70px}
select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%237C848D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px; padding-right:32px;
}

/* ----------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; font-size:.92rem; line-height:1;
  padding:10px 18px; border-radius:9px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:filter .15s, background .15s, border-color .15s;
}
.btn:hover{text-decoration:none; filter:brightness(.95)}
.btn-primario{background:var(--primario); color:#fff}
.btn-acento{background:var(--acento); color:#fff}
.btn-claro{background:#fff; color:var(--tinta); border-color:var(--linea)}
.btn-claro:hover{border-color:var(--tinta-3); filter:none}
.btn-ok{background:var(--ok); color:#fff}
.btn-peligro{background:#B23A3A; color:#fff}
.btn-bloque{width:100%}
.btn-mini{padding:6px 12px; font-size:.82rem; border-radius:7px}

/* ----------------------------------------------------------- alertas */
.alerta{padding:11px 14px; border-radius:9px; font-size:.9rem; margin-bottom:14px; border:1px solid}
.alerta-ok{background:var(--ok-bg); border-color:#BFE3CB; color:var(--ok)}
.alerta-error{background:var(--error-bg); border-color:#F0C5C5; color:var(--error)}
.alerta-aviso{background:var(--alerta-bg); border-color:#EFDCA8; color:var(--alerta)}
.nota{font-size:.87rem; color:var(--tinta-2)}

.pasos{list-style:none; padding:0; margin:0 0 20px; display:flex; gap:8px; counter-reset:p}
.pasos li{
  flex:1; font-size:.74rem; color:var(--tinta-3); text-align:center;
  padding-top:22px; position:relative; counter-increment:p; line-height:1.3;
}
.pasos li::before{
  content:counter(p); position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%; background:var(--linea);
  color:var(--tinta-3); font-weight:700; font-size:.68rem; display:grid; place-items:center;
}
.pasos li.hecho{color:var(--primario); font-weight:600}
.pasos li.hecho::before{background:var(--primario); color:#fff}
.titulo-instalador{text-align:center}
.sub-instalador{text-align:center; color:var(--tinta-3); font-size:.9rem; margin-bottom:24px}

/* ------------------------------------------------------------- shell */
.barra{
  background:var(--panel); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:40;
}
.barra-in{
  max-width:1220px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:18px; min-height:60px;
}
.barra-logo{display:flex; align-items:center; gap:11px; font-weight:700; color:var(--tinta); white-space:nowrap}
.barra-logo img{height:30px; width:auto; display:block}
.barra-logo:hover{text-decoration:none}
.barra-nav{display:flex; gap:2px; margin-left:8px; flex-wrap:wrap}
.barra-nav a{
  padding:7px 12px; border-radius:8px; color:var(--tinta-2);
  font-size:.9rem; font-weight:550;
}
.barra-nav a:hover{background:var(--linea-2); text-decoration:none}
.barra-nav a.activo{background:var(--tenue); color:var(--primario); font-weight:650}
.barra-usuario{margin-left:auto; display:flex; align-items:center; gap:12px}
.avatar{
  width:33px; height:33px; border-radius:50%; background:var(--primario); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none;
}
.barra-usuario .quien{font-size:.82rem; line-height:1.3; text-align:right}
.barra-usuario .quien strong{display:block; font-weight:650}
.barra-usuario .quien span{color:var(--tinta-3)}
.franja-empresa{height:3px; background:linear-gradient(90deg,var(--primario),var(--acento))}

.contenido{max-width:1220px; margin:0 auto; padding:26px 20px 60px}
.encabezado-pagina{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.encabezado-pagina .sub{color:var(--tinta-3); font-size:.92rem; margin:0}
.encabezado-pagina .acciones{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

/* ------------------------------------------------------------ panels */
.panel{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra); margin-bottom:18px; overflow:hidden;
}
.panel-cab{
  background:var(--primario); color:#fff; padding:10px 16px;
  font-weight:650; font-size:.93rem; display:flex; align-items:center; gap:10px;
}
.panel-cab .num{
  background:rgba(255,255,255,.22); width:21px; height:21px; border-radius:6px;
  display:grid; place-items:center; font-size:.78rem; flex:none;
}
.panel-cuerpo{padding:18px}

/* ------------------------------------------------------------- rejilla */
.rejilla{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.c3{grid-column:span 3} .c4{grid-column:span 4} .c6{grid-column:span 6}
.c8{grid-column:span 8} .c9{grid-column:span 9} .c12{grid-column:span 12}
@media (max-width:860px){
  .c3,.c4,.c6,.c8,.c9{grid-column:span 12}
}
.campo label{display:block; font-size:.8rem; font-weight:650; color:var(--tinta-2); margin-bottom:0}
.campo .req{color:#B23A3A}
.campo .ayuda{font-size:.76rem; color:var(--tinta-3); margin-top:4px; display:block}
.campo-auto input,.campo-auto textarea{background:#F6F7F9; font-style:italic; color:var(--tinta-2)}

/* -------------------------------------------------------- selector empresa */
.tarjetas-empresa{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px}
.tarjeta-empresa{
  background:var(--panel); border:1px solid var(--linea); border-radius:16px;
  overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column;
  transition:transform .16s, box-shadow .16s; text-decoration:none; color:inherit;
}
.tarjeta-empresa:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta); text-decoration:none}
.tarjeta-empresa .cinta{height:5px}
.tarjeta-empresa .cuerpo{padding:26px 22px; text-align:center; flex:1; display:flex; flex-direction:column}
.tarjeta-empresa .logo{height:74px; display:grid; place-items:center; margin-bottom:16px}
.tarjeta-empresa .logo img{max-height:74px; max-width:190px; width:auto}
.tarjeta-empresa h3{margin:0 0 4px; font-size:1.05rem}
.tarjeta-empresa .desc{color:var(--tinta-3); font-size:.85rem; margin:0 0 18px; flex:1}
.tarjeta-empresa .ir{
  display:inline-block; padding:9px 16px; border-radius:9px; color:#fff;
  font-weight:650; font-size:.88rem;
}
.tarjeta-empresa .pie{
  border-top:1px solid var(--linea-2); padding:9px 16px; font-size:.76rem;
  color:var(--tinta-3); display:flex; justify-content:space-between;
}

/* ------------------------------------------------------------- tablas */
.tabla-envoltura{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.datos{width:100%; border-collapse:collapse; font-size:.86rem}
table.datos th{
  background:var(--primario); color:#fff; text-align:left; font-weight:650;
  padding:9px 11px; white-space:nowrap; font-size:.78rem; letter-spacing:.02em;
}
table.datos td{padding:8px 11px; border-bottom:1px solid var(--linea-2); vertical-align:middle}
table.datos tbody tr:hover{background:var(--linea-2)}
table.datos tbody tr:last-child td{border-bottom:none}
.num{text-align:right; font-variant-numeric:tabular-nums}
.centro{text-align:center}
.vacio{padding:44px 20px; text-align:center; color:var(--tinta-3)}
.vacio svg{opacity:.4; margin-bottom:10px}

.etiqueta{
  display:inline-block; padding:3px 9px; border-radius:20px;
  font-size:.74rem; font-weight:650; white-space:nowrap;
}
.et-pendiente{background:var(--alerta-bg); color:var(--alerta)}
.et-aprobado{background:var(--ok-bg); color:var(--ok)}
.et-parcial{background:#E9F0FB; color:#1E5A98}
.et-negado{background:var(--error-bg); color:var(--error)}
.et-cancelado{background:var(--linea-2); color:var(--tinta-3)}

/* ------------------------------------------------------------ filtros */
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:14px 16px; margin-bottom:16px; box-shadow:var(--sombra);
}
.filtros .campo{min-width:150px; flex:1 1 150px}
.filtros .campo label{font-size:.75rem}
.filtros .botones{display:flex; gap:8px; flex:none}

/* ------------------------------------------------------------- KPIs */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px}
.kpi{
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px 18px; box-shadow:var(--sombra); position:relative; overflow:hidden;
}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--acento)}
.kpi .rot{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--tinta-3); font-weight:700; margin-bottom:6px;
}
.kpi .val{font-size:1.85rem; font-weight:700; line-height:1; color:var(--primario); font-variant-numeric:tabular-nums}
.kpi .pie{font-size:.76rem; color:var(--tinta-3); margin-top:5px}

/* ------------------------------------------------------------ barras */
.barras{display:flex; flex-direction:column; gap:9px}
.barra-fila{display:grid; grid-template-columns:1fr 46px; gap:10px; align-items:center}
.barra-fila .rot{font-size:.82rem; color:var(--tinta-2)}
.barra-pista{background:var(--linea-2); border-radius:6px; height:9px; overflow:hidden; margin-top:4px}
.barra-valor{height:100%; background:var(--acento); border-radius:6px; min-width:2px; transition:width .4s}
.barra-fila .cifra{text-align:right; font-weight:650; font-size:.85rem; font-variant-numeric:tabular-nums}

.columnas{display:flex; align-items:flex-end; gap:6px; height:150px; padding-top:8px}
.columna{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; min-width:0}
.columna .torre{
  width:100%; max-width:34px; background:var(--acento); border-radius:5px 5px 0 0;
  min-height:2px; transition:height .4s;
}
.columna .mes{font-size:.66rem; color:var(--tinta-3); white-space:nowrap}
.columna .cnt{font-size:.7rem; font-weight:700; color:var(--tinta-2)}

/* ----------------------------------------------------------- detalle */
.ficha{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0}
.ficha .dato{padding:11px 16px; border-bottom:1px solid var(--linea-2); border-right:1px solid var(--linea-2)}
.ficha .dato .rot{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-3); font-weight:700}
.ficha .dato .val{margin-top:3px; font-size:.93rem}
.ficha .ancho{grid-column:1/-1; border-right:none}
.aviso-legal{
  background:var(--tenue); border:1px solid var(--linea); border-radius:9px;
  padding:12px 14px; font-size:.79rem; color:var(--tinta-2); line-height:1.5;
}

.pie-portal{
  text-align:center; color:var(--tinta-3); font-size:.78rem;
  padding:22px 20px 34px; border-top:1px solid var(--linea); margin-top:10px;
}
.solo-movil{display:none}
@media (max-width:760px){
  .barra-in{flex-wrap:wrap; padding:10px 14px; gap:10px}
  .barra-nav{order:3; width:100%; overflow-x:auto}
  .barra-usuario .quien{display:none}
  .contenido{padding:18px 14px 48px}
}
@media print{
  .barra,.pie-portal,.encabezado-pagina .acciones,.filtros,.no-imprimir{display:none !important}
  body{background:#fff}
  .panel{box-shadow:none; break-inside:avoid}
}