/* =====================================================================
   SIGRIF · pantalla de acceso, panel de mando y navegación por bloques
   ===================================================================== */

/* ---------------- Pantalla de acceso ---------------- */
.acceso { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: #fff; display: grid; grid-template-columns: minmax(380px, 500px) 1fr; align-items: center; padding: 40px clamp(24px, 5vw, 80px) 84px; isolation: isolate; }
.acceso-foto { position: absolute; inset: -3%; z-index: -3; background: #3a0b15 url(/img/fondo-acceso.jpg) 62% 40% / cover no-repeat; animation: kenburns 40s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { 0% { transform: scale(1.03) translate3d(0, 0, 0); } 100% { transform: scale(1.12) translate3d(-2%, -1.5%, 0); } }
/* velo granate: intenso a la izquierda (formulario) y más ligero a la derecha para que se vea la foto */
.acceso-velo { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(46, 8, 17, .94) 0%, rgba(90, 15, 30, .86) 32%, rgba(120, 22, 42, .52) 62%, rgba(140, 26, 49, .30) 100%),
    linear-gradient(0deg, rgba(46, 8, 17, .55), transparent 40%); }
/* bruma que se desplaza lentamente */
.acceso-bruma { position: absolute; inset: -10% -30%; z-index: -1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(40% 30% at 30% 70%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(35% 25% at 70% 60%, rgba(255,230,210,.10), transparent 70%),
    radial-gradient(30% 20% at 50% 85%, rgba(255,255,255,.08), transparent 70%);
  animation: bruma 30s ease-in-out infinite alternate; }
@keyframes bruma { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -3%, 0); } }
/* pavesas que ascienden */
.pavesas { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pavesas i { position: absolute; bottom: -12px; width: var(--t, 4px); height: var(--t, 4px); border-radius: 50%;
  background: radial-gradient(circle, #ffe2b0 0%, #ff9b4a 45%, rgba(255, 90, 40, 0) 70%);
  box-shadow: 0 0 8px 2px rgba(255, 140, 60, .45); opacity: 0;
  animation: pavesa var(--d, 12s) linear var(--r, 0s) infinite; }
@keyframes pavesa {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  10% { opacity: var(--o, .85); }
  50% { transform: translate3d(var(--x1, 20px), -50vh, 0) scale(.9); }
  85% { opacity: calc(var(--o, .85) * .6); }
  100% { transform: translate3d(var(--x2, -10px), -105vh, 0) scale(.4); opacity: 0; } }
.acceso.validando .pavesas i { animation-duration: calc(var(--d, 12s) / 3); }

.acceso-izq { display: flex; flex-direction: column; gap: 26px; }
.acceso-marca { animation: entra .9s cubic-bezier(.2,.7,.2,1) both; }
.acceso-logos { display: flex; align-items: center; gap: 24px; margin-bottom: 26px; }
.acceso-logos .carm { height: 84px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
.acceso-logos .sep { width: 1px; height: 66px; background: rgba(255,255,255,.35); }
.acceso-logos .udif { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.35); }
.acceso-nombre { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(60px, 7vw, 96px); line-height: .9; letter-spacing: -.035em; margin: 0; }
.acceso-nombre span { color: #ffb36b; }
.acceso-sub { font-family: var(--fuente-display); font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; margin: 12px 0 0; line-height: 1.35; max-width: 460px; color: rgba(255,255,255,.92); }
.acceso-pie-foto { position: absolute; right: clamp(24px, 5vw, 80px); bottom: 26px; max-width: 420px; text-align: right; font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.5; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.acceso-pie-foto b { color: #fff; }

.acceso-tarjeta { background: rgba(255,255,255,.97); color: var(--gris-900); border-radius: 18px; padding: 28px 30px 24px; box-shadow: 0 30px 80px rgba(20, 2, 6, .45); animation: entra .9s .15s cubic-bezier(.2,.7,.2,1) both; position: relative; overflow: hidden; }
.acceso-tarjeta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--verde-700), #e2553e, #f4b740); background-size: 200% 100%; }
.acceso-tarjeta h2 { font-size: 22px; font-weight: 700; }
.acceso-tarjeta p.muted { margin: 4px 0 18px; }
.acceso-tarjeta form { display: flex; flex-direction: column; gap: 14px; }
.acceso-tarjeta input { height: 46px; font-size: 15px; border-radius: 10px; }
.acceso-tarjeta .btn { height: 48px; font-size: 15.5px; border-radius: 10px; position: relative; overflow: hidden; }
.acceso-tarjeta .pie { margin: 14px 0 0; font-size: 12.5px; color: var(--gris-500); }
.campo-pw { position: relative; }
.campo-pw button { position: absolute; right: 6px; bottom: 6px; height: 34px; border: 0; background: none; color: var(--gris-500); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0 8px; border-radius: 6px; }
.campo-pw button:hover { background: var(--gris-100); }

.acceso-orthem { display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255,255,255,.7); letter-spacing: .02em; animation: entra .9s .3s both; }
.acceso-orthem img { height: 34px; }
.acceso-version { position: absolute; left: clamp(24px, 5vw, 80px); bottom: 26px; font-size: 11.5px; color: rgba(255,255,255,.45); }

/* Animación mientras se valida el acceso */
.acceso.validando .acceso-foto { animation-duration: 6s; }
.acceso.validando .acceso-tarjeta::before { animation: progreso 1.1s linear infinite; }
@keyframes progreso { from { background-position: 200% 0; } to { background-position: 0 0; } }
.btn .giro { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.acceso.saliendo .acceso-izq { animation: sale .55s cubic-bezier(.6,0,.8,.4) forwards; }
.acceso.saliendo .acceso-velo { transition: opacity .6s; opacity: .97; }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sale { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
.acceso .error { animation: tiembla .35s; }
@keyframes tiembla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (max-width: 960px) {
  .acceso { grid-template-columns: 1fr; padding: 24px 18px 70px; align-items: start; }
  .acceso-foto { background-image: url(/img/fondo-acceso-movil.jpg); background-position: 55% 30%; }
  .acceso-velo { background: linear-gradient(180deg, rgba(46,8,17,.55) 0%, rgba(90,15,30,.78) 35%, rgba(46,8,17,.94) 100%); }
  .acceso-logos { gap: 14px; margin-bottom: 16px; }
  .acceso-logos .carm { height: 56px; } .acceso-logos .udif { width: 64px; height: 64px; } .acceso-logos .sep { height: 46px; }
  .acceso-izq { gap: 18px; }
  .acceso-pie-foto { display: none; }
  .acceso-tarjeta { padding: 22px 20px 20px; }
  .acceso-orthem img { height: 28px; }
  .acceso-version { left: auto; right: 18px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso-foto, .acceso-bruma, .pavesas i, .acceso-marca, .acceso-tarjeta, .acceso-orthem { animation: none !important; }
  .pavesas { display: none; }
}

/* ---------------- Cabecera global ---------------- */
.giru { min-height: 100vh; display: flex; flex-direction: column; }
.gbar { height: 64px; background: var(--verde-800); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.gbar a.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.gbar a.marca img { width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.gbar a.marca b { font-family: var(--fuente-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.gbar .migas-g { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.75); min-width: 0; }
.gbar .migas-g a { color: rgba(255,255,255,.75); }
.gbar .migas-g b { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar .espacio { flex: 1; }
.gbar .carm { height: 34px; }
.gbar .campana { color: #fff; } .gbar .campana:hover { background: rgba(255,255,255,.1); }
.gbar .campana .punto { border-color: var(--verde-800); }
.gbar .usuario-chip { color: #fff; } .gbar .usuario-chip:hover { background: rgba(255,255,255,.1); }
.gbar .usuario-chip .datos span { color: rgba(255,255,255,.7); }
.gbar .avatar { background: rgba(255,255,255,.16); color: #fff; }
.gbar .btn-menu { color: #fff; }
.gbar .desplegable { top: 58px; color: var(--gris-900); }

/* Con bloque abierto: barra lateral contextual */
.giru .app { min-height: calc(100vh - 64px); grid-template-columns: 250px 1fr; }
.giru .sidebar { top: 64px; height: calc(100vh - 64px); }
.sb-bloque { padding: 16px 16px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-bloque a.volver { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #e4b9c1; margin-bottom: 10px; }
.sb-bloque a.volver svg { width: 14px; height: 14px; }
.sb-bloque .tit { display: flex; align-items: center; gap: 10px; color: #fff; }
.sb-bloque .tit .ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.1); display: grid; place-items: center; flex: none; }
.sb-bloque .tit .ic svg { width: 22px; height: 22px; }
.sb-bloque .tit b { font-family: var(--fuente-display); font-size: 16px; line-height: 1.15; }
.sb-bloque .tit span { display: block; font-size: 11px; color: #d79aa6; letter-spacing: .08em; }
.giru .topbar { display: none; }
.giru[data-modo="panel"] .gbar .carm { display: none; }
.giru .sb-pie img { height: 26px; opacity: .9; }
.giru .sb-pie img.carm { height: 42px; opacity: 1; order: -1; }

/* ---------------- Panel de mando (pantalla completa) ---------------- */
.giru[data-modo="panel"] { height: 100vh; height: 100dvh; overflow: hidden; }
.giru[data-modo="panel"] #contenido { flex: 1; min-height: 0; display: flex; }
.panel { position: relative; flex: 1; display: flex; flex-direction: column; isolation: isolate; color: #fff; padding: clamp(16px, 2.4vw, 32px) clamp(16px, 3vw, 44px) 14px; min-height: 0; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background: #3a0b15 url(/img/fondo-acceso.jpg) 62% 42% / cover no-repeat; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(46,8,17,.90) 0%, rgba(90,15,30,.74) 40%, rgba(120,22,42,.52) 100%); }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(12px, 2vh, 22px); }
.panel-cab .izq { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; }
.panel-cab .logos { display: flex; align-items: center; gap: 16px; padding-right: clamp(16px, 2.4vw, 32px); border-right: 1px solid rgba(255,255,255,.25); }
.panel-cab .logos .carm { height: clamp(44px, 6vh, 62px); }
.panel-cab .logos .udif { width: clamp(48px, 6.5vh, 66px); height: clamp(48px, 6.5vh, 66px); border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.panel-cab .saludo h1 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; }
.panel-cab .saludo p { color: rgba(255,255,255,.78); margin: 4px 0 0; font-size: 14px; }
.panel-cab .sello { text-align: right; }
.panel-cab .sello b { font-family: var(--fuente-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1; display: block; }
.panel-cab .sello span { font-size: 12px; color: rgba(255,255,255,.75); display: block; max-width: 300px; margin-left: auto; }
.bloques { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); grid-auto-rows: 1fr; gap: clamp(10px, 1.4vw, 18px); }
.bloques.pocos { grid-auto-rows: min(100%, 360px); align-content: center; max-width: 900px; width: 100%; margin: 0 auto; }
.bloque { position: relative; min-height: 0; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 20px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 10px 30px rgba(20, 2, 6, .25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 16px); padding: 16px 14px; text-align: center; color: var(--gris-900); text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; animation: entra .5s both; }
.bloque:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 18px 40px rgba(20, 2, 6, .35); text-decoration: none; }
.bloque:focus-visible { outline: 3px solid #ffb36b; outline-offset: 3px; }
.bloque .num { position: absolute; top: 12px; left: 16px; font-family: var(--fuente-display); font-size: 13px; font-weight: 700; color: var(--gris-300); }
.bloque .ico { width: clamp(56px, 9vh, 88px); height: clamp(56px, 9vh, 88px); border-radius: 26%; display: grid; place-items: center; background: linear-gradient(145deg, var(--verde-600), var(--verde-800)); color: #fff; box-shadow: 0 8px 18px rgba(110, 19, 38, .28); }
.bloque .ico svg { width: 52%; height: 52%; }
.bloque .nom { font-family: var(--fuente-display); font-weight: 650; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.2; }
.bloque .subs { font-size: 12px; color: var(--gris-500); line-height: 1.35; margin-top: -4px; max-width: 260px; }
.bloque .estado { position: absolute; top: 10px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 99px; background: #fff4e0; color: #8a4b05; }
.bloque .pestana { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--gris-500); opacity: 0; transition: opacity .15s; }
.bloque:hover .pestana, .bloque:focus-within .pestana { opacity: 1; }
.bloque .pestana:hover { background: var(--gris-100); color: var(--verde-700); }
.bloque .pestana svg { width: 16px; height: 16px; }
.bloque.desarrollo .ico { background: linear-gradient(145deg, #a8858c, #6f5157); box-shadow: none; }
.panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; color: rgba(255,255,255,.7); font-size: 12px; flex-wrap: wrap; }
.panel-pie .orthem { display: flex; align-items: center; gap: 10px; }
.panel-pie img { height: 30px; }
.panel-aviso { margin: 10px 0 0; color: rgba(255,255,255,.8); font-size: 13px; }

/* Página de bloque en desarrollo */
.obras { text-align: center; padding: 48px 20px; }
.obras .ico { width: 84px; height: 84px; border-radius: 24px; margin: 0 auto 16px; display: grid; place-items: center; background: var(--verde-100); color: var(--verde-700); }
.obras .ico svg { width: 42px; height: 42px; }
.subbloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; text-align: left; margin-top: 24px; }
.subbloque { border: 1px solid var(--gris-200); border-radius: 12px; padding: 14px 16px; background: #fff; }
.subbloque b { display: block; font-family: var(--fuente-display); }
.subbloque ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--gris-700); }

/* Matriz de permisos de roles */
.matriz th.bl { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: none; letter-spacing: 0; font-size: 12px; padding: 10px 6px; height: 190px; vertical-align: bottom; text-align: left; }
.matriz td.c, .matriz th.c { text-align: center; padding: 8px 6px; }

@media (max-width: 860px) {
  .gbar { padding: 0 10px; gap: 8px; }
  .gbar .carm, .gbar .migas-g .sep-m, .gbar .usuario-chip .datos { display: none; }
  .giru .sidebar { top: 64px; height: calc(100vh - 64px); }
  /* en el móvil el panel se desplaza y los bloques son cuadrados */
  .giru[data-modo="panel"] { height: auto; min-height: 100dvh; overflow: visible; }
  .panel-cab .sello { display: none; }
  .bloques { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto; gap: 12px; }
  .bloque { aspect-ratio: 1 / 1; border-radius: 16px; gap: 10px; }
  .bloque .ico { width: 58px; height: 58px; border-radius: 18px; }
  .bloque .nom { font-size: 14px; } .bloque .subs { display: none; }
  .panel-pie { flex-direction: column; align-items: flex-start; }
  .panel-cab .logos { border-right: 0; padding-right: 0; }
}
@media (min-width: 861px) and (max-height: 700px) { .bloque .subs { display: none; } }