/* ============================================================
   ALFA GROUP - Identidad corporativa de la plataforma
   Brandbook Integracion 2026 (pag. 10-13):
     rojo de marca #ed2224 (Pantone 485 C) - negro #1a1a1a - Calibri.
   Hoja global: variables, base, botones y pantalla de acceso.

   Los dos rojos NO son intercambiables:
     --red    #ed2224  marca: logo, franja, hover, rellenos.
                       Sobre blanco da 4,3:1, no alcanza AA para texto chico.
     --red-d  #d10e0e  "rojo footer" del manual. Da 5,6:1, si cumple AA:
                       es el que va en texto pequeno, enlaces y la franja.

   Sin @import de Google Fonts: Calibri ya esta en Windows y la plataforma
   es de intranet, no tiene por que depender de una CDN para tener su letra.
   ============================================================ */

:root{
  --red:#ed2224;   --red-d:#d10e0e;   --red-soft:#fdeaea;
  --ink:#1A1A1A;   --charcoal:#232323;
  --bg:#f2f2f2;    --card:#FFFFFF;    --greige:#E4E2DD;   --muted:#6B6B6B;
  --line:#E1DFDA;  --track:#E7E5E0;
  --green:#2E7D32; --amber:#C77D0A;   --danger:#d10e0e;
  --cl:#2a78d6;    --ar:#eb6834;      --pe:#ed2224;       --ppto:#8a8780;
  /* Carlito es metricamente compatible con Calibri: cubre a quien no la tenga */
  --f-head:"Calibri","Carlito","Segoe UI",Arial,sans-serif;
  --f-body:"Calibri","Carlito","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Consolas","Courier New",monospace;
  --shadow:0 1px 2px rgba(26,26,26,.05),0 4px 14px rgba(26,26,26,.05);
  --radius:12px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--f-head); font-weight:700; letter-spacing:-.01em; line-height:1.06; margin:0; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

.btn{
  font-family:var(--f-body); font-weight:700; font-size:15px; color:#fff;
  background:var(--red); border:none; border-radius:8px; padding:12px 16px;
  cursor:pointer; transition:background .15s, transform .05s;
}
.btn:hover{ background:var(--red-d); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ background:var(--muted); cursor:progress; }

a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ============================================================
   PANTALLA DE ACCESO
   ============================================================ */
.pantalla-acceso{
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1100px 560px at 12% -10%, #fdecec 0%, transparent 55%),
    radial-gradient(900px 480px at 112% 118%, #eef0f2 0%, transparent 50%),
    var(--bg);
}

.login-card{
  width:100%; max-width:430px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:34px 32px 26px;
  animation:aparecer .4s ease;
}
@keyframes aparecer{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.login-logo{
  height:46px; width:100%; background:url("/assets/logo.png") no-repeat left center;
  background-size:contain; margin-bottom:20px;
}
.login-card h1{ font-size:20px; margin:0 0 4px; }
.login-card .lead{ margin:0 0 24px; font-size:13px; color:var(--muted); }

.campo{ margin-bottom:17px; }
.campo label{ display:block; margin-bottom:7px; font-size:13px; font-weight:700; color:var(--charcoal); }
.campo input{
  width:100%; padding:12px 14px; font-size:15px; font-family:var(--f-body); color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:9px;
  transition:border-color .15s, box-shadow .15s;
}
.campo input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(237,34,36,.16); }

.btn-full{ width:100%; margin-top:6px; }

.login-error{
  display:none; margin:0 0 16px; padding:10px 13px; font-size:13px;
  color:#fff; background:var(--red); border-radius:9px;
}
.login-error.visible{ display:block; }

.login-pie{ margin:22px 0 0; text-align:center; font-size:11.5px; color:var(--muted); }

/* ============================================================
   SIN ACCESO / ERROR
   ============================================================ */
.aviso{
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
}
.aviso .caja{
  background:var(--card); padding:36px 40px; border-radius:14px; box-shadow:var(--shadow);
  text-align:center; max-width:400px; border:1px solid var(--line);
}
.aviso h1{ color:var(--red); font-size:20px; margin:0 0 8px; }
.aviso p{ color:var(--muted); font-size:14px; margin:0; }
.aviso a{
  display:inline-block; margin-top:16px; background:var(--red); color:#fff; text-decoration:none;
  padding:10px 18px; border-radius:9px; font-size:14px; font-weight:700;
}
.aviso a:hover{ background:var(--red-d); }

/* ============================================================
   PORTADA: barra superior y mosaico de secciones
   ============================================================ */
.wrap{ max-width:1120px; margin:0 auto; padding:22px 22px 64px; }

.topbar{ position:sticky; top:0; z-index:30; background:var(--card); border-bottom:1px solid var(--line); }
.topbar .inner{ max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:11px 22px; flex-wrap:wrap; }
.brand-logo{ background:url("/assets/logo.png") no-repeat left center; background-size:contain; height:34px; width:152px; flex:none; display:block; }
.topbar .bartt{ font-family:var(--f-head); font-weight:700; font-size:15.5px; color:var(--ink); letter-spacing:-.01em; padding-left:16px; border-left:1px solid var(--line); }
.topbar .spacer{ flex:1 1 auto; }
.topbar .chip{ font-size:12.5px; font-weight:700; color:var(--red-d); background:var(--red-soft); padding:5px 12px; border-radius:999px; }
.topbar .salir{ font-family:var(--f-body); font-size:12.5px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:7px 13px; cursor:pointer; }
.topbar .salir:hover{ border-color:var(--muted); }

.ruta{ color:var(--muted); font-size:12px; margin:0 0 2px; text-transform:uppercase; letter-spacing:.6px; }
.sub{ color:var(--muted); font-size:13.5px; margin:2px 0 22px; }
.section-tit{ font-family:var(--f-body); font-size:11.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--red-d); margin:26px 0 12px; }

.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px; }
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; text-decoration:none; display:block; color:inherit;
  transition:border-color .15s, transform .08s, box-shadow .15s;
}
a.tile:hover{ border-color:var(--red); transform:translateY(-2px); box-shadow:0 14px 28px rgba(237,34,36,.14); }
.tile .ico{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:var(--red-soft); border-radius:11px; font-size:20px; margin-bottom:10px; }
.tile .t{ font-family:var(--f-head); font-weight:700; color:var(--ink); font-size:15px; }
.tile .d{ color:var(--muted); font-size:12px; margin-top:2px; }

.sin-vistas{ color:var(--muted); font-size:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }

.pie{ margin:32px 0 24px; text-align:center; color:var(--muted); font-size:11.5px; }

/* ============================================================
   PORTADAS DE PAIS: volver, tiles deshabilitados y banderas
   ============================================================ */
/* Boton "Volver": mismo diseño en toda la plataforma, y siempre primero
   arriba a la izquierda de la página (o de la barra, en los tableros). */
.volver{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-body); font-size:13px; font-weight:700; line-height:1;
  color:var(--red-d); background:var(--card);
  border:1px solid var(--line); border-radius:8px;
  padding:8px 13px; margin:0 10px 14px 0;
  text-decoration:none; white-space:nowrap;
  transition:border-color .15s, background .15s;
}
.volver:hover{ border-color:var(--red); background:var(--red-soft); text-decoration:none; }
.volver:active{ transform:translateY(1px); }

/* Dentro de una barra superior no lleva margen inferior */
.topbar .volver{ margin-bottom:0; align-self:center; }

/* Modulo aun no disponible: se ve, pero apagado y sin enlace */
.tile.off{ opacity:.55; cursor:default; }
.tile.off:hover{ border-color:var(--line); transform:none; box-shadow:var(--shadow); }

.tile .badge{ display:inline-block; margin-top:10px; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
.tile .badge.on{ color:var(--red-d); }

.flag-h{ width:30px; height:20px; border-radius:2px; box-shadow:0 0 0 1px rgba(26,26,26,.10); vertical-align:-4px; margin-right:6px; }

/* Botón de administración: solo visible para usuarios administradores */
.btn-admin{
  font-family:var(--f-body); font-size:12.5px; font-weight:700;
  color:var(--red-d); background:var(--red-soft); border:1px solid transparent;
  border-radius:8px; padding:7px 13px; text-decoration:none; white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.btn-admin:hover{ background:#fbd9d9; border-color:var(--red); }
.btn-admin[hidden]{ display:none; }

/* El logo de la barra es un enlace al inicio: sin subrayado ni color de enlace */
a.brand-logo{ text-decoration:none; color:inherit; cursor:pointer; }
a.brand-logo:hover{ opacity:.85; }

/* ============================================================
   FRANJA ROJA INSTITUCIONAL
   Brandbook pag. 15: el pie definido, con la franja roja, va SIEMPRE.
   Usa --red-d (#d10e0e), que es el "rojo footer" del manual y el unico
   de los dos que da contraste AA con el texto blanco encima.
   ============================================================ */
.franja-alfa{
  background:var(--red-d); color:#fff;
  padding:15px 22px; text-align:center;
}
.franja-alfa p{
  margin:0; font-size:11px; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase; line-height:1.75;
}
.franja-alfa a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); }
.franja-alfa a:hover{ border-bottom-color:#fff; }
.franja-alfa a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.franja-alfa .sitios{ opacity:.9; }