/* ============================================================
   GUERRERO 108 — custom.css
   Hoja de estilo del template child (Cassiopeia > guerrero108)
   Define TODAS las clases g108-* / btn-g108-* usadas en los
   artículos de Contenido → Artículos. Sube este archivo a:
   templates/guerrero108_child/css/custom.css
   y cárgalo en index.php (ver README.md, sección 2).
   ============================================================ */

:root{
  --carbon:#1C1C1C; --bronze:#A8834A; --bronze-lt:#C9A96E; --bronze-dim:#6B5228;
  --cream:#F7F4EF; --stone:#E8E2D9; --terracota:#B05A3A;
  --text:#2E2E2E; --muted:#6B6560; --r:4px;
  --shadow:0 2px 16px rgba(0,0,0,.08); --t:.25s ease;
  --green:#2D7A2D; --green-bg:#EDF7ED;
  --blue:#2952B3;  --blue-bg:#EEF4FF;
  --gold-bg:#FFF8E7;
}

/* Fuentes: cárgalas en index.php del template (ver README.md sección 2) */
.g108-scope, .g108-scope h1, .g108-scope h2, .g108-scope h3, .g108-scope h4{
  font-family:'Playfair Display', serif; font-weight:700; color:var(--carbon); letter-spacing:-.02em; line-height:1.2;
}

/* ── NOTICE BANNER (franja superior, Inicio) ── */
.g108-notice-banner{
  background:var(--bronze-dim); color:#E8D8BE; font-size:.82rem; font-weight:500;
  letter-spacing:.03em; text-align:center; padding:.7rem 1.2rem; border-radius:var(--r); margin-bottom:1.5rem;
}
.g108-notice-banner a{color:var(--bronze-lt)}

/* ── HERO ── */
.g108-hero{
  position:relative; background:var(--carbon); border-radius:var(--r);
  padding:3.5rem 2.5rem; margin-bottom:2rem; overflow:hidden;
}
.g108-hero-content{position:relative; z-index:2; max-width:640px}
.g108-hero-eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:.75rem;
}
.g108-hero h1{color:var(--cream); font-size:2.4rem; margin-bottom:.75rem}
.g108-hero p{color:#C8C2B8; font-size:1.05rem; margin-bottom:1.5rem; line-height:1.6}

/* ── BOTONES ── */
.btn-g108-primary{
  display:inline-block; background:var(--bronze); color:var(--carbon)!important;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.75rem 1.5rem; border-radius:var(--r); text-decoration:none!important;
  transition:background var(--t);
}
.btn-g108-primary:hover{background:var(--bronze-lt)!important}
.btn-g108-outline{
  display:inline-block; background:transparent; color:var(--cream)!important;
  border:1.5px solid var(--bronze); font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:.7rem 1.4rem; border-radius:var(--r); text-decoration:none!important;
  transition:all var(--t);
}
.btn-g108-outline:hover{background:var(--bronze); color:var(--carbon)!important}
/* Variante clara para usarse fuera de fondos oscuros (p.ej. dentro de g108-card) */
.g108-card .btn-g108-outline, .g108-card + .btn-g108-outline{color:var(--bronze)!important; border-color:var(--bronze)}
.g108-card .btn-g108-outline:hover{background:var(--bronze); color:var(--carbon)!important}

/* ── BADGES ── */
.g108-badge{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:2px; margin-bottom:.75rem;
}
.g108-badge-public{background:var(--green-bg); color:var(--green)}
.g108-badge-private{background:var(--blue-bg); color:var(--blue)}
.g108-badge-vip{background:var(--gold-bg); color:#8A5D00}

/* ── DIVIDER ── */
.g108-divider{border:none; height:1px; background:var(--stone); margin:1.75rem 0}

/* ── GRID Y CARD ── */
.g108-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
@media (max-width:860px){.g108-grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.g108-grid-3{grid-template-columns:1fr}}
.g108-card{
  background:#fff; border:1px solid var(--stone); border-top:3px solid var(--bronze);
  border-radius:var(--r); padding:1.5rem; box-shadow:var(--shadow);
}
.g108-card h3{font-size:1.05rem; margin-bottom:.5rem}
.g108-card p{font-size:.9rem; color:var(--muted); line-height:1.6}

/* ── IMÁGENES ── */
.g108-img{width:100%; border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:.5rem}
.g108-img-caption{font-size:.78rem; color:var(--muted); text-align:center; margin-bottom:1.5rem}

/* ── AVISO DESTACADO (fijado) ── */
.g108-aviso-destacado{
  display:flex; gap:1rem; background:var(--gold-bg); border:1px solid #EAD9A8;
  border-radius:var(--r); padding:1.25rem 1.5rem; margin-bottom:1.5rem;
}
.g108-aviso-destacado .icon{font-size:1.4rem}
.g108-aviso-destacado .badge{
  display:inline-block; background:var(--bronze); color:var(--carbon); font-size:.65rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.15rem .5rem;
  border-radius:2px; margin-bottom:.4rem;
}
.g108-aviso-destacado .title{font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem; margin-bottom:.35rem}
.g108-aviso-destacado .text{font-size:.88rem; color:var(--text); margin-bottom:.5rem; line-height:1.6}
.g108-aviso-destacado .date{font-size:.75rem; color:var(--muted)}

/* ── LISTA DE AVISOS / ANUNCIOS ── */
.g108-aviso-list{display:flex; flex-direction:column; gap:.85rem}
.g108-aviso-card{
  display:flex; gap:1rem; background:#fff; border:1px solid var(--stone);
  border-radius:var(--r); padding:1.1rem 1.25rem;
}
.g108-aviso-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:1.1rem; background:var(--stone);
}
.g108-aviso-icon.mantenimiento{background:var(--gold-bg)}
.g108-aviso-icon.asamblea{background:var(--blue-bg)}
.g108-aviso-icon.pago{background:#FEE8E2}
.g108-aviso-icon.info{background:var(--stone)}
.g108-aviso-body{flex:1}
.g108-aviso-meta{display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem}
.g108-aviso-tag{
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:2px; background:var(--stone); color:var(--muted);
}
.g108-aviso-tag.mantenimiento{background:var(--gold-bg); color:#8A5D00}
.g108-aviso-tag.asamblea{background:var(--blue-bg); color:var(--blue)}
.g108-aviso-tag.pago{background:#FEE8E2; color:#B05A3A}
.g108-aviso-tag.info{background:var(--stone); color:var(--muted)}
.g108-aviso-date{font-size:.78rem; color:var(--muted)}
.g108-aviso-title{font-weight:600; color:var(--carbon); margin-bottom:.3rem}
.g108-aviso-excerpt{font-size:.85rem; color:var(--muted); line-height:1.6}

/* ── BANNER "AL CORRIENTE" ── */
.g108-corriente-banner{
  display:flex; align-items:center; gap:1rem; background:var(--green-bg);
  border:1px solid #B9DEB9; border-radius:var(--r); padding:1rem 1.25rem; margin-bottom:1.5rem;
}
.g108-corriente-banner .icon{font-size:1.3rem}
.g108-corriente-banner .label{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--green); margin-bottom:.15rem}
.g108-corriente-banner .title{font-weight:600; color:var(--carbon)}
.g108-corriente-banner .cta{margin-left:auto; font-size:.8rem; font-weight:600; color:var(--green); white-space:nowrap}

/* ── AVISO/NOTA DE ACCESO (cajas informativas) ── */
.g108-access-notice{
  background:var(--blue-bg); border-left:4px solid var(--blue); color:#1a2e5a;
  font-size:.85rem; padding:.9rem 1.2rem; border-radius:0 var(--r) var(--r) 0; margin-bottom:1.5rem; line-height:1.6;
}
.g108-access-notice a{color:var(--blue); font-weight:600}

/* ── DIRECTORIO ── */
.g108-dir-card{
  display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--stone);
  border-radius:var(--r); padding:1rem 1.25rem; position:relative;
}
.g108-dir-card.emergency{border-color:#F3C7B8}
.g108-dir-avatar{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.2rem; background:var(--stone);
}
.g108-dir-name{font-weight:600; color:var(--carbon); font-size:.92rem}
.g108-dir-role{font-size:.78rem; color:var(--muted); margin:.15rem 0}
.g108-dir-phone{font-size:.85rem; color:var(--bronze); font-weight:500}
.g108-dir-tag{
  margin-left:auto; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:2px; background:var(--stone); color:var(--muted); white-space:nowrap;
}
.g108-dir-tag.urgente{background:#FEE8E2; color:var(--terracota)}
.g108-dir-tag.horario{background:var(--blue-bg); color:var(--blue)}

/* ── CALENDARIO ── */
.g108-cal-grid{display:grid; grid-template-columns:340px 1fr; gap:2rem}
@media (max-width:760px){.g108-cal-grid{grid-template-columns:1fr}}
.g108-cal-widget{background:#fff; border:1px solid var(--stone); border-radius:var(--r); padding:1.25rem; height:fit-content}
.g108-cal-header h3{font-size:1.05rem; text-align:center; margin-bottom:1rem}
.g108-cal-days-header{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:.4rem}
.g108-cal-day-name{text-align:center; font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase}
.g108-cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.g108-cal-day{
  text-align:center; padding:.5rem 0; font-size:.85rem; color:var(--text); border-radius:50%;
  position:relative;
}
.g108-cal-day.has-event::after{
  content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--bronze);
}
.g108-cal-day.today{background:var(--bronze); color:var(--carbon)!important; font-weight:700}
.g108-event-item{display:flex; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--stone)}
.g108-event-item:last-child{border-bottom:none}
.g108-event-date{
  flex-shrink:0; width:48px; text-align:center; background:var(--stone); border-radius:var(--r); padding:.4rem 0;
}
.g108-event-date .day{font-size:1.1rem; font-weight:700; color:var(--carbon)}
.g108-event-date .month{font-size:.65rem; text-transform:uppercase; color:var(--muted)}
.g108-event-title{font-weight:600; color:var(--carbon); font-size:.9rem; margin-bottom:.15rem}
.g108-event-desc{font-size:.8rem; color:var(--muted)}

/* ── FORMULARIOS (solicitud de accesos, contacto) ── */
.g108-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; margin-bottom:1.25rem}
.g108-form-group.full{grid-column:1 / -1}
.g108-form-label{display:block; font-size:.78rem; font-weight:600; color:var(--carbon); margin-bottom:.4rem}
.g108-form-input, .g108-form-select, .g108-form-textarea{
  width:100%; border:1.5px solid var(--stone); border-radius:var(--r); padding:.65rem .8rem;
  font-family:'Inter',sans-serif; font-size:.88rem; color:var(--text); background:var(--cream);
}
.g108-form-textarea{min-height:90px; resize:vertical}
.g108-form-input:focus, .g108-form-select:focus, .g108-form-textarea:focus{outline:none; border-color:var(--bronze)}
.g108-form-actions{display:flex; justify-content:center}
.g108-form-actions .btn-g108-primary{color:var(--carbon)!important}

/* ── LOGIN / CONTACTO WRAP ── */
.g108-login-wrap{
  background:#fff; border:1px solid var(--stone); border-radius:var(--r); padding:1.75rem; max-width:420px;
}

/* ── SIDEBAR DEL PORTAL DE RESIDENTES (módulo, enlaces normales) ── */
.g108-portal-sidebar{
  background:var(--carbon); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; font-family:'Inter',sans-serif;
}
.g108-portal-brand{padding:1.25rem 1.25rem 1rem; border-bottom:1px solid #2A2A2A}
.g108-portal-brand-name{
  font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--cream);
  letter-spacing:.06em; text-transform:uppercase;
}
.g108-portal-brand-name span{color:var(--bronze)}
.g108-portal-tagline{font-size:.64rem; color:#6B6560; letter-spacing:.1em; text-transform:uppercase; margin-top:.2rem}

.g108-portal-user{
  margin:1rem 1.1rem; background:#252525; border-radius:var(--r); padding:.7rem .9rem;
  display:flex; align-items:center; gap:.65rem;
}
.g108-portal-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--bronze-dim);
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  font-weight:700; color:var(--cream); flex-shrink:0;
}
.g108-portal-user-name{font-size:.8rem; font-weight:600; color:var(--cream)}
.g108-portal-user-dept{font-size:.7rem; color:#6B6560}
.g108-portal-badge{
  margin-left:auto; background:#1A3A1A; color:#6EC96E; font-size:.58rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.15rem .4rem; border-radius:2px; flex-shrink:0;
}

.g108-portal-section{padding:.4rem 0}
.g108-portal-section-label{
  font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#4A4540; padding:.5rem 1.25rem .3rem;
}
.g108-portal-link{
  display:flex; align-items:center; gap:.7rem; padding:.55rem 1.25rem;
  color:#9A9490!important; font-size:.8rem; font-weight:500; text-decoration:none!important;
  border-left:3px solid transparent; transition:background var(--t), color var(--t);
}
.g108-portal-link:hover{background:#252525; color:var(--cream)!important; border-left-color:#3A3A3A}
.g108-portal-link.active{background:#252525; color:var(--cream)!important; border-left-color:var(--bronze)}
.g108-portal-link .icon{font-size:.95rem; width:16px; text-align:center; flex-shrink:0}
.g108-portal-count{margin-left:auto; background:var(--bronze); color:var(--carbon); font-size:.58rem; font-weight:700; padding:.1rem .4rem; border-radius:10px}
.g108-portal-divider{height:1px; background:#2A2A2A; margin:.4rem 1.1rem}
.g108-portal-footer{margin-top:auto; padding:.9rem 1.1rem; border-top:1px solid #2A2A2A}
.g108-portal-footer a{display:block; color:#6B6560!important; font-size:.75rem; margin-bottom:.3rem; text-decoration:none!important}
.g108-portal-footer a:hover{color:var(--bronze-lt)!important}

.g108-ticket-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width:700px){.g108-ticket-stats{grid-template-columns:1fr 1fr}}
.g108-ticket-stat{background:#fff; border:1px solid var(--stone); border-radius:var(--r); padding:1.1rem; text-align:center}
.g108-ticket-stat .n{font-size:1.5rem; font-weight:700; color:var(--carbon); font-family:'Playfair Display',serif}
.g108-ticket-stat .n.resolved{color:var(--green)}
.g108-ticket-stat .n.open{color:var(--terracota)}
.g108-ticket-stat .n.total{color:var(--bronze)}
.g108-ticket-stat .l{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.3rem}