/* Ruta de Escapistas - sistema visual */

:root{
  color-scheme: dark;
  --bg: #101315;
  --bg-soft: #161b1f;
  --surface: #1d2327;
  --surface-2: #252d32;
  --surface-3: #303940;
  --text: #f4f7f8;
  --text-dim: #b6c1c7;
  --text-muted: #87949b;
  --accent: #c8943f;
  --accent-hover: #dfaa54;
  --accent-soft: rgba(200,148,63,0.16);
  --gold: #d7a84f;
  --gold-soft: rgba(215,168,79,0.15);
  --ok: #58c487;
  --ok-soft: rgba(88,196,135,0.13);
  --danger: #ff7d65;
  --danger-soft: rgba(255,125,101,0.12);
  --border: rgba(232,246,248,0.12);
  --border-strong: rgba(232,246,248,0.22);
  --shadow: 0 20px 60px rgba(0,0,0,0.28);
  --radius: 8px;
}

*{ box-sizing: border-box; }

html{ min-height:100%; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(200,148,63,0.14), transparent 34rem),
    linear-gradient(140deg, #101315 0%, #12191d 48%, #101412 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

body.con-marca-agua::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--marca-agua-url);
  background-repeat:no-repeat;
  background-position:center 54%;
  background-size:min(620px, 70vw);
  opacity:.018;
  filter:grayscale(1) contrast(.9);
  mix-blend-mode:screen;
}

body.con-marca-agua::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:rgba(16,19,21,.28);
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-hover); text-decoration: underline; }
img{ max-width: 100%; height: auto; }

.site-shell{
  position:relative;
  z-index:1;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}

.cabecera{
  position:relative;
  z-index:5;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(12,15,17,0.78);
  backdrop-filter: blur(16px);
}

.cabecera-inner{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
  min-height:78px;
  padding: 12px 0;
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items:center;
  gap:20px;
}

.cabecera-home{
  border-bottom:0;
  background: linear-gradient(180deg, rgba(12,15,17,0.88), rgba(12,15,17,0));
  backdrop-filter:none;
}

.cabecera-home .cabecera-inner{
  min-height:86px;
  padding-top:18px;
  padding-bottom:4px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color: var(--text);
  text-decoration:none;
  min-width:0;
  justify-self:start;
}

.brand:hover{ text-decoration:none; color:var(--text); }

.brand-mark{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, var(--accent), #6e4630);
  color:#fff;
  font-weight:800;
  letter-spacing:0;
  box-shadow: 0 10px 26px rgba(200,148,63,0.22);
}

.brand-logo-frame{
  width:260px;
  height:34px;
  display:block;
  align-items:center;
  justify-content:center;
  flex:0 0 260px;
  overflow:hidden;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.cabecera-home .brand-logo-frame{
  width:280px;
  height:36px;
  flex-basis:280px;
}

.brand-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}

.brand-name{
  display:block;
  font-size:17px;
  line-height:1.1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.logos-empresas{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  justify-self:center;
  margin-left:0;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:999px;
  background:rgba(255,255,255,0.025);
}

.logos-empresas img{
  display:block;
  width:auto;
  max-width:86px;
  height:26px;
  object-fit:contain;
  opacity:.86;
  filter:saturate(.95);
}

.logos-empresas .logo-empresa-exit{
  max-width:300px;
  height:70px;
}

.logos-empresas .logo-empresa-kross{
  max-width:76px;
  height:21px;
}

.logos-empresas img:hover{
  opacity:1;
}

.brand-kicker{
  display:block;
  color: var(--text-dim);
  font-size:12.5px;
  margin-top:4px;
}

.page-title{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  justify-self:end;
}

.page-label{
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.12em;
}

h1.titulo-ruta{
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  margin:0;
  color:var(--text);
}

.contenedor{
  width:min(860px, calc(100% - 32px));
  margin:0 auto;
  padding: 34px 0 72px;
  flex:1;
}

.contenedor.ancho{ width:min(1120px, calc(100% - 32px)); }

.site-footer{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
  padding: 22px 0 30px;
  color:var(--text-muted);
  border-top:1px solid var(--border);
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:center;
  min-height:auto;
  padding:44px 0 28px;
}

.hero-copy{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.hero-copy h2{
  font-size: clamp(38px, 5vw, 64px);
  line-height:1;
  letter-spacing:0;
  margin:8px 0 16px;
}

.hero-copy p{
  color:var(--text-dim);
  font-size:18px;
  max-width:52ch;
  margin:0 auto 24px;
}

.hero-actions,
.acciones,
.toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.hero-actions{ justify-content:center; }

.toolbar{
  justify-content:flex-end;
  margin-bottom:18px;
}

.toolbar .identidad{
  color:var(--text-dim);
  font-size:13px;
}

.hero-panel{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(37,45,50,.94), rgba(29,35,39,.94));
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}

.hero-visual{
  position:relative;
  display:block;
  min-height:0;
  margin:6px auto 0;
  width:min(1120px, 100%);
}

.hero-visual img{
  width:min(1080px, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.36));
}

.hero-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.hero-steps li{
  display:grid;
  grid-template-columns: 36px 1fr;
  gap:12px;
  align-items:start;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

.hero-steps li:last-child{ border-bottom:0; padding-bottom:0; }

.step-number{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid rgba(200,148,63,.36);
  color:var(--accent-hover);
  font-weight:800;
}

.step-title{ display:block; font-weight:800; }
.step-text{ color:var(--text-dim); font-size:13px; }

.page-intro{
  margin-bottom:22px;
  padding:28px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(200,148,63,0.12), rgba(37,45,50,0.72));
}

.page-intro.compacto-intro{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.page-intro h2{
  margin:0;
  font-size:clamp(26px, 4vw, 42px);
  line-height:1.05;
}

.page-intro p{
  max-width:70ch;
  margin:6px 0 0;
  color:var(--text-dim);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  color:var(--gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.public-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:10px;
  margin-bottom:18px;
}

.accion-publica{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px;
}

.accion-publica .boton{
  width:100%;
}

.admin-hub{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.hub-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  background:rgba(29,35,39,.94);
  box-shadow:0 14px 34px rgba(0,0,0,0.18);
}

.hub-card:hover{
  color:var(--text);
  text-decoration:none;
  border-color:rgba(200,148,63,.44);
  transform:translateY(-1px);
}

.hub-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid rgba(200,148,63,.36);
  color:var(--accent-hover);
  font-weight:900;
}

.hub-card strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}

.hub-card small{
  display:block;
  color:var(--text-dim);
  font-size:13px;
  line-height:1.45;
}

.panel-nav{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding:10px;
  margin-bottom:18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(16,19,21,0.88);
  backdrop-filter:blur(18px);
}

.panel-nav a{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:6px;
  color:var(--text-dim);
  background:rgba(255,255,255,0.03);
  border:1px solid transparent;
  font-size:13px;
  font-weight:800;
}

.panel-nav a:hover{
  color:var(--text);
  text-decoration:none;
  border-color:var(--border-strong);
}

.tarjeta{
  background: rgba(29,35,39,0.94);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding: 26px;
  margin-bottom:18px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.tarjeta h2{
  margin:0 0 14px;
  font-size:19px;
  line-height:1.25;
  font-weight:800;
}

.tarjeta h3{
  color:var(--text);
  font-size:15px;
  font-weight:800;
  margin:20px 0 10px;
}

.section-header{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

.section-header h2{
  margin:0;
}

.section-header + p{
  margin-top:0;
}

.texto-dim{ color:var(--text-dim); }
.texto-pequeno{ font-size:13px; }
.texto-centro{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }

.confirmacion{
  text-align:center;
  padding:42px 30px;
}

.icono-ok{
  width:66px;
  height:66px;
  border-radius:50%;
  background:var(--ok-soft);
  border:1.5px solid var(--ok);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  font-size:30px;
  color:var(--ok);
  font-weight:800;
}

.sello-destacado{
  width:84px;
  height:84px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 20px;
  display:block;
  border:2px solid rgba(88,196,135,0.45);
}

.lector-qr{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-2);
}

label{
  display:block;
  margin:14px 0 6px;
  font-size:13px;
  font-weight:700;
  color:var(--text-dim);
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=file],
textarea,
select{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 13px;
  border-radius:6px;
  font-size:15px;
  font-family:inherit;
}

input[type=file]{ color:var(--text-dim); font-size:13px; }

textarea{ min-height:130px; resize:vertical; }

select{
  padding-right:38px;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23b8aca0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:rgba(200,148,63,.78);
  box-shadow:0 0 0 3px rgba(200,148,63,.16);
}

button,
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  margin-top:18px;
  background:var(--accent);
  color:#fff;
  border:1px solid transparent;
  padding:10px 18px;
  border-radius:6px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
}

button:hover,
.boton:hover{
  background:var(--accent-hover);
  color:#fff;
  text-decoration:none;
}

button.secundario,
.boton.secundario{
  background:rgba(255,255,255,0.03);
  border-color:var(--border-strong);
  color:var(--text-dim);
}

button.secundario:hover,
.boton.secundario:hover{
  background:var(--surface-3);
  color:var(--text);
}

.boton.compacto,
button.compacto{
  min-height:30px;
  margin-top:0;
  padding:4px 10px;
  font-size:12px;
}

.mensaje-ok,
.mensaje-error{
  border-radius:var(--radius);
  padding:12px 14px;
  font-weight:700;
  font-size:14px;
}

.mensaje-ok{
  color:#bdf3d1;
  background:var(--ok-soft);
  border:1px solid rgba(88,196,135,0.28);
}

.mensaje-error{
  color:#ffd3cc;
  background:var(--danger-soft);
  border:1px solid rgba(255,125,101,0.3);
}

.estado-panel{
  width:min(100%, 720px);
  margin:34px auto 72px;
  padding:34px;
  text-align:center;
  background:linear-gradient(180deg, rgba(29,35,39,.96), rgba(20,25,28,.94));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}

.estado-icono{
  width:58px;
  height:58px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#ffd3cc;
  background:rgba(255,125,101,.11);
  border:1px solid rgba(255,125,101,.34);
  font-size:28px;
  line-height:1;
  font-weight:900;
}

.estado-panel .page-label{
  display:block;
  margin-bottom:10px;
}

.estado-panel h2{
  max-width:560px;
  margin:0 auto 12px;
  color:var(--text);
  font-size:clamp(26px, 5vw, 42px);
  line-height:1.08;
  letter-spacing:0;
}

.estado-panel p{
  max-width:560px;
  margin:0 auto;
  color:var(--text-dim);
  font-size:17px;
  line-height:1.55;
}

.estado-acciones{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.estado-acciones .boton{
  margin-top:0;
}

.estado-ayuda{
  margin-top:18px !important;
  font-size:13px !important;
  color:var(--muted) !important;
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap:10px;
}

.stat{
  background:linear-gradient(180deg, rgba(48,57,64,.86), rgba(37,45,50,.86));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

.stat strong{
  display:block;
  font-size:26px;
  line-height:1;
}

.stat span{
  display:block;
  margin-top:6px;
  color:var(--text-dim);
  font-size:12px;
}

.lista-salas{
  list-style:none;
  padding:0;
  margin:0;
}

.lista-salas li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:13px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
}

.lista-salas li:last-child{ border-bottom:none; }

.lista-salas .detalle{
  color:var(--text-dim);
  font-size:12px;
}

.fila-apilada{
  flex-direction:column;
  align-items:stretch !important;
  gap:12px !important;
  padding:16px 0 !important;
}

.fila-flex,
.form-inline{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.fila-flex{ justify-content:space-between; }
.form-inline input,
.form-inline select{ width:auto; flex:1 1 180px; }

.sala-mini{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.sello-mini{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  flex:0 0 auto;
}

.empresa-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  padding:5px 10px;
  border-radius:999px;
  font-weight:800;
  border:1px solid var(--border);
  color:var(--text-dim);
}

.pill.sellada{ color:#bdf3d1; border-color:rgba(88,196,135,.36); background:var(--ok-soft); }
.pill.pendiente{ color:var(--text-dim); background:rgba(255,255,255,.03); }

.pasaporte-panel{
  background:rgba(29,35,39,.94);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.pasaporte-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.pasaporte-top h2{
  margin:5px 0 0;
  font-size:22px;
  line-height:1.2;
}

.pasaporte-acciones{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pasaporte-bloque{
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px;
  background:rgba(255,255,255,.025);
  margin-top:14px;
}

.pasaporte-bloque-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.pasaporte-bloque-header h3{
  margin:0 0 4px;
  color:var(--text);
  font-size:15px;
  line-height:1.25;
}

.pasaporte-bloque-header p{
  margin:0;
}

.pasaporte-bloque-header strong{
  color:var(--gold);
  font-size:24px;
  line-height:1;
}

.pasaporte-progreso{
  background:linear-gradient(180deg, rgba(207,151,55,.08), rgba(255,255,255,.02));
}

.progreso-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color:var(--text-dim);
}

.progreso-bar{
  background:var(--surface-2);
  border-radius:999px;
  height:10px;
  overflow:hidden;
  border:1px solid var(--border);
  margin:10px 0 24px;
}

.progreso-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--gold));
}

.camino{
  position:relative;
  padding:26px 0 12px;
}

.camino-nodo{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.camino-mapa{
  min-height:285px;
  margin-top:18px;
}

.camino-trazo{
  position:absolute;
  inset:34px 5% auto;
  width:90%;
  height:190px;
  overflow:visible;
  z-index:0;
}

.camino-trazo path{
  fill:none;
  stroke:rgba(200,148,63,.36);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:12 14;
  filter:drop-shadow(0 0 10px rgba(200,148,63,.16));
}

.camino-mapa .camino-nodo{
  position:absolute;
  width:150px;
  transform:translate(-50%, -50%);
}

.camino-mapa .camino-nodo:nth-of-type(1){ left:8%; top:62%; }
.camino-mapa .camino-nodo:nth-of-type(2){ left:31%; top:28%; }
.camino-mapa .camino-nodo:nth-of-type(3){ left:58%; top:60%; }
.camino-mapa .camino-nodo:nth-of-type(4){ left:84%; top:34%; }
.camino-mapa .camino-nodo:nth-of-type(5){ left:50%; top:22%; }
.camino-mapa .camino-nodo:nth-of-type(n+6){
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  display:inline-flex;
  margin:18px 12px 0;
}

.camino-circulo{
  width:78px;
  height:78px;
  border-radius:50%;
  background:var(--surface-2);
  border:3px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}

.camino-circulo img{ width:100%; height:100%; object-fit:cover; }

.camino-circulo.completo{
  border-color:var(--ok);
  box-shadow:0 0 0 5px rgba(88,196,135,0.14);
}

.camino-circulo.pendiente img{ opacity:.18; filter:grayscale(1); }

.marcador-vacio{
  width:15px;
  height:15px;
  border-radius:50%;
  border:2px dashed var(--text-dim);
}

.camino-nombre{
  margin-top:9px;
  font-size:12.5px;
  color:var(--text-dim);
  max-width:120px;
}

.camino-nombre.completo{ color:var(--text); font-weight:800; }

.pasaporte-ruta-visual{
  position:relative;
  width:min(360px, 100%);
  margin:22px auto 6px;
}

.pasaporte-ruta-img{
  display:block;
  width:100%;
  height:auto;
}

.ruta-sello-slot{
  position:absolute;
  width:20%;
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ruta-sello-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.ruta-sello-slot.completo{
  box-shadow:0 0 0 3px rgba(88,196,135,.45), 0 10px 24px rgba(0,0,0,.28);
}

.ruta-sello-slot.pendiente{
  opacity:.9;
}

.ruta-sello-slot-1{ left:63.2%; top:10.2%; }
.ruta-sello-slot-2{ left:35.4%; top:32.6%; }
.ruta-sello-slot-3{ left:65.3%; top:55.7%; }
.ruta-sello-slot-4{ left:36.8%; top:78.7%; }

.salas-pendientes{
  margin-top:14px;
}

.salas-pendientes .section-header{
  margin-bottom:14px;
  padding-bottom:14px;
}

.frase-motivadora{
  margin:12px 0 0;
  padding:12px 14px;
  border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;
  color:var(--text);
  background:rgba(207,151,55,.08);
  font-size:14px;
  font-weight:750;
  line-height:1.45;
}

.salas-pendientes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.sala-pendiente-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.025);
}

.sala-pendiente-info{
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
}

.sala-pendiente-info strong,
.sala-pendiente-info small{
  display:block;
}

.sala-pendiente-info strong{
  color:var(--text);
  font-size:14px;
  line-height:1.25;
}

.sala-pendiente-info small{
  color:var(--text-muted);
  font-size:12px;
  margin-top:2px;
}

.perfil-ajustes{
  background:rgba(255,255,255,.018);
}

.perfil-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.check-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(0,0,0,.12);
  color:var(--text-dim);
  font-size:13px;
  line-height:1.4;
}

.check-line input{
  width:auto;
  margin-top:2px;
  accent-color:var(--accent);
  flex:0 0 auto;
}

.modal-ajustes{
  width:min(640px, calc(100% - 28px));
  max-height:min(86vh, 780px);
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--text);
  overflow:visible;
}

.modal-ajustes::backdrop{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
}

.modal-card{
  max-height:min(86vh, 780px);
  overflow:auto;
  padding:22px;
  border:1px solid var(--border-strong);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(31,38,42,.98), rgba(21,27,30,.98));
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.modal-header h3{
  margin:4px 0 0;
  color:var(--text);
  font-size:20px;
  line-height:1.2;
}

.modal-cerrar{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text-dim);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.modal-cerrar:hover{
  color:var(--text);
  border-color:var(--border-strong);
}

.estado-pendiente{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(207,151,55,.12);
  flex-shrink:0;
}

.ruta-completa-banner{
  text-align:center;
  border:1px solid rgba(88,196,135,0.4);
  background:linear-gradient(180deg, rgba(88,196,135,0.12), rgba(88,196,135,0.05));
  border-radius:var(--radius);
  padding:28px 22px;
  margin-top:24px;
}

.ruta-completa-banner h3{
  color:#bdf3d1;
  font-size:21px;
  margin:0 0 8px;
}

.ruta-completa-banner p{ color:var(--text-dim); font-size:14px; margin-bottom:16px; }
.ruta-completa-banner img{ background:#fff; padding:14px; border-radius:10px; }

.selector-metodo{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-bottom:18px;
}

.boton-metodo{
  margin-top:0;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-dim);
  padding:15px 12px;
  border-radius:var(--radius);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  text-align:center;
}

.boton-metodo.activo{
  border-color:rgba(200,148,63,.72);
  color:var(--text);
  background:var(--accent-soft);
}

.qr-caja{
  text-align:center;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.qr-caja img{
  background:#fff;
  padding:10px;
  border-radius:8px;
  margin-top:10px;
}

.aviso-pie{
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  margin-top:20px;
}

@media (max-width: 760px){
  body.con-marca-agua::before{
    background-size:min(420px, 86vw);
    background-position:center 58%;
    opacity:.016;
  }
  .cabecera-inner{
    grid-template-columns:1fr;
    min-height:72px;
    align-items:center;
    justify-items:center;
    gap:12px;
  }
  .cabecera-home .cabecera-inner{ min-height:78px; }
  .brand{
    order:1;
    justify-self:center;
  }
  .logos-empresas{
    order:2;
    grid-column:auto;
    width:auto;
    max-width:100%;
    justify-self:center;
    justify-content:center;
    margin:6px auto 0;
    padding:8px 0 0;
    border:0;
    background:transparent;
  }
  .logos-empresas img{
    max-width:74px;
    height:22px;
  }
  .logos-empresas .logo-empresa-exit{
    max-width:90px;
    height:120px;
  }
  .logos-empresas .logo-empresa-kross{
    max-width:66px;
    height:20px;
  }
  .page-title{
    order:3;
    justify-self:center;
    align-items:center;
    text-align:center;
  }
  .hero{ padding:26px 0 22px; }
  .hero-copy h2{ font-size:40px; }
  .hero-copy p{ font-size:16px; }
  .hero-visual{ width:100%; }
  .public-grid,
  .admin-hub{ grid-template-columns:1fr; margin-top:0; }
  .page-intro{ padding:22px; }
  .estado-panel{
    margin:24px auto 58px;
    padding:28px 22px;
  }
  .panel-nav{ position:static; }
  .selector-metodo{ grid-template-columns:1fr; }
  .toolbar{ justify-content:flex-start; }
  .lista-salas li{ align-items:flex-start; flex-direction:column; }
  .fila-flex{ align-items:flex-start; }
  .form-inline input,
  .form-inline select{ width:100%; flex-basis:100%; }
}

@media (max-width: 480px){
  .contenedor{ width:min(100% - 24px, 860px); padding-bottom:44px; }
  .cabecera-inner{ width:min(100% - 24px, 1120px); padding:10px 0; }
  .tarjeta{ padding:20px 16px; }
  .estado-panel{
    margin:18px auto 48px;
    padding:24px 18px;
    border-radius:12px;
  }
  .estado-icono{
    width:50px;
    height:50px;
    font-size:24px;
  }
  .estado-panel p{
    font-size:15px;
  }
  .estado-acciones{
    gap:10px;
  }
  .estado-acciones .boton{
    width:100%;
  }
  .hero-copy h2{ font-size:34px; }
  .hero-actions .boton{ width:100%; }
  .brand-logo-frame{
    width:218px;
    height:29px;
    flex-basis:218px;
  }
  .cabecera-home .brand-logo-frame{ width:230px; height:30px; flex-basis:230px; }
  .brand-name{ font-size:14px; }
  .brand-kicker{ font-size:11.5px; }
  .logos-empresas{ gap:14px; }
  .logos-empresas img{
    max-width:62px;
    height:19px;
  }
  .logos-empresas .logo-empresa-exit{
    max-width:76px;
    height:60px;
  }
  .logos-empresas .logo-empresa-kross{
    max-width:56px;
    height:17px;
  }
  .page-label{ font-size:9px; }
  h1.titulo-ruta{ font-size:15px; }
  .site-footer{ width:min(100% - 24px, 1120px); }
  .pasaporte-panel{
    padding:16px;
  }
  .pasaporte-top{
    flex-direction:column;
    align-items:stretch;
  }
  .pasaporte-top h2{
    font-size:20px;
  }
  .pasaporte-acciones{
    justify-content:flex-start;
  }
  .pasaporte-acciones .boton{
    width:auto;
    flex:0 0 auto;
  }
  .pasaporte-bloque{
    padding:15px;
    border-radius:8px;
  }
  .pasaporte-bloque-header{
    flex-direction:column;
    gap:8px;
  }
  .pasaporte-bloque-header strong{
    font-size:22px;
  }
  .progreso-meta{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .camino-mapa{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px 14px;
    min-height:0;
    padding:12px 0 4px;
  }
  .camino-trazo{ display:none; }
  .camino-mapa .camino-nodo,
  .camino-mapa .camino-nodo:nth-of-type(n){
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    transform:none;
  }
  .camino-circulo{ width:64px; height:64px; }
  .camino-nombre{ font-size:11.5px; max-width:96px; }
  .salas-pendientes-grid{
    grid-template-columns:1fr;
  }
  .sala-pendiente-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .sala-pendiente-card .boton{
    width:100%;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
  .perfil-form button{
    width:100%;
  }
  .modal-card{
    padding:18px;
  }
  .qr-caja img{ width:100%; max-width:260px; height:auto; }
}

.pendientes-sellos{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.pendientes-sellos h3{
  margin:0 0 6px;
}

.sello-pendiente-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.025);
}

.sello-pendiente-info{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.sello-pendiente-info img,
.sello-pendiente-icono{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:50%;
  border:2px solid rgba(200,148,63,.42);
  background:var(--surface-2);
  object-fit:cover;
}

.sello-pendiente-info strong,
.sello-pendiente-info small{
  display:block;
}

.sello-pendiente-info small{
  color:var(--text-dim);
  font-size:12px;
}

.sello-pendiente-card button{
  margin-top:0;
  flex:0 0 auto;
}

@media (max-width: 560px){
  .sello-pendiente-card{
    align-items:stretch;
    flex-direction:column;
  }

  .sello-pendiente-card button{
    width:100%;
  }
}

/* Home profesional: cabecera limpia y salas participantes como apoyo visual. */
.cabecera-home{
  background:linear-gradient(180deg, rgba(12,15,17,.96), rgba(12,15,17,.78));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.cabecera-home .cabecera-inner{
  min-height:auto;
  padding:18px 0 16px;
  grid-template-columns:1fr;
  justify-items:center;
}

.cabecera-home .brand{
  justify-content:center;
}

.cabecera-home .brand-logo{
  object-position:center;
}

.contenedor.ancho{
  padding-top:26px;
}

.hero{
  padding-top:28px;
}

.salas-participantes{
  width:min(720px, 100%);
  margin:0 auto 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.salas-label{
  color:var(--text-muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.logos-empresas-home{
  margin-left:0;
  justify-content:center;
  width:auto;
  max-width:100%;
  padding:9px 18px;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}

@media (max-width: 760px){
  .cabecera-home .cabecera-inner{
    width:min(100% - 28px, 1120px);
    padding:15px 0 12px;
  }

  .cabecera-home .brand-logo-frame{
    width:min(300px, 84vw);
    height:38px;
    flex-basis:auto;
  }

  .contenedor.ancho{
    padding-top:10px;
  }

  .hero{
    padding:16px 0 20px;
    gap:18px;
  }

  .hero-visual{
    overflow:visible;
  }

  .hero-visual img{
    width:106%;
    max-width:none;
    margin-left:-3%;
  }

  .salas-participantes{
    margin-top:-4px;
    margin-bottom:28px;
  }

  .logos-empresas-home{
    order:initial;
    width:auto;
    justify-content:center;
    margin:0 auto;
    padding:8px 16px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:rgba(255,255,255,.035);
  }
}

@media (max-width: 480px){
  .cabecera-home .cabecera-inner{
    padding:14px 0 11px;
  }

  .cabecera-home .brand-logo-frame{
    width:min(292px, 86vw);
    height:37px;
    flex-basis:auto;
  }

  .contenedor.ancho{
    padding-top:6px;
  }

  .hero{
    padding-top:12px;
  }

  .salas-participantes{
    gap:9px;
  }

  .logos-empresas-home{
    padding:7px 14px;
  }
}

/* Panel de empresa: secciones principales plegables */
.tarjeta.panel-seccion{
  padding:0;
  overflow:hidden;
  scroll-margin-top:18px;
}

.panel-seccion-cabecera{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  min-height:82px;
  padding:18px 64px 18px 24px;
  cursor:pointer;
  list-style:none;
  transition:background-color .18s ease;
}

.panel-seccion-cabecera::-webkit-details-marker{
  display:none;
}

.panel-seccion-cabecera::after{
  content:"›";
  position:absolute;
  right:24px;
  top:50%;
  color:var(--text-muted);
  font-size:30px;
  font-weight:300;
  line-height:1;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .18s ease, color .18s ease;
}

.panel-seccion[open] > .panel-seccion-cabecera::after{
  color:var(--accent);
  transform:translateY(-50%) rotate(90deg);
}

.panel-seccion-cabecera:hover{
  background:rgba(255,255,255,.025);
}

.panel-seccion-titulo{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  gap:4px;
}

.panel-seccion-titulo .eyebrow{
  margin:0;
}

.panel-seccion-titulo strong{
  color:var(--text);
  font-size:18px;
  line-height:1.25;
}

.panel-seccion-estado{
  flex:0 0 auto;
  padding:5px 9px;
  color:var(--text-dim);
  background:rgba(255,255,255,.035);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.panel-seccion-contenido{
  padding:22px 24px 24px;
  border-top:1px solid var(--border);
}

.panel-seccion-contenido > :first-child{
  margin-top:0;
}

.panel-seccion-contenido > :last-child{
  margin-bottom:0;
}

/* Panel de empresa: gestión compacta de contraseñas */
.accesos-acordeon{
  margin-top:20px;
  border-top:1px solid var(--border);
}

.acceso-desplegable{
  border-bottom:1px solid var(--border);
}

.acceso-desplegable summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  min-height:72px;
  padding:14px 48px 14px 4px;
  cursor:pointer;
  list-style:none;
  transition:background-color .18s ease;
}

.acceso-desplegable summary::-webkit-details-marker{
  display:none;
}

.acceso-desplegable summary::after{
  content:"+";
  position:absolute;
  right:10px;
  top:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  color:var(--accent);
  border:1px solid var(--border-strong);
  border-radius:50%;
  font-size:20px;
  font-weight:400;
  line-height:1;
}

.acceso-desplegable[open] summary::after{
  content:"−";
}

.acceso-desplegable summary:hover{
  background:rgba(255,255,255,.025);
}

.acceso-resumen{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.acceso-resumen strong{
  color:var(--text);
  font-size:15px;
}

.acceso-resumen small,
.acceso-pie small{
  color:var(--text-muted);
  font-size:12px;
}

.acceso-accion{
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}

.acceso-contenido{
  padding:4px 48px 22px 4px;
}

.form-acceso{
  margin:0;
  padding-top:16px;
  border-top:1px solid rgba(232,246,248,.08);
}

.campos-acceso{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.campos-acceso-empresa{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.campos-acceso label{
  margin:0;
}

.campos-acceso label span{
  display:block;
  margin-bottom:6px;
}

.acceso-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:16px;
}

.acceso-pie button{
  flex:0 0 auto;
}

@media (max-width: 760px){
  .panel-seccion-cabecera{
    min-height:72px;
    padding:15px 48px 15px 16px;
  }

  .panel-seccion-cabecera::after{
    right:16px;
  }

  .panel-seccion-titulo strong{
    font-size:16px;
  }

  .panel-seccion-estado{
    padding:4px 7px;
    font-size:11px;
  }

  .panel-seccion-contenido{
    padding:18px 16px 20px;
  }

  .acceso-desplegable summary{
    min-height:66px;
    padding:12px 42px 12px 2px;
  }

  .acceso-accion{
    display:none;
  }

  .acceso-contenido{
    padding:2px 2px 20px;
  }

  .campos-acceso,
  .campos-acceso-empresa{
    grid-template-columns:1fr;
    gap:10px;
  }

  .acceso-pie{
    align-items:stretch;
    flex-direction:column;
  }

  .acceso-pie button{
    width:100%;
  }
}

@media (max-width: 480px){
  .panel-seccion-estado{
    display:none;
  }
}

/* Directorio plegable del panel de administracion */
.empresa-desplegable{
  padding:0;
  overflow:hidden;
}

.empresa-desplegable-cabecera{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:62px;
  padding:14px 46px 14px 18px;
  cursor:pointer;
  list-style:none;
}

.empresa-desplegable-cabecera::-webkit-details-marker{
  display:none;
}

.empresa-desplegable-cabecera::after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  color:var(--accent);
  font-size:22px;
  font-weight:400;
  line-height:1;
  transform:translateY(-50%);
}

.empresa-desplegable[open] > .empresa-desplegable-cabecera::after{
  content:"-";
}

.empresa-desplegable-cabecera:hover{
  background:rgba(255,255,255,.025);
}

.empresa-desplegable-nombre{
  min-width:0;
  color:var(--text);
  font-weight:800;
}

.empresa-desplegable-cabecera .detalle{
  flex:0 1 auto;
  text-align:right;
}

.empresa-desplegable-contenido{
  padding:16px 18px 18px;
  border-top:1px solid var(--border);
}

@media (max-width: 760px){
  .empresa-desplegable-cabecera{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
    padding:13px 42px 13px 14px;
  }

  .empresa-desplegable-cabecera .detalle{
    text-align:left;
  }

  .empresa-desplegable-contenido{
    padding:14px;
  }
}

/* Buscadores y paginacion del panel de administracion */
#localidades [hidden],
#empresas [hidden]{
  display:none !important;
}

.filtro-lista-etiqueta,
.form-buscador-admin label{
  margin:0 0 6px;
}

.filtro-lista,
.form-buscador-admin input[type=search]{
  width:100%;
  min-width:0;
  padding:10px 12px;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  font:inherit;
}

.filtro-lista{
  margin-bottom:16px;
}

.filtro-lista:focus,
.form-buscador-admin input[type=search]:focus{
  outline:none;
  border-color:rgba(200,148,63,.78);
  box-shadow:0 0 0 3px rgba(200,148,63,.16);
}

.form-buscador-admin{
  margin-bottom:20px;
}

.form-buscador-admin .fila-flex{
  justify-content:flex-start;
}

.form-buscador-admin input[type=search]{
  flex:1 1 260px;
}

.paginacion-admin{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
  color:var(--text-dim);
  font-size:13px;
}

@media (max-width: 480px){
  .form-buscador-admin .fila-flex > *{
    width:100%;
  }

  .paginacion-admin{
    justify-content:center;
  }
}