/* =========================
   VARIABLES
========================= */
:root{
  --primary:#334155;
  --primary-hover:#1e293b;
  --bg:#f1f5f9;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --accent:#334155;
  --accent-soft:#f1f5f9;
}

/* =========================
   BASE
========================= */
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
}

/* Normalizar textos */
p, li, td, span{
  font-weight:400;
}

strong, b{
  font-weight:600;
}

h1,h2,h3,h4,h5,h6{
  font-weight:600;
}

/* =========================
   HEADER ULTRA COMPACTO
========================= */
.container-header{
  background: var(--primary);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

/* ALTURA MÍNIMA */
.container-header .grid-child{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:4px 0;
}

/* LOGO */
.container-header .navbar-brand{
  color:#fff;
  font-weight:600;
  font-size:17px;
  padding:2px 0;
}

/* =========================
   MENU ULTRA COMPACTO
========================= */
.container-header .mod-menu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1px;
  margin:0;
  padding:0;
  flex-wrap:nowrap;
}

/* ITEMS */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > span{
  color:#ffffff;
  font-weight:500;
  font-size:14px;          /* antes 13px */
  padding:4px 5px;         /* compensado para que no se ensanche */
  border-radius:6px;
  white-space:nowrap;
  line-height:1;
  transition:all 0.2s ease;
  letter-spacing:-0.15px;
}

/* ICONOS */
.container-header .mod-menu > li > a::before,
.container-header .mod-menu > li > button::before,
.container-header .mod-menu > li > span::before{
  margin-right:3px;
  font-size:9px;
  line-height:1;
  vertical-align:middle;
}

/* ICONOS POR POSICIÓN */
.container-header .mod-menu > li:nth-child(1) > a::before { content:"🏠"; }
.container-header .mod-menu > li:nth-child(2) > a::before { content:"📞"; }
.container-header .mod-menu > li:nth-child(3) > a::before { content:"🏦"; }
.container-header .mod-menu > li:nth-child(4) > a::before { content:"⚡"; }
.container-header .mod-menu > li:nth-child(5) > a::before { content:"📰"; }
.container-header .mod-menu > li:nth-child(6) > a::before { content:"💻"; }
.container-header .mod-menu > li:nth-child(7) > a::before { content:"🍽️"; }
.container-header .mod-menu > li:nth-child(8) > a::before { content:"✈️"; }

/* HOVER */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a{
  background: rgba(255,255,255,0.12);
}

/* BOTON MOVIL */
.container-header .navbar-toggler{
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.25);
  padding:3px 6px;
}

/* =========================
   CONTENIDO
========================= */
.site-grid{
  padding-top:8px;
}

/* =========================
   TARJETAS
========================= */
.rcs-card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(15, 23, 42, 0.04);
  transition:0.2s ease;
}

.rcs-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 25px rgba(15, 23, 42, 0.08);
}

/* =========================
   TITULOS
========================= */
.rcs-card-title{
  font-size:16px;
  font-weight:600;
}

.rcs-card-subtitle{
  font-size:12px;
  color:var(--muted);
}

/* =========================
   ENLACES (ESTILO STRONG)
========================= */
.rcs-links a{
  font-weight:600;
  font-size:13.5px;
  padding:9px 16px;
  display:block;
  text-decoration:none;
  border-left:3px solid transparent;
}

.rcs-links a span{
  font-weight:400;
  font-size:12px;
  color:var(--muted);
}

.rcs-links a:hover{
  background:#f1f5f9;
  border-left-color:var(--primary);
  color:var(--primary);
}

/* =========================
   BUSCADOR / CHIPS
========================= */
.rcs-search{
  padding:10px 12px;
}

.rcs-search input{
  font-size:13.5px;
}

.rcs-chip{
  font-size:12px;
  padding:7px 11px;
}

.rcs-chip:hover{
  background:#e2e8f0;
}

/* =========================
   LISTAS Y TABLAS
========================= */
ul{
  padding-left:18px;
}

li{
  margin:6px 0;
  line-height:1.6;
}

td, th{
  padding:8px;
  border-bottom:1px solid var(--line);
}

/* =========================
   BLOQUES
========================= */
.rcs-notice{
  background:#ffffff;
  border-left:4px solid var(--primary);
  padding:12px 16px;
  border-radius:12px;
  color:var(--muted);
}

/* =========================
   IFRAME
========================= */
.rcs-tv-box{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
}

/* =========================
   FOOTER
========================= */
.container-footer{
  color: var(--muted);
  font-size:13px;
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:15px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px){

  .container-header .mod-menu{
    gap:1px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button,
  .container-header .mod-menu > li > span{
    font-size:12.5px;
    padding:4px 4px;
    letter-spacing:-0.1px;
  }

  .container-header .mod-menu > li > a::before,
  .container-header .mod-menu > li > button::before,
  .container-header .mod-menu > li > span::before{
    font-size:8px;
    margin-right:3px;
  }

}