:root{
  --bg:#f2f7fa;
  --text:#08313a;
  --muted:#5a7a81;
  --brand:#1b8ea4;
  --btn-logout:#b14024;
  --brand-2:#0f6f7f;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --nav-h:64px;   /* altura del menú fijo */
  --foot-h:80px;  /* altura del footer fijo */
}

/* BASE */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.45;

  /* SIN padding-top global (hay páginas sin topbar) */
  padding-bottom:var(--foot-h); /* espacio para footer fijo */
}

/* ===== NAVBAR SUPERIOR ===== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  background:#ffffffee;
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid rgba(8,49,58,.08);
  z-index:1000;
}
.topbar__inner{
  width:min(1280px,100% - 32px);
  margin-inline:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.brand img{height:36px;width:auto;object-fit:contain}
.brand__title{
  font-weight:800;
  letter-spacing:.02em;
  color:#0f3340;
  white-space:nowrap;
}

.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav a{
  text-decoration:none;
  color:#0c3a44;
  font-weight:600;
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover{background:rgba(27,142,164,.10)}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 8px 16px rgba(27,142,164,.25);
  transition:transform .06s ease,filter .2s ease,background .2s;
  text-decoration:none;
}
.btn:hover{background:var(--brand-2)}
.btn:active{transform:translateY(1px)}

/* ===== MENÚ MÓVIL ===== */
.burger{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(8,49,58,.12);
  background:#fff;
  cursor:pointer;
}
.burger span,
.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:2px;
  background:#08313a;
  transition:transform .2s ease,opacity .2s ease,top .2s ease;
}
.burger span{top:50%;transform:translateY(-50%)}
.burger::before{top:14px}
.burger::after{top:28px}

#nav-toggle{display:none}
.nav-wrap{display:flex;align-items:center;gap:18px}

/* 🔧 Panel móvil oculto SIEMPRE por defecto */
.nav-panel{display:none}

@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}

  .nav-panel{
    position:fixed;
    top:var(--nav-h);
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid rgba(8,49,58,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:10px;
  }
  .nav-panel a{
    display:block;
    padding:12px 10px;
    border-radius:10px;
    text-decoration:none;
    color:#0c3a44;
    font-weight:600;
  }
  .nav-panel a:hover{background:rgba(27,142,164,.10)}

  /* Se muestra solo cuando el checkbox está marcado */
  #nav-toggle:checked ~ .nav-panel{display:block}

  /* Animación hamburguesa -> X */
  #nav-toggle:checked + label.burger::before{top:22px;transform:rotate(45deg)}
  #nav-toggle:checked + label.burger span{opacity:0}
  #nav-toggle:checked + label.burger::after{top:22px;transform:rotate(-45deg)}
}

/* ===== CABECERA IMAGEN ===== */
.header-banner{
  width:100%;
  line-height:0;
  /* Por defecto, sin topbar visible, SIN margen arriba */
  margin-top:0;
}
.header-banner img{
  display:block;
  width:100%;
  height:auto;
}
/* Si hay una .topbar antes, deja hueco equivalente */
.topbar + .header-banner,
.topbar ~ .header-banner{
  margin-top:var(--nav-h);
}

/* ===== FORMULARIO LOGIN ===== */
.login-wrap{
  padding:16px 24px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card{
  width:min(720px,100%);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.field{position:relative;margin:10px 0}
.input{
  width:100%;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(8,49,58,.15);
  background:#f8fcfd;
  padding:0 14px;
  font-size:14px;
  color:#09343d;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(27,142,164,.15);
  background:#fff;
}
.helper{
  display:block;
  text-align:center;
  margin-top:14px;
  color:var(--muted);
  font-size:13px;
}
.helper a{color:#0e6c7c;text-decoration:none;font-weight:700}
.helper a:hover{text-decoration:underline}
.error{
  margin:8px 0 2px;
  padding:10px 12px;
  border-radius:10px;
  background:#ffecec;
  color:#9b1c1c;
  font-size:14px;
  border:1px solid #f5c2c2;
}

/* ===== FOOTER FIJO ===== */
footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:var(--foot-h);
  background:#ffffffee;
  backdrop-filter:saturate(160%) blur(6px);
  border-top:1px solid rgba(8,49,58,.08);
  z-index:1000;
}
.foot-inner{
  width:min(1280px,100% - 48px);
  margin-inline:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-size:14px;
  color:var(--muted);
}
.foot-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.foot-links a{color:inherit;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-logos{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot-logos img{height:38px;object-fit:contain}

@media (max-width:740px){
  .card{padding:18px}
  .foot-inner{
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }
}

/* ===== ACCESIBILIDAD ===== */
.visually-hidden{
  position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
}

/* Evitar que el footer fijo tape el registro: solo cuando está abierto */
body.registro-abierto .login-wrap {
  padding-bottom: calc(var(--foot-h) + 40px);
}

/* ====== MENSAJES GENERALES (éxito / error) ====== */
.msg {
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.4;
}
.msg.error {
  background: #ffecec;
  border-color: #f5b5b5;
  color: #a12626;
}
.msg.success {
  background: #e9f9ec;
  border-color: #b8e6bd;
  color: #1b5e20;
}

/* ====== CHECKBOX POLÍTICA ====== */
.field.check {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
}
.checkbox {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text, #333);
}
.checkbox input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 2px;
  accent-color: #1b8ea4; /* color corporativo */
  cursor: pointer;
}
.checkbox a {
  color: #1b8ea4;
  text-decoration: none;
  font-weight: 500;
}
.checkbox a:hover {
  text-decoration: underline;
  color: #146e83; /* un poco más oscuro al pasar el ratón */
}

/* =======================================================
   PÁGINA: acceso-profesionales.php
   ======================================================= */
body.page-gate {
  min-height: 100vh;
  margin: 0;
  background: #f7fbfd url('imagenes/background.png') center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: inherit;
}

/* Caja centrada */
.gate-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
}

.gate-box {
  width: min(960px, 90vw);
  background: rgba(219, 239, 244, 0.95);
  border: 1px solid rgba(27,142,164,.25);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  padding: 22px 28px;
  backdrop-filter: blur(2px);
}

.gate-text {
  color: #27525a;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.actions-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.gate-alert {
  display: none;
  margin: 16px auto 0;
  padding: 10px 14px;
  background: #ffecec;
  border: 1px solid #f5b5b5;
  border-radius: 8px;
  color: #a12626;
  font-size: 14px;
  width: fit-content;
}

/* Footer fijo al fondo */
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
}

/* ================== Admin: usuarios ================== */
body.page-admin-bg{
  min-height:100vh;
  background: #f7fbfd url('/imagenes/background.png') center/cover no-repeat fixed;
  display:flex; flex-direction:column;
}

/* === Ajustes para la tabla de usuarios (admin/usuarios.php) === */
.admin-wrap {
  display: flex;
  align-items: center;            /* centra verticalmente */
  justify-content: center;        /* centra horizontalmente */
  min-height: calc(100vh - 180px); /* deja hueco para header y footer */
  padding: 20px;
}
.admin-card {
  width: 100%;
  max-width: 2400px;              /* ancho máximo opcional */
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 20px;
}

/* La tabla debe ocupar todo el ancho */
.table-scroll {
  overflow-x: auto;
  width: 100%;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.admin-table th, .admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e1e1e1;
  text-align: left;
}
.admin-table th {
  background: #eaf5f7;
  font-weight: 600;
}
.admin-table tr:nth-child(even) td {
  background: #fafafa;
}
.admin-table .row-actions {
  display: flex;
  gap: 6px;
}

/* Botones pequeños */
.btn-xs {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
}

/* Pastillas de estado */
.pill.ok {
  background: #d5f5d1;
  color: #157015;
  padding: 2px 8px;
  border-radius: 6px;
}
.pill.warn {
  background: #fff3cd;
  color: #856404;
  padding: 2px 8px;
  border-radius: 6px;
}

.mono{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

.btn-secondary{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  background:var(--btn-logout);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 8px 16px rgba(27,142,164,.25);
  transition:transform .06s ease,filter .2s ease,background .2s;
  text-decoration:none;
}
.btn-secondary:hover{background:var(--brand-2)}

/* ===== Submenú de Administración en desktop ===== */
.nav .nav-item.has-submenu { position: relative; }
.nav .nav-item.has-submenu > .nav-link { display: inline-flex; align-items: center; gap: 6px; }
.nav .nav-item .chev { font-size: 11px; opacity: .8; }
.nav .nav-item .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #dcecef;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 8px;
  display: none;
  z-index: 50;
}
.nav .nav-item .submenu li { list-style: none; }
.nav .nav-item .submenu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: #174b54;
  text-decoration: none;
  white-space: nowrap;
}
.nav .nav-item .submenu a:hover { background: #eef7f9; }

/* Mostrar el submenu con hover/focus (accesible con teclado) */
.nav .nav-item.has-submenu:hover .submenu,
.nav .nav-item.has-submenu:focus-within .submenu { display: block; }

/* ===== Menú móvil: subtítulos y sublinks ===== */
#menu-movil .nav-section {
  display: block;
  margin: 10px 0 4px;
  font-weight: 600;
  color: #174b54;
  opacity: .9;
}
#menu-movil .nav-sublink {
  padding-left: 14px;
  color: #1b5f6b;
}

/* Asegura que la tarjeta no tenga márgenes raros */
body.page-admin-bg main.admin-wrap.vcenter > .admin-card{
  margin: 0 auto;
  max-width: 100%;
}

/* ===== Fondo tipo "contacto" para páginas públicas ===== */
body.has-site-bg{
  background: #f7fbfd url('/imagenes/background.png') center/cover no-repeat fixed;
}

body.page-admin-bg .admin-wrap{
  min-height: auto !important;          /* libera la altura fija anterior */
}
body.page-admin-bg main{
  padding-bottom: calc(var(--foot-h) + 32px); /* colchón real antes del footer */
  box-sizing: border-box;
}

/* =========================
   FIX MOVIL: header/footer y hamburguesa
   ========================= */
:root{
  --nav-h: 64px;
  --foot-h: 80px;
}
/* En móvil el header y footer suelen ser algo más compactos */
@media (max-width: 900px){
  :root{
    --nav-h: 56px;
    --foot-h: 72px;
  }
}
/* Deja hueco real solo para el footer en TODAS las páginas */
html, body { min-height: 100%; }
body{
  /* No forzamos padding-top (puede no haber topbar) */
  padding-bottom: calc(var(--foot-h) + env(safe-area-inset-bottom, 0px)) !important;
}
/* Asegura stacking correcto */
.topbar{ position: fixed; z-index: 1100; }
footer { position: fixed; z-index: 900; }

/* ====== Hamburguesa visible en móvil ====== */
.burger{ display: none; }           /* oculta en desktop */
@media (max-width: 900px){
  .nav{ display: none !important; } /* oculta menú horizontal */
  .burger{
    display: inline-block !important;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(8,49,58,.14);
    background: #fff;
  }

  /* checkbox oculto pero accesible */
  #nav-toggle{
    position: absolute;
    width:1px; height:1px; overflow:hidden;
    clip: rect(0 0 0 0);
  }

  /* Panel móvil: ocupa la pantalla sin tapar footer */
  .nav-panel{
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(8,49,58,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    /* Altura visible sin invadir el footer fijo */
    max-height: calc(100vh - var(--nav-h) - var(--foot-h));
    overflow: auto;
    z-index: 1050;
  }
  #nav-toggle:checked ~ .nav-panel{ display: block; }

  /* Animación del icono */
  .burger span,
  .burger::before,
  .burger::after{
    content:"";
    position:absolute; left:10px; right:10px;
    height:2px; background:#08313a;
    transition:transform .2s ease,opacity .2s ease,top .2s ease;
  }
  .burger span{ top:50%; transform:translateY(-50%); }
  .burger::before{ top:14px; }
  .burger::after { top:28px; }

  #nav-toggle:checked + label.burger::before{ top:22px; transform:rotate(45deg); }
  #nav-toggle:checked + label.burger span{ opacity:0; }
  #nav-toggle:checked + label.burger::after{ top:22px; transform:rotate(-45deg); }
}

/* ====== Contenedores “admin” centrados que no queden tapados ====== */
body.page-admin-bg .admin-wrap{
  min-height: calc(100vh - var(--nav-h) - var(--foot-h) - 24px);
  padding: 20px 16px;
}

/* Ocultar footer en móvil y quitar el hueco reservado */
@media (max-width: 900px){
  footer{
    display: none !important;
  }
  body{
    padding-bottom: 0 !important;
  }
  main,
  .admin-wrap,
  .login-wrap {
    padding-bottom: 16px !important; /* un pequeño respiro final */
  }
}

/* ===== FIX GAP EN MÓVIL (debajo del header) ===== */
@media (max-width: 900px){
  /* No forzamos padding-top en móvil: puede no haber topbar */
  .header-banner{ margin-top: 0 !important; }
  main, .admin-wrap, .login-wrap { margin-top: 0 !important; }

  /* Si hay topbar, el hueco lo aporta esta relación de hermanos */
  .topbar + .header-banner,
  .topbar ~ .header-banner{
    margin-top: var(--nav-h) !important;
  }
}
/* === Quitar hueco bajo el header cuando hay .topbar === */
.topbar + .header-banner,
.topbar ~ .header-banner{
  margin-top: 0 !important;  /* antes: var(--nav-h) */
}

/* Por si algún layout añadió margen arriba al main */
.topbar + main{ margin-top: 0 !important; }