/* ============================================================
   Variables de tema · modo claro / modo oscuro
   ============================================================ */

:root,
[data-theme="light"]{
  --bg-app:      #f0f7f2;
  --bg-card:     #ffffff;
  --bg-sidebar:  #ffffff;
  --bg-header:   #3B3C43;
  --bg-footer:   #3B3C43;
  --bg-input:    #fafdf9;
  --bg-elev:     #f2f1ee;

  --txt-main:    #3B3C43;
  --txt-mid:     #5f6068;
  --txt-soft:    #8a8b92;
  --txt-inv:     #ffffff;

  --borde:       #d6ead9;
  --borde-gray:  #e2e1dc;

  --verde:       #A0D0AD;
  --verde-dark:  #3B7A4E;
  --verde-mid:   #6aab7a;
  --verde-light: #e8f5eb;
  --verde-pale:  #f0f9f2;

  --salmon:      #F39772;
  --salmon-light:#fde8df;
  --azul:        #2d6fa8;
  --azul-light:  #e8f1fa;

  --shadow:      0 1px 4px rgba(59,60,67,.08), 0 4px 16px rgba(59,60,67,.06);
  --shadow-lg:   0 8px 32px rgba(59,60,67,.16);
}

[data-theme="dark"]{
  --bg-app:      #14171a;
  --bg-card:     #1e2226;
  --bg-sidebar:  #1a1d21;
  --bg-header:   #0f1113;
  --bg-footer:   #0f1113;
  --bg-input:    #23282d;
  --bg-elev:     #23282d;

  --txt-main:    #e8e9ea;
  --txt-mid:     #b1b4b8;
  --txt-soft:    #7a7e83;
  --txt-inv:     #ffffff;

  --borde:       #2c3238;
  --borde-gray:  #2c3238;

  --verde:       #6aab7a;
  --verde-dark:  #A0D0AD;
  --verde-mid:   #6aab7a;
  --verde-light: #1f2e24;
  --verde-pale:  #161f19;

  --salmon:      #F39772;
  --salmon-light:#3a241c;
  --azul:        #5fa8e0;
  --azul-light:  #1a2a3a;

  --shadow:      0 1px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.5);
}

/* Transición suave al cambiar de tema */
body, .card, .sidebar, .header, .footer, .content, input, select, textarea, .stat-card, .rank-item, .doc-item, .modal{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ============================================================
   Toggle PCG
   ============================================================ */
.pcg-toggle{
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform .2s, filter .3s;
}
.pcg-toggle img{
  height: 42px;
  width: auto;
  display: block;
  transition: filter .35s ease, transform .35s ease;
}
.pcg-toggle:hover img{ transform: scale(1.08); }

/* Modo claro: colores originales */
[data-theme="light"] .pcg-toggle img{
  filter: none;
}

/* Modo oscuro: efecto amarillo iluminado */
[data-theme="dark"] .pcg-toggle img{
  filter:
    brightness(1.35)
    sepia(1)
    hue-rotate(10deg)
    saturate(4)
    drop-shadow(0 0 10px #facc15)
    drop-shadow(0 0 22px rgba(250,204,21,.55));
}

/* Toggle flotante en login */
#login-screen .pcg-toggle{
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 5;
  background: rgba(255,255,255,.08);
  padding: 8px;
}

/* Escudo del header: siempre blanco (logo-muni-blanco.png), no cambia con el tema */
.hdr-escudo{
  height: 42px;
  width: auto;
  filter: none;
}

/* Escudos que cambian de color según tema */
#login-escudo, #ftr-escudo{
  height: 42px;
  width: auto;
  transition: filter .3s ease;
}
[data-theme="dark"] #login-escudo,
[data-theme="dark"] #ftr-escudo{
  filter: brightness(0) invert(1);
}

/* Slogan Contigo */
.login-contigo{ height: 46px; width: auto; margin-top: 10px; }
.hdr-contigo{ height: 32px; width: auto; opacity: .95; }
.footer-contigo{ height: 34px; width: auto; opacity: .9; }

/* ============================================================
   Overrides modo oscuro
   ============================================================ */
[data-theme="dark"] body{ background: var(--bg-app); color: var(--txt-main); }
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .rank-item,
[data-theme="dark"] .doc-item,
[data-theme="dark"] .modal{ background: var(--bg-card); border-color: var(--borde); color: var(--txt-main); }
[data-theme="dark"] .card-hdr{
  background: linear-gradient(to right, rgba(106,171,122,.12), transparent);
  border-bottom-color: var(--borde);
}
[data-theme="dark"] .card-ttl,
[data-theme="dark"] .stat-val,
[data-theme="dark"] .ph-title,
[data-theme="dark"] .modal-title{ color: var(--txt-main); }
[data-theme="dark"] .ph-desc,
[data-theme="dark"] .stat-lbl,
[data-theme="dark"] td,
[data-theme="dark"] .info-lbl{ color: var(--txt-mid); }
[data-theme="dark"] .td-n{ color: var(--txt-main); }

[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar-footer{
  background: var(--bg-sidebar);
  border-right-color: var(--borde);
  border-top-color: var(--borde);
}
[data-theme="dark"] .nav-item{ color: var(--txt-mid); }
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active{
  background: var(--verde-light);
  color: var(--verde);
}
[data-theme="dark"] .nav-sect{ color: var(--verde); }

[data-theme="dark"] .content{ background: var(--bg-app); }
[data-theme="dark"] .header{ background: var(--bg-header); }
[data-theme="dark"] .footer{ background: var(--bg-footer); color: var(--txt-mid); }

[data-theme="dark"] .hdr-uname{ color: var(--txt-inv); }
[data-theme="dark"] .hdr-urole{ color: rgba(255,255,255,.55); }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background: var(--bg-input);
  color: var(--txt-main);
  border-color: var(--borde-gray);
}
[data-theme="dark"] input:disabled{
  background: #1a1d21;
  color: var(--txt-soft);
}

[data-theme="dark"] th{
  background: var(--verde-light);
  color: var(--verde);
  border-bottom-color: var(--verde);
}
[data-theme="dark"] tr:hover td{ background: var(--verde-pale); }
[data-theme="dark"] table td{ border-bottom-color: var(--borde); }

[data-theme="dark"] .login-box{
  background: var(--bg-card);
  border-top-color: var(--verde);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
[data-theme="dark"] .login-title{ color: var(--txt-main); }
[data-theme="dark"] .login-hint{
  background: var(--verde-light);
  color: var(--verde);
  border-left-color: var(--verde);
}
[data-theme="dark"] .perfil-tabs{ background: #23282d; }
[data-theme="dark"] .perfil-tab{ color: var(--txt-mid); }
[data-theme="dark"] .perfil-tab.active{
  background: var(--bg-card);
  color: var(--verde);
}

/* ============================================================
   Footer
   ============================================================ */
.footer{
  background: var(--bg-footer);
  color: rgba(255,255,255,.7);
  padding: 16px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  border-top: 3px solid var(--verde);
}
.footer-left{ display: flex; align-items: center; gap: 12px; }
.footer-org{ font-size: 12px; font-weight: 800; color: #fff; }
.footer-copy{ font-size: 10px; opacity: .6; }
.footer-center{ text-align: center; }
.footer-right{ text-align: right; }
.footer-dev{ font-size: 11px; font-weight: 600; color: var(--verde); }

@media(max-width:700px){
  .footer{ grid-template-columns: 1fr; text-align: center; }
  .footer-left, .footer-right{ justify-content: center; text-align: center; }
}