/* ==========================================================================
   layout.css — Panel (Refinado tipográfico y visual)
   ========================================================================== */

/* ==========================================================================
   1) Variables
   ========================================================================== */
:root{
  --panel-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --panel-bg: #f6f7f9;
  --panel-text: #111;
  --panel-muted: #6b6b6b;

  --panel-border: rgba(0,0,0,.08);

  --panel-header-bg: #2b2b2b;
  --panel-header-bg-2: #1b1b1b;

  --panel-header-text: rgba(255,255,255,.88);
  --panel-header-dim: rgba(255,255,255,.68);

  --panel-hover: rgba(255,255,255,.08);
  --panel-active: rgba(255,255,255,.14);
  --panel-outline: rgba(255,255,255,.22);

  --panel-accent: #00a651;

  --panel-shadow: 0 10px 26px rgba(0,0,0,.22);

  --panel-header-h: 56px;
  --panel-footer-h: 60px;

  --radius-8: 8px;
  --radius-10: 10px;
}

/* ==========================================================================
   2) Base
   ========================================================================== */
html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--panel-font);
  color: var(--panel-text);
  background: var(--panel-bg);

  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; }

header.bd-navbar::after{ content:none !important; }

/* ==========================================================================
   3) Contenedores
   ========================================================================== */
.container-panel-control{
  min-height: calc(100vh - var(--panel-header-h) - var(--panel-footer-h));
  padding-bottom: 28px;
}

.contenedor{
  max-width: 1250px;
  margin: 0 auto;
  padding: 26px 22px;
}

/* Títulos: más elegantes, menos bloque */
h1{
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
}
h2{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.2px;
}
h3{
  font-size: 17px;
  font-weight: 600;
}

/* ==========================================================================
   4) HEADER / NAVBAR
   ========================================================================== */
.bd-navbar{
  position: sticky;
  top:0;
  z-index:1030;
  background: linear-gradient(to bottom, var(--panel-header-bg), var(--panel-header-bg-2));
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Ajuste vertical */
.bd-navbar .container-xxl{
  min-height: var(--panel-header-h);
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Marca */
.bd-navbar .navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;

  color:#fff !important;
  font-weight:700;
  font-size:15px;
  letter-spacing:.3px;
  text-decoration:none !important;
}

.bd-navbar .navbar-brand i{
  font-size:15px;
  opacity:.9;
}

/* Botón móvil */
.bd-navbar .navbar-toggler{
  border:1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-8);
}
.bd-navbar .navbar-toggler i{ color:#fff; }

/* ==========================================================================
   5) Menú principal (AFINADO)
   ========================================================================== */
.bd-navbar .navbar-nav{
  align-items:center;
}

/* Links */
.bd-navbar .navbar-nav .nav-link{
  position:relative;

  color: var(--panel-header-text) !important;
  text-decoration:none !important;

  font-size: 13px;
  font-weight: 500;             /* 👈 CLAVE: ya no es “gordo” */
  letter-spacing: .2px;

  padding: .55rem .65rem !important;
  border-radius: var(--radius-8);

  transition: 
    color .15s ease,
    background-color .15s ease;
}

/* Hover suave */
.bd-navbar .navbar-nav .nav-link:hover{
  color:#fff !important;
  background: var(--panel-hover);
}

/* Activo */
.bd-navbar .navbar-nav .nav-link.is-active{
  color:#fff !important;
  background: var(--panel-active);
}

/* Subrayado fino (no bloque) */
.bd-navbar .navbar-nav .nav-link.is-active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:5px;
  height:2px;
  background: rgba(255,255,255,.85);
  border-radius:2px;
}

/* Dropdown abierto */
.bd-navbar .nav-item.show > .nav-link{
  background: var(--panel-active);
}

/* Padre activo (Contenidos / Ajustes) */
.bd-navbar .nav-link.is-active-parent{
  background: rgba(255,255,255,.10);
}

/* Badge contador */
.count-bol{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:20px;
  height:20px;
  padding:0 6px;

  margin-left:6px;

  font-size:11px;
  font-weight:700;

  border-radius:999px;
  background: var(--panel-accent);
  color:#fff;
}

/* Espaciado horizontal más compacto */
.bd-navbar .bd-navbar-nav{
  gap: 3px;
}

/* ==========================================================================
   6) Dropdowns (DESKTOP)
   ========================================================================== */
.bd-navbar .dropdown-menu{
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:10px;
  padding:6px;
  margin-top:10px;
  box-shadow: var(--panel-shadow);
  min-width:230px;
}

.bd-navbar .dropdown-item{
  font-size:13px;
  font-weight:500;
  color:#111 !important;

  padding:9px 11px;
  border-radius:8px;
}

.bd-navbar .dropdown-item:hover{
  background:#f2f2f2;
}

.bd-navbar .dropdown-item.is-active{
  background:#eaeaea;
}

/* Usuario derecha */
.bd-navbar #bd-user,
.bd-navbar #bd-theme{
  font-weight:500;
  font-size:13px;
  color: var(--panel-header-text) !important;
}

/* ==========================================================================
   7) Offcanvas (MÓVIL)
   ========================================================================== */
@media (max-width: 991.98px){

  .bd-navbar .offcanvas-end{
    background: linear-gradient(to bottom, var(--panel-header-bg-2), var(--panel-header-bg));
    color:#fff;
  }

  .bd-navbar .bd-navbar-nav{
    gap:8px;
  }

  .bd-navbar a.nav-link,
  .bd-navbar button.nav-link{
    width:100%;
    padding:12px !important;
    border-radius:10px;
  }

  .bd-navbar .dropdown-menu{
    background: rgba(0,0,0,.15);
    border:1px solid rgba(255,255,255,.15);
  }

  .bd-navbar .dropdown-item{
    color:rgba(255,255,255,.9) !important;
  }
}

/* ==========================================================================
   8) Footer
   ========================================================================== */
.panel-footer,
footer.py-3.my-4{
  background:#333;
  border-top:1px solid rgba(255,255,255,.12);
  padding:16px 0 !important;
}

.panel-footer p,
footer.py-3.my-4 p{
  font-size:12.5px;
  font-weight:400;
  color:rgba(255,255,255,.8) !important;
  margin:0;
}

/* ==========================================================================
   9) Login Page
   ========================================================================== */

/* --- Layout base del archive panel (solo para la página del panel) --- */
body.post-type-archive-panel { height: 100%; margin: 0 !important; }

body.post-type-archive-panel .container-panel-control,
body.post-type-archive-panel .container-panel-control .contenedor{
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.post-type-archive-panel.logged-in .container-panel-control .contenedor{
	max-width: 1200px !important;
	width: auto !important;
	padding: inherit !important;
	margin: auto !important;
}

/* --- Auth wrapper / card --- */
.fz-auth{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 48px 16px;
	background:
		radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
		radial-gradient(900px 500px at 80% 90%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
		#9f0017;
}

.fz-card{
	width: 100%;
	max-width: 600px;
	background:#fff;
	border-radius: 16px;
	box-shadow: 0 22px 60px rgba(0,0,0,.25);
	overflow:hidden;
}

/* --- Header --- */
.fz-head{
	padding: 28px 30px 18px 30px;
	background: #fff3f5;
	border-bottom: 1px solid rgba(0,0,0,.06);
}

.fz-kicker{
	margin:0 0 6px 0;
	letter-spacing:.16em;
	text-transform:uppercase;
	font-weight:800;
	font-size:12px;
	color:#9f0017;
}

.fz-title{
	margin:0;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 900;
	color:#111;
}

.fz-sub{
	margin: 8px 0 0 0;
	color:#333;
	font-size: 15px;
	line-height: 1.45;
}

/* --- Body --- */
.fz-body{
	padding: 22px 30px 10px 30px;
}

/* --- Alerts --- */
.fz-alert{
	display:none;
	margin: 0 0 14px 0;
	border-radius: 12px;
}
.fz-alert.is-show{
	display:block;
	animation: fzPop .14s ease-out;
}
@keyframes fzPop{
	from{ transform: translateY(-3px); opacity:.55; }
	to{ transform: translateY(0); opacity:1; }
}

/* --- Steps --- */
.fz-step{ display:none; }
.fz-step.is-active{ display:block; }

/* --- Acciones (botones home) --- */
.fz-actions{
	display:flex;
	gap: 12px;
	margin: 8px 0 14px 0;
}

.fz-btn{
	flex:1;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.18);
	background: #fff;
	color:#111;
	font-weight: 800;
	padding: 11px 14px;
}

.fz-btn--primary{
	border-color: transparent;
	background: #b1001c;
	color:#fff;
}

/* --- Formularios --- */
.fz-form .form-control{
	border-radius: 12px;
	padding: 10px 12px;
}

/* checkbox row / links row */
.fz-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* CTA principal */
.fz-primary {
    width: auto;
    border: 0;
    border-radius: 7px;
    background: #111;
    color: #fff;
    font-weight: 600;
    padding: 12px 14px;
    margin-top: 10px;
}

/* Links / notas / divider */
.fz-link{
	color:#b1001c;
	text-decoration: none;
	font-weight: 700;
}
.fz-link:hover{ text-decoration: underline; }

.fz-note{
	margin: 10px 0 0 0;
	color:#444;
	font-size: 13px;
}

.fz-divider{
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(0,0,0,.06);
}

/* Focus accesible */
.fz-btn:focus,
.fz-primary:focus,
.fz-link:focus{
	outline: 3px solid rgba(177,0,28,.25);
	outline-offset: 2px;
}

/* --- Honeypot --- */
.fusion-hp{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	opacity:0;
}

/* --- Footer --- */
.fz-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
	padding: 14px 30px;
	border-top: 1px solid rgba(0,0,0,.06);
	background: #fff;
	color:#666;
	font-size: 12px;
}

/* --- Extra UI piezas del registro --- */
.fz-mini-title{
	margin: 0 0 10px 0;
	font-weight: 900;
	color:#111;
	font-size: 16px;
}

.fz-pill{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	border: 1px solid rgba(0,0,0,.14);
	border-radius: 999px;
	padding: 6px 10px;
	font-weight: 800;
	font-size: 12px;
	background:#fff;
}

.fz-helpbox{
	border: 1px solid rgba(0,0,0,.08);
	background: #fafafa;
	border-radius: 12px;
	padding: 12px 12px;
	color:#333;
	font-size: 13px;
	line-height: 1.45;
}

/* Obligatorios (asterisco) */
.fz-required::after{
	content:" *";
	color:#b1001c;
	font-weight:900;
}

/* Password toggle con icono (ojo a la derecha) */
.fz-pass-wrap{
	position:relative;
}
.fz-pass-toggle{
	position:absolute;
	right:10px;
	top:50%;
	transform:translateY(-50%);
	border:0;
	background:transparent;
	color:#666;
	cursor:pointer;
	padding:4px;
	font-size:16px;

	width: 34px;
	height: 34px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.fz-pass-toggle:hover{ color:#111; }
.fz-pass-toggle:focus{
	outline:3px solid rgba(177,0,28,.25);
	border-radius:6px;
}
.fz-pass-wrap input{
	padding-right:40px;
}

/* --- Responsive --- */
@media (max-width: 520px){
	.fz-title{ font-size: 28px; }
	.fz-head, .fz-body, .fz-footer{ padding-left: 18px; padding-right: 18px; }
	.fz-actions{ flex-direction: column; }
}