/* ========================================
   Protección Civil 112 — Estilos SaaS Pro
   ======================================== */

:root {
  --primary:        #1641d4;
  --primary-dark:   #0e2fa8;
  --primary-light:  #e8eeff;
  --secondary:      #e85d00;
  --secondary-dark: #c04a00;
  --secondary-light:#fff0e6;
  --danger:         #dc2626;
  --danger-light:   #fef2f2;
  --success:        #059669;
  --success-light:  #ecfdf5;
  --warning:        #d97706;
  --warning-light:  #fffbeb;
  --info:           #0891b2;
  --info-light:     #ecfeff;
  --dark:           #0f172a;
  --dark-2:         #1e293b;
  --dark-nav:       #0c1228;
  --text:           #e2e8f0;
  --gray:           #64748b;
  --gray-2:         #94a3b8;
  --gray-3:         #cbd5e1;
  --border:         #e2e8f0;
  --white:          #ffffff;
  --light:          #f8fafc;
  --light-2:        #f1f5f9;
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.08);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.10);
  --shadow:         0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:      0 12px 48px rgba(0,0,0,0.18);
  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      16px;
  --transition:     0.2s cubic-bezier(0.4,0,0.2,1);
  --font:           'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:      'Consolas','Monaco',monospace;
  --nav-h:          58px;
  --status-h:       30px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:15px; }

body {
  font-family:var(--font);
  background: #0a1128;
  background-image: radial-gradient(ellipse at 20% 50%, rgba(22,65,212,0.18) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 20%, rgba(232,93,0,0.12) 0%, transparent 50%);
  background-attachment:fixed;
  min-height:100vh;
  color: #e2e8f0;
  line-height:1.6;
  padding-bottom:var(--status-h);
}

/* ==============================
   STATUS BAR
   ============================== */
.status-bar {
  position:fixed; bottom:0; top:auto; z-index:1100;
  background: var(--dark-nav);
  border-top:1px solid rgba(255,255,255,0.10);
  height:var(--status-h);
  display:flex; align-items:center;
  padding:0 1.25rem;
  gap:1.5rem;
  font-size:0.75rem; color:rgba(255,255,255,0.6);
  letter-spacing:0.02em;
}
.status-bar .sb-entity { font-weight:600; color:rgba(255,255,255,0.85); display:flex; align-items:center; gap:0.35rem; }
.status-bar .sb-entity .material-icons { font-size:14px; color:var(--secondary); }
.status-bar .sb-sep { opacity:0.25; }
.status-bar .sb-clock { font-family:var(--font-mono); color:rgba(255,255,255,0.8); font-size:0.78rem; }
.status-bar .sb-right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.status-bar .sb-badge { display:inline-flex; align-items:center; gap:0.25rem; padding:0.15rem 0.5rem; border-radius:20px; font-size:0.7rem; font-weight:600; }
.status-bar .sb-badge.online { background:rgba(5,150,105,0.25); color:#34d399; }
.status-bar .sb-badge.offline { background:rgba(217,119,6,0.25); color:#fbbf24; }
.status-bar .sb-badge.role { background:rgba(22,65,212,0.3); color:#93c5fd; }

/* ==============================
   MAIN NAVIGATION
   ============================== */
.main-nav {
  position:sticky; top:0; z-index:10000;
  background: rgba(12,18,40,0.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex; align-items:center;
  padding:0 1.25rem;
  height:var(--nav-h);
  border-bottom:1px solid rgba(255,255,255,0.07);
  box-shadow:0 2px 24px rgba(0,0,0,0.4);
  gap:0.5rem;
}
.nav-brand {
  display:flex; align-items:center; gap:0.6rem;
  color:var(--white); font-weight:700; font-size:1rem;
  text-decoration:none; flex-shrink:0; margin-right:0.5rem;
}
.nav-brand-logo {
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
}
.nav-brand-logo .material-icons { font-size:20px; color:white; }
.nav-logo { width:34px; height:34px; object-fit:contain; border-radius:6px; }
.nav-brand-text { display:flex; flex-direction:column; line-height:1.2; }
.nav-brand-text strong { font-size:0.9rem; }
.nav-brand-text small { font-size:0.65rem; color:rgba(255,255,255,0.5); font-weight:400; }

.nav-list { height:max-content; list-style:none; display:flex; align-items:center; gap:0.15rem; flex:1; flex-wrap:nowrap; overflow:visible; }
.nav-item { position:relative; }
.nav-link {
  display:flex; align-items:center; gap:0.35rem;
  color:rgba(255,255,255,0.75); text-decoration:none;
  padding:0.45rem 0.75rem; border-radius:var(--radius-sm);
  font-size:0.835rem; font-weight:500;
  transition:all var(--transition); white-space:nowrap;
  border:none; background:none; cursor:pointer; font-family:var(--font);
}
.nav-link:hover, .nav-link.active-page { color:var(--white); background:rgba(255,255,255,0.1); }
.nav-icon { font-size:17px !important; flex-shrink:0; }
.dropdown-arrow { font-size:15px !important; transition:transform var(--transition); margin-left:auto; opacity:0.6; }
.nav-item.is-open .dropdown-arrow { transform:rotate(180deg); }

.dropdown {
  position:absolute; top:calc(100% + 6px); left:0;
  background:rgba(14,22,52,0.98); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  min-width:220px; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--transition); z-index:200; padding:0.35rem;
}
.nav-item.is-open .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a {
  display:flex; align-items:center; gap:0.5rem;
  color:rgba(255,255,255,0.8); text-decoration:none;
  padding:0.55rem 0.85rem; font-size:0.845rem;
  border-radius:var(--radius-sm); transition:all var(--transition);
}
.dropdown li a:hover { color:var(--white); background:rgba(255,255,255,0.1); }
.dropdown li a .material-icons { font-size:16px; color:var(--secondary); }
.dropdown-divider { height:1px; background:rgba(255,255,255,0.08); margin:0.3rem 0; }

.nav-actions { display:flex; align-items:center; gap:0.5rem; margin-left:auto; flex-shrink:0; }
.nav-user {
  display:flex; align-items:center; gap:0.4rem;
  color:rgba(255,255,255,0.85); font-size:0.83rem;
  text-decoration:none; padding:0.35rem 0.65rem;
  border-radius:var(--radius-sm); transition:background var(--transition);
}
.nav-user:hover { background:rgba(255,255,255,0.1); }
.nav-user .material-icons { font-size:20px; color:var(--secondary); }
.nav-toggle {
  display:none; background:none; border:none;
  color:white; cursor:pointer; padding:0.5rem;
  border-radius:var(--radius-sm); flex-shrink:0;
}
.nav-mobile-user { display:none; }
.nav-notif-btn {
  position:relative; background:none; border:none;
  color:rgba(255,255,255,0.8); cursor:pointer; padding:0.35rem;
  border-radius:var(--radius-sm); transition:background var(--transition);
  display:flex; align-items:center;
}
.nav-notif-btn:hover { background:rgba(255,255,255,0.1); }
.nav-notif-btn .material-icons { font-size:20px; }
.nav-notif-dot {
  position:absolute; top:4px; right:4px;
  width:8px; height:8px; border-radius:50%;
  background:var(--secondary); border:2px solid var(--dark-nav);
}

/* ==============================
   LAYOUT
   ============================== */
.container { max-width:1280px; margin:0 auto; padding:0 1.25rem; }
.page-wrapper { padding:1.75rem 0 3rem; }

.card {
  background:rgba(255,255,255,0.975);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  color: var(--dark);
}
.card + .card { margin-top:1rem; }
.card-header {
  background:linear-gradient(90deg,rgba(22,65,212,0.05),rgba(232,93,0,0.03));
  padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:0.75rem;
}
.card-header h2, .card-header h3 { font-size:1.1rem; color:var(--dark); font-weight:700; }
.card-header .material-icons { color:var(--primary); font-size:22px; }
.card-body { padding:1.5rem; }
.card-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); background:var(--light); }

.section-title {
  font-size:1.3rem; font-weight:800; color:white;
  margin-bottom:1rem; display:flex; align-items:center; gap:0.6rem;
}
.section-title .material-icons { color:var(--secondary); }

/* ==============================
   BUTTONS
   ============================== */
.btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.55rem 1.2rem; border:none; border-radius:var(--radius-sm);
  font-size:0.875rem; font-weight:600; cursor:pointer;
  text-decoration:none; transition:all var(--transition);
  line-height:1.4; font-family:var(--font); white-space:nowrap;
}
.btn:disabled { opacity:0.55; cursor:not-allowed; pointer-events:none; }
.btn .material-icons { font-size:16px; }

.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-dark); box-shadow:0 4px 16px rgba(22,65,212,0.35); transform:translateY(-1px); }

.btn-secondary { background:var(--secondary); color:var(--white); }
.btn-secondary:hover { background:var(--secondary-dark); box-shadow:0 4px 16px rgba(232,93,0,0.35); transform:translateY(-1px); }

.btn-danger { background:var(--danger); color:var(--white); }
.btn-danger:hover { background:#b91c1c; box-shadow:0 4px 12px rgba(220,38,38,0.3); }

.btn-success { background:var(--success); color:var(--white); }
.btn-success:hover { background:#047857; }

.btn-warning { background:var(--warning); color:var(--white); }
.btn-warning:hover { background:#b45309; }

.btn-outline {
  /*background:transparent;*/
  color:var(--dark);
  border:1.5px solid var(--border);
}
.btn-outline:hover { background:var(--light-2); border-color:var(--gray-3); }

.btn-outline-primary {
  background:transparent; color:var(--primary);
  border:1.5px solid var(--primary);
}
.btn-outline-primary:hover { background:var(--primary-light); }

.btn-ghost { background:transparent; color:var(--gray); border:none; }
.btn-ghost:hover { background:var(--light-2); color:var(--dark); }

.btn-sm { padding:0.35rem 0.8rem; font-size:0.8rem; }
.btn-sm .material-icons { font-size:14px; }
.btn-lg { padding:0.75rem 2rem; font-size:0.95rem; }
.btn-icon { padding:0.45rem; border-radius:var(--radius-sm); aspect-ratio:1; }
.btn-block { width:100%; justify-content:center; }

/* ==============================
   FORMS
   ============================== */
.form-group { margin-bottom:1.2rem; }
.form-label { display:block; font-weight:600; margin-bottom:0.4rem; color:var(--dark-2); font-size:0.86rem; }
.form-hint { font-size:0.78rem; color:var(--gray); margin-top:0.25rem; }
.form-control {
  width:100%; padding:0.6rem 0.9rem;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:0.9rem; transition:all var(--transition);
  background:var(--white); color:var(--dark); font-family:var(--font);
}
.form-control:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(22,65,212,0.12);
}
.form-control:disabled { background:var(--light-2); color:var(--gray); cursor:not-allowed; }
.form-control.is-invalid { border-color:var(--danger); }
.invalid-feedback { color:var(--danger); font-size:0.8rem; margin-top:0.25rem; }
.form-check { display:flex; align-items:center; gap:0.5rem; }
.form-check input[type=checkbox], .form-check input[type=radio] { width:16px; height:16px; accent-color:var(--primary); }
.form-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; }
.form-section-title { font-size:0.85rem; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:0.08em; margin:1.5rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border); }

/* ==============================
   TABLES
   ============================== */
.table-wrapper { overflow-x:auto; border-radius:var(--radius-sm); }
table { width:100%; border-collapse:collapse; font-size:0.875rem; }
thead tr { background:linear-gradient(90deg,rgba(22,65,212,0.07),rgba(232,93,0,0.04)); }
th { padding:0.75rem 1rem; text-align:left; font-weight:700; color:var(--dark-2); white-space:nowrap; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; border-bottom:2px solid var(--border); }
td { padding:0.65rem 1rem; border-bottom:1px solid #f0f2f7; vertical-align:middle; }
tr:hover td { background:rgba(22,65,212,0.03); }
tbody tr:last-child td { border-bottom:none; }

/* ==============================
   ALERTS
   ============================== */
.alert {
  padding:0.85rem 1.15rem; border-radius:var(--radius-sm);
  margin-bottom:1rem; font-size:0.875rem;
  display:flex; align-items:center; gap:0.6rem;
  border-left:4px solid transparent;
}
.alert .material-icons { font-size:18px; flex-shrink:0; }
.alert-success { background:var(--success-light); color:#065f46; border-color:var(--success); }
.alert-danger { background:var(--danger-light); color:#991b1b; border-color:var(--danger); }
.alert-info { background:var(--info-light); color:#0e7490; border-color:var(--info); }
.alert-warning { background:var(--warning-light); color:#92400e; border-color:var(--warning); }

/* ==============================
   HERO
   ============================== */
.hero { text-align:center; padding:2.5rem 1rem 1.5rem; color:white; }
.hero h1 { font-size:clamp(1.6rem,4vw,2.8rem); font-weight:800; margin-bottom:0.75rem; text-shadow:0 2px 12px rgba(0,0,0,0.4); }
.hero p { font-size:1.05rem; opacity:0.85; max-width:540px; margin:0 auto 1.5rem; }

/* ==============================
   STATS CARDS
   ============================== */
body > div:nth-child(6) > div:nth-child(2) > a:nth-child(1) > span {color:var(--secondary) !important;} /* Fix for specific card icon color */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1rem; margin:1.5rem 0; }
.stat-card {
  background: rgb(60, 47, 47); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--radius); padding:1.5rem 1.25rem;
  text-align:center; color:white; transition:transform var(--transition), box-shadow var(--transition);
}
.stat-card > p { color:var(--white) !important; } /* Fix for specific card text color */
.stat-card-link {
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--radius); padding:1.5rem 1.25rem;
  text-align:center; color:white; transition:transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(22,65,212,0.4); background:linear-gradient(135deg,var(--primary) 0%,#0d35c0 100%); }
.stat-number { font-size:2.2rem; font-weight:800; display:block; line-height:1; }
.stat-label { font-size:0.8rem; opacity:0.8; margin-top:0.4rem; display:flex; align-items:center; justify-content:center; gap:0.3rem; }
.stat-label .material-icons { font-size:14px; }

/* Admin section cards */
.admin-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; }
.admin-card {
  background:var(--white); border-radius:var(--radius);
  padding:1.5rem; text-align:center; text-decoration:none;
  color:var(--dark); transition:all var(--transition);
  border:1px solid var(--border); box-shadow:var(--shadow-xs);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
}
.admin-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gray-3); }
.admin-card .material-icons { font-size:2.2rem; }
.admin-card h4 { font-size:0.9rem; font-weight:600; }

/* ==============================
   SLIDER
   ============================== */
.slider { position:relative; width:100%; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.slider-track { display:flex; transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.slide { min-width:100%; position:relative; height:460px; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide-caption {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(5,10,30,0.85));
  color:white; padding:2.5rem 2.5rem 1.75rem;
}
.slide-caption h2 { font-size:1.9rem; margin-bottom:0.4rem; font-weight:800; }
.slide-caption p { font-size:1rem; opacity:0.88; }
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.2); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.3); color:white;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.slider-btn:hover { background:rgba(255,255,255,0.35); transform:translateY(-50%) scale(1.08); }
.slider-prev { left:1.25rem; }
.slider-next { right:1.25rem; }
.slider-dots { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.slider-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:all var(--transition); border:none; }
.slider-dot.active { background:white; width:22px; border-radius:4px; }

/* ==============================
   COOKIES & PWA
   ============================== */
#cookieBanner { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; padding:1rem; }
.cookie-box { background:white; border-radius:var(--radius-lg); padding:2.5rem 2rem; max-width:480px; width:100%; text-align:center; box-shadow:var(--shadow-lg); color:var(--dark); }
.cookie-box h3 { font-size:1.25rem; margin-bottom:0.75rem; }
.cookie-box p { color:var(--gray); margin-bottom:1.5rem; font-size:0.9rem; line-height:1.8; }
.cookie-icon { font-size:3rem; margin-bottom:1rem; display:block; }
#pwaBanner { position:fixed; bottom:0; left:0; right:0; z-index:998; background:linear-gradient(135deg,rgba(22,65,212,0.97),rgba(12,18,40,0.98)); backdrop-filter:blur(12px); color:white; padding:1rem 1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; box-shadow:0 -4px 20px rgba(0,0,0,0.3); transform:translateY(0); transition:transform var(--transition); }
#pwaBanner.hidden { transform:translateY(100%); }
.pwa-text { flex:1; }
.pwa-text strong { display:block; margin-bottom:0.15rem; font-size:0.9rem; }
.pwa-text small { opacity:0.75; font-size:0.78rem; }
.pwa-actions { display:flex; gap:0.5rem; }

/* ==============================
   FOOTER
   ============================== */
.site-footer { background:rgba(0,0,0,0.5); color:rgba(255,255,255,0.6); padding:1.25rem; text-align:center; font-size:0.8rem; margin-top:2rem; border-top:1px solid rgba(255,255,255,0.07); }

/* ==============================
   PHOTO ALBUM
   ============================== */
.album-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(175px,1fr)); gap:1rem; }
.album-card { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:all var(--transition); background:var(--white); border:1px solid var(--border); position:relative; }
.album-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.album-thumb { width:100%; height:155px; object-fit:cover; }
.album-info { padding:0.75rem; }
.album-info h4 { font-size:0.875rem; font-weight:600; margin-bottom:0.15rem; }
.album-info small { color:var(--gray); font-size:0.77rem; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:0.75rem; }
.photo-item { position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:4/3; cursor:pointer; }
.photo-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.photo-item:hover img { transform:scale(1.05); }
.photo-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.photo-item:hover .photo-overlay { background:rgba(0,0,0,0.3); }

/* ==============================
   STARS RATING
   ============================== */
.stars { display:flex; gap:2px; color:#f59e0b; }
.star-btn { background:none; border:none; font-size:1.4rem; cursor:pointer; color:#e2e8f0; transition:color var(--transition); }
.star-btn.active, .star-btn:hover { color:#f59e0b; }

/* ==============================
   LIGHTBOX
   ============================== */
#lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.95); display:none; align-items:center; justify-content:center; }
#lightbox.show { display:flex; }
#lightbox img { max-width:92vw; max-height:90vh; object-fit:contain; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
#lightboxClose { position:absolute; top:1.25rem; right:1.25rem; background:rgba(255,255,255,0.15); border:none; color:white; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; }

/* ==============================
   SERVICES / STATUS
   ============================== */
.service-status { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.7rem; border-radius:20px; font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.status-planned { background:#fef3c7; color:#92400e; }
.status-active { background:#d1fae5; color:#065f46; }
.status-closed { background:#dbeafe; color:#1e40af; }
.volunteer-list { display:flex; flex-direction:column; gap:0.5rem; }
.volunteer-row { display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0.75rem; background:var(--light); border-radius:var(--radius-sm); border:1px solid var(--border); }
.time-display { font-family:var(--font-mono); font-size:0.875rem; font-weight:700; color:var(--primary); background:var(--primary-light); padding:0.15rem 0.5rem; border-radius:4px; }

/* ==============================
   CHARTS & PROGRESS
   ============================== */
.progress-bar { height:8px; background:var(--light-2); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--secondary)); border-radius:4px; transition:width 0.6s ease; }
.chart-container { position:relative; height:300px; }
.bar-chart { display:flex; align-items:flex-end; gap:3px; height:120px; padding-top:0.5rem; }
.bar-chart .bar { flex:1; border-radius:3px 3px 0 0; min-width:8px; background:linear-gradient(to top,var(--primary),rgba(22,65,212,0.5)); transition:all 0.4s ease; cursor:pointer; position:relative; }
.bar-chart .bar:hover { filter:brightness(1.15); }

/* ==============================
   BADGES
   ============================== */
.badge { display:inline-flex; align-items:center; padding:0.2rem 0.6rem; border-radius:20px; font-size:0.73rem; font-weight:700; letter-spacing:0.03em; white-space:nowrap; }
.badge-primary { background:var(--primary-light); color:var(--primary); }
.badge-secondary { background:var(--secondary-light); color:var(--secondary-dark); }
.badge-success { background:var(--success-light); color:var(--success); }
.badge-danger { background:var(--danger-light); color:var(--danger); }
.badge-warning { background:var(--warning-light); color:var(--warning); }
.badge-gray { background:var(--light-2); color:var(--gray); }

/* ==============================
   MODAL
   ============================== */
.modal-overlay { position:fixed; inset:0; z-index:9000; background:rgba(5,10,25,0.65); display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; visibility:hidden; transition:all var(--transition); backdrop-filter:blur(4px); }
.modal-overlay.show { opacity:1; visibility:visible; }
.modal { background:white; border-radius:var(--radius-lg); max-width:640px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); transform:scale(0.94); transition:transform var(--transition); color:var(--dark); }
.modal > form { width:100%; box-sizing:border-box; }
.modal-overlay.show .modal { transform:scale(1); }
.modal-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:0.6rem; }
.modal-header h3 { font-size:1.05rem; font-weight:700; flex:1; }
.modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--gray); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; transition:background var(--transition); }
.modal-close:hover { background:var(--light-2); }
.modal-body { padding:1.5rem; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:0.5rem; background:var(--light); border-radius:0 0 var(--radius-lg) var(--radius-lg); }

/* ==============================
   SEARCH & FILTER
   ============================== */
.search-bar { display:flex; gap:0.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.search-input { flex:1; min-width:180px; }
.filter-row { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }

/* ==============================
   PAGINATION
   ============================== */
.pagination { display:flex; gap:0.25rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }
.page-btn { padding:0.4rem 0.7rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:white; cursor:pointer; font-size:0.83rem; text-decoration:none; color:var(--dark); transition:all var(--transition); font-weight:500; }
.page-btn:hover { border-color:var(--primary); color:var(--primary); }
.page-btn.active { background:var(--primary); color:white; border-color:var(--primary); }

/* ==============================
   PROFILE
   ============================== */
.profile-avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--primary); box-shadow:0 0 0 4px var(--primary-light); }
.profile-placeholder { width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; color:white; font-size:2.5rem; box-shadow:0 0 0 4px var(--primary-light); }

/* ==============================
   WEATHER
   ============================== */
.weather-widget { background:linear-gradient(135deg,rgba(14,30,80,0.95),rgba(60,20,5,0.9)); color:white; border-radius:var(--radius-lg); padding:2rem; }

/* ==============================
   LIBRARY TABS
   ============================== */
.lib-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1.5rem; }
.lib-tab { padding:0.7rem 1.4rem; border:none; background:none; cursor:pointer; font-size:0.9rem; color:var(--gray); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all var(--transition); display:flex; align-items:center; gap:0.4rem; font-weight:500; font-family:var(--font); }
.lib-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ==============================
   MULTI-SCREEN PANELS
   ============================== */
.multipanel-bar { position:fixed; bottom:0; left:0; right:0; z-index:500; background:rgba(12,18,40,0.97); border-top:1px solid rgba(255,255,255,0.08); padding:0.5rem 1rem; display:flex; align-items:center; gap:0.5rem; backdrop-filter:blur(12px); }
.multipanel-bar.hidden { transform:translateY(100%); transition:transform 0.3s; }
.panel-tab { display:flex; align-items:center; gap:0.4rem; padding:0.35rem 0.75rem; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-sm); color:rgba(255,255,255,0.8); font-size:0.8rem; cursor:pointer; white-space:nowrap; transition:all var(--transition); }
.panel-tab:hover, .panel-tab.active { background:var(--primary); color:white; border-color:var(--primary); }
.panel-tab .close-tab { opacity:0.6; margin-left:0.25rem; display:inline-flex; }
.panel-tab .close-tab:hover { opacity:1; }

/* ==============================
   LEAFLET MAP
   ============================== */
.map-container { border-radius:var(--radius-sm); overflow:hidden; border:2px solid var(--border); }
.leaflet-container { font-family:var(--font) !important; }

/* ==============================
   PAGE BUILDER v2 — Grid layout
   ============================== */

/* Canvas: 12-column grid */
.builder-canvas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.75rem;
  min-height: 400px;
  padding: 1rem;
  background: var(--light);
  border-radius: var(--radius-sm);
  border: 2px dashed var(--gray-3);
  align-items: start;
}

/* Block: spans N columns */
.builder-block {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-width: 0;
}
.builder-block:hover { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.builder-block.drag-over { border-color:var(--secondary); background:var(--secondary-light); }
.builder-block.dragging { opacity:0.45; }

/* Block header */
.builder-block-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--light-2);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: grab;
  user-select: none;
  flex-wrap: nowrap;
  overflow: hidden;
}
.builder-block-header:active { cursor: grabbing; }
.builder-block-body { padding: 0.6rem; overflow: hidden; }

/* Column preset buttons in header */
.block-col-presets {
  display: none;
  gap: 2px;
  margin-left: 0.35rem;
}
.builder-block:hover .block-col-presets { display: flex; }
.btn-col-preset {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.6;
  min-width: 20px;
  text-align: center;
  color: var(--gray);
  transition: background var(--transition), border-color var(--transition);
}
.btn-col-preset:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.btn-col-preset.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* Width percentage badge */
.block-col-badge {
  font-size: 0.62rem;
  color: var(--gray-2);
  display: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.builder-block:hover .block-col-badge { display: block; }

/* Right-edge resize handle */
.block-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(to right, transparent, rgba(22,65,212,0.12));
  z-index: 2;
}
.builder-block:hover .block-resize-handle { opacity: 1; }
.block-resize-handle::after {
  content: '';
  width: 3px;
  height: 36px;
  background: var(--primary);
  border-radius: 2px;
  opacity: 0.6;
}
.block-resize-handle:hover::after { opacity: 1; }

/* Block palette */
.block-palette { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }
.block-palette-item { display:flex; flex-direction:column; align-items:center; gap:0.3rem; padding:0.6rem 0.4rem; background:var(--light); border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; text-align:center; font-size:0.72rem; font-weight:600; color:var(--dark-2); transition:all var(--transition); }
.block-palette-item:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.block-palette-item .material-icons { font-size:1.3rem; color:var(--primary); }

/* Image upload drop zone */
.img-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  margin-bottom: 0.75rem;
  transition: border-color var(--transition), background var(--transition);
}
.img-drop-zone:hover, .img-drop-zone.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* Rendered custom page blocks */
.pc-block { margin-bottom:1.5rem; }
.pc-heading h2 { font-size:1.7rem; font-weight:800; color:var(--dark); padding-bottom:0.5rem; border-bottom:3px solid var(--primary); }
.pc-heading h3 { font-size:1.3rem; font-weight:700; color:var(--dark); }
.pc-text p { color:var(--dark-2); line-height:1.8; margin-bottom:0.75rem; }
.pc-columns { display:grid; gap:1.5rem; }
.pc-columns.cols-2 { grid-template-columns:1fr 1fr; }
.pc-columns.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.pc-divider { border:none; border-top:1px solid var(--border); margin:1.5rem 0; }
.pc-alert-box { border-radius:var(--radius-sm); padding:1rem 1.25rem; border-left:4px solid var(--primary); background:var(--primary-light); color:var(--dark-2); }
.pc-image img { width:100%; border-radius:var(--radius-sm); }
.pc-image figcaption { text-align:center; color:var(--gray); font-size:0.82rem; margin-top:0.4rem; }

/* ==============================
   ROLES DISPLAY
   ============================== */
.role-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.6rem; border-radius:20px; font-size:0.76rem; font-weight:700; }

/* ==============================
   PRINT
   ============================== */
@media print {
  .main-nav,.status-bar,#cookieBanner,#pwaBanner,.no-print,.btn,.modal-overlay,.multipanel-bar { display:none !important; }
  body { background:white !important; color:#000; }
  .card { box-shadow:none; border:1px solid #ccc; }
  .print-section { page-break-inside:avoid; }
  .container { max-width:100%; }
  table th, table td { border:1px solid #ccc; padding:0.4rem 0.6rem; }
}

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width:1024px) {
  .nav-brand-text { display:none; }
}

@media (max-width:768px) {
  :root { --nav-h:52px; --status-h:0px; }
  .mobile-off { display:none; }
  .status-bar { display:none; }
  .main-nav { top:0; padding:0 0.75rem; gap:0.25rem; }
  .nav-list { 
    display:none; flex-direction:column;
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    background:rgba(10,16,35,0.99); padding:1rem 0.75rem;
    gap:0.2rem; overflow-y:auto; z-index:999; height:calc(100dvh - var(--nav-h));
  }
  .nav-list.open { display:flex;}
  .nav-item { width:100%; }
  .nav-link { width:100%; padding:0.85rem 1rem; font-size:0.93rem; border-radius:8px; }
  .dropdown { position:static; opacity:0; visibility:hidden; max-height:0; overflow:hidden; transform:none; box-shadow:none; background:rgba(255,255,255,0.05); border:none; min-width:unset; padding:0; transition:max-height 0.25s ease, opacity 0.2s; }
  .nav-item.is-open .dropdown { opacity:1; visibility:visible; max-height:600px; padding:0.25rem 0 0.25rem 1.5rem; }
  .dropdown li a { font-size:0.9rem; padding:0.7rem 0.85rem; }
  .nav-toggle { display:flex; }
  .nav-brand-text { display:flex; }
  /* Mobile user section inside the overlay */
  .nav-mobile-user {
    display:flex; flex-direction:column; width:100%; gap:0.2rem;
    border-top:1px solid rgba(255,255,255,0.1);
    margin-top:0.5rem; padding-top:0.75rem;
  }
  .nav-mobile-user .nav-link { font-size:0.93rem; }
  /* Hide nav bar items that move into the overlay */
  .nav-user { display:none; }
  .push-status-btn { display:none; }
  .nav-actions .btn-primary { display:none; }
  /* Keep notif bell, hide the text label next to logout */
  .nav-actions .btn-ghost .nav-logout-label { display:none; }
  .slide { height:240px; }
  .slide-caption h2 { font-size:1.2rem; }
  .slide-caption { padding:1.5rem 1.25rem 1rem; }
  .hero h1 { font-size:1.6rem; }
  .hero p { font-size:0.95rem; }
  .form-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .album-grid { grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); }
  .photo-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .admin-card-grid { grid-template-columns:repeat(2,1fr); }
  .pc-columns.cols-2, .pc-columns.cols-3 { grid-template-columns:1fr; }
  .lib-tab { padding:0.6rem 0.85rem; font-size:0.82rem; }
  #pwaBanner { flex-direction:column; }
  .card-body { padding:1rem; }
  .modal { max-height:95vh; border-radius:var(--radius); }
  .table-wrapper { -webkit-overflow-scrolling:touch; }
}

@media (max-width:480px) {
  .container { padding:0 0.75rem; }
  .card-header { padding:0.9rem 1rem; }
  .card-body { padding:0.875rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:0.75rem; }
  .stat-number { font-size:1.8rem; }
  .admin-card-grid { grid-template-columns:repeat(2,1fr); }
  .btn { font-size:0.82rem; padding:0.5rem 0.9rem; }
  .page-wrapper { padding:1rem 0 2rem; }
}

/* ==============================
   UTILITIES
   ============================== */
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-primary { color:var(--primary); }
.text-secondary { color:var(--secondary); }
.text-danger { color:var(--danger); }
.text-success { color:var(--success); }
.text-gray { color:var(--gray); }
.text-muted { color:var(--gray-2); }
.text-sm { font-size:0.82rem; }
.text-xs { font-size:0.73rem; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.mt-1 { margin-top:0.5rem; }
.mt-2 { margin-top:1rem; }
.mb-1 { margin-bottom:0.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.gap-1 { gap:0.5rem; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }
.w-100 { width:100%; }
.hidden { display:none !important; }

/* ══════════════════════════════════════════════
   SISTEMA DE TEMAS
   ══════════════════════════════════════════════ */

/* ── Default / Nocturno ─── already defined above ── */
:root { --theme-current: 'night'; }

/* ══ DIURNO (Day / Light) ═══════════════════════ */
[data-theme="day"] body {
  background: #e8edf5;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(22,65,212,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(232,93,0,0.05) 0%, transparent 50%);
  color: #0f172a;
}
[data-theme="day"] .main-nav {
  background: rgba(15,23,42,0.96);
}
[data-theme="day"] .status-bar {
  background: #0f172a;
}
[data-theme="day"] .card {
  background: #ffffff;
  border: 1px solid #d1d5db;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
[data-theme="day"] .card-header {
  background: linear-gradient(90deg,rgba(22,65,212,0.04),rgba(232,93,0,0.02));
}
[data-theme="day"] .card-footer {
  background: #f1f5f9;
}
[data-theme="day"] .section-title { color: #0f172a; }
[data-theme="day"] .hero { color: #0f172a; }
[data-theme="day"] .hero h1 { text-shadow: none; }
[data-theme="day"] .hero p { opacity: 0.75; }
[data-theme="day"] .site-footer {
  background: rgba(15,23,42,0.88);
}
[data-theme="day"] .stat-card { background: var(--primary); }
[data-theme="day"] .stat-card-link { background: #ffffff; border: 1px solid #d1d5db; }
[data-theme="day"] table thead tr { background: linear-gradient(90deg,rgba(22,65,212,0.06),rgba(232,93,0,0.03)); }
[data-theme="day"] td { border-bottom-color: #e5e7eb; }
[data-theme="day"] .form-control { background: #fff; border-color: #d1d5db; }
[data-theme="day"] .dropdown { background: rgba(15,23,42,0.97); }
[data-theme="day"] .volunteer-row { background: #f1f5f9; border-color: #d1d5db; }
[data-theme="day"] .builder-canvas { background: #f1f5f9; }
[data-theme="day"] .builder-block { background: #ffffff; }
[data-theme="day"] .builder-block-header { background: #e2e8f0; }
[data-theme="day"] .btn-col-preset { background: #f8fafc; color: #334155; }
[data-theme="day"] .img-drop-zone { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="day"] .admin-card { background: #ffffff; }
[data-theme="day"] .page-btn { background: #ffffff; }

/* ══ ALTO CONTRASTE ══════════════════════════════ */
[data-theme="contrast"] {
  --primary:        #0055ee;
  --primary-dark:   #0033bb;
  --primary-light:  #ddeeff;
  --secondary:      #ff8800;
  --secondary-dark: #cc6600;
  --secondary-light:#fff3cc;
  --danger:         #dd0000;
  --danger-light:   #ffeeee;
  --success:        #007700;
  --success-light:  #eeffee;
  --warning:        #cc8800;
  --warning-light:  #fff8cc;
  --info:           #0077bb;
  --info-light:     #ddeeff;
  --dark:           #000000;
  --dark-2:         #111111;
  --dark-nav:       #000000;
  --gray:           #333333;
  --gray-2:         #555555;
  --gray-3:         #888888;
  --border:         #000000;
  --white:          #ffffff;
  --light:          #ffffdd;
  --light-2:        #ffff99;
}
[data-theme="contrast"] body {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff;
}
[data-theme="contrast"] .main-nav {
  background: #000000 !important;
  backdrop-filter: none;
  border-bottom: 3px solid #ffff00 !important;
}
[data-theme="contrast"] .status-bar {
  background: #000000 !important;
  border-top: 3px solid #ffff00 !important;
  color: #ffff00 !important;
}
[data-theme="contrast"] .status-bar .sb-entity { color: #ffffff !important; }
[data-theme="contrast"] .status-bar .sb-clock  { color: #ffff00 !important; }
[data-theme="contrast"] .card {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
[data-theme="contrast"] .card-header {
  background: #000000 !important;
  color: #ffffff;
  border-bottom: 2px solid #ffff00 !important;
}
[data-theme="contrast"] .card-header h2,
[data-theme="contrast"] .card-header h3 { color: #ffffff !important; }
[data-theme="contrast"] .card-header .material-icons { color: #ffff00 !important; }
[data-theme="contrast"] .card-footer {
  background: #ffffcc !important;
  border-top: 2px solid #000000 !important;
}
[data-theme="contrast"] .nav-link { color: #ffffff !important; }
[data-theme="contrast"] .nav-link:hover,
[data-theme="contrast"] .nav-link.active-page {
  background: #ffff00 !important;
  color: #000000 !important;
}
[data-theme="contrast"] .dropdown {
  background: #000000 !important;
  border: 2px solid #ffff00 !important;
  backdrop-filter: none !important;
}
[data-theme="contrast"] .dropdown li a { color: #ffffff !important; }
[data-theme="contrast"] .dropdown li a:hover { background: #ffff00 !important; color: #000000 !important; }
[data-theme="contrast"] .btn-primary  { background: #0055ee !important; color: #ffffff !important; border: 2px solid #ffffff !important; }
[data-theme="contrast"] .btn-secondary{ background: #ff8800 !important; color: #000000 !important; border: 2px solid #000000 !important; }
[data-theme="contrast"] .btn-danger   { background: #dd0000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; }
[data-theme="contrast"] .btn-success  { background: #007700 !important; color: #ffffff !important; border: 2px solid #ffffff !important; }
[data-theme="contrast"] .btn-outline  { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; }
[data-theme="contrast"] .btn-ghost    { background: #ffffff !important; color: #000000 !important; border: 2px solid #333333 !important; }
[data-theme="contrast"] .form-control {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}
[data-theme="contrast"] .form-control:focus {
  border-color: #0055ee !important;
  box-shadow: 0 0 0 3px #0055ee44 !important;
}
[data-theme="contrast"] .form-label { color: #000000 !important; }
[data-theme="contrast"] table { border: 2px solid #000000; }
[data-theme="contrast"] th { background: #000000 !important; color: #ffff00 !important; border-bottom: 3px solid #ffff00 !important; }
[data-theme="contrast"] td { border-bottom: 1px solid #000000 !important; }
[data-theme="contrast"] tr:hover td { background: #ffffcc !important; }
[data-theme="contrast"] .section-title { color: #ffff00 !important; }
[data-theme="contrast"] .hero { color: #ffffff !important; }
[data-theme="contrast"] .hero h1 { text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important; }
[data-theme="contrast"] .site-footer {
  background: #000000 !important;
  border-top: 3px solid #ffff00 !important;
  color: #ffff00 !important;
}
[data-theme="contrast"] .alert { border-left-width: 6px !important; font-weight: 700; }
[data-theme="contrast"] .badge { border: 2px solid currentColor !important; }
[data-theme="contrast"] .stat-card { border: 3px solid #ffffff !important; }
[data-theme="contrast"] .admin-card { border: 3px solid #000000 !important; }
[data-theme="contrast"] .page-btn { border: 2px solid #000000 !important; color: #000000 !important; }
[data-theme="contrast"] .page-btn.active { background: #0055ee !important; color: #ffffff !important; border-color: #0055ee !important; }
[data-theme="contrast"] a { color: #0055ee !important; text-decoration: underline !important; }
[data-theme="contrast"] a:hover { color: #ff8800 !important; }
[data-theme="contrast"] .volunteer-row { background: #ffffcc !important; border: 2px solid #000000 !important; }
[data-theme="contrast"] .status-bar .sb-badge { border: 1px solid currentColor !important; }

/* ══ DALTÓNICO (Colorblind-safe) ═════════════════ */
[data-theme="colorblind"] {
  --primary:        #0066cc;
  --primary-dark:   #004ea8;
  --primary-light:  #d0e8ff;
  --secondary:      #ff8c00;
  --secondary-dark: #cc6e00;
  --secondary-light:#ffe8c0;
  --danger:         #994400;
  --danger-light:   #ffeedd;
  --success:        #005599;
  --success-light:  #cce0f5;
  --warning:        #cc8800;
  --warning-light:  #fff3cc;
  --info:           #007799;
  --info-light:     #cceeff;
}
[data-theme="colorblind"] .badge-success { background: #cce0f5 !important; color: #005599 !important; }
[data-theme="colorblind"] .badge-danger  { background: #ffeedd !important; color: #994400 !important; }
[data-theme="colorblind"] .alert-success { background: #cce0f5 !important; color: #005599 !important; border-color: #005599 !important; }
[data-theme="colorblind"] .alert-danger  { background: #ffeedd !important; color: #994400 !important; border-color: #994400 !important; }
[data-theme="colorblind"] .status-active { background: #cce0f5 !important; color: #005599 !important; }
[data-theme="colorblind"] .status-planned{ background: #fff3cc !important; color: #665500 !important; }
[data-theme="colorblind"] .status-closed { background: #d0e8ff !important; color: #004ea8 !important; }
[data-theme="colorblind"] .progress-fill { background: linear-gradient(90deg, #0066cc, #ff8c00) !important; }
[data-theme="colorblind"] .stat-card     { background: #0066cc !important; }
[data-theme="colorblind"] .btn-danger    { background: #994400 !important; }
[data-theme="colorblind"] .btn-success   { background: #005599 !important; }
[data-theme="colorblind"] .nav-brand-logo{ background: linear-gradient(135deg,#0066cc,#ff8c00) !important; }

/* ══ WIDGET SELECTOR DE TEMAS ════════════════════ */
#themeSwitcherWrap {
  position: fixed;
  bottom: calc(var(--status-h) + 0.75rem);
  right: 1.25rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
#themeToggleBtn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(22,65,212,0.9);
  border: 2px solid rgba(255,255,255,0.25);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(22,65,212,0.45);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}
#themeToggleBtn:hover { background: rgba(22,65,212,1); transform: scale(1.08); }
#themeToggleBtn .material-icons { font-size: 20px; }

#themePanel {
  background: rgba(12,18,40,0.97);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 0.75rem;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  gap: 0.35rem;
}
#themePanel.open { display: flex; }
#themePanel .tp-title {
  font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.15rem 0.5rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0.15rem;
}
.theme-opt {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.65rem; border-radius: 8px;
  background: none; border: 1px solid transparent;
  color: rgba(255,255,255,0.8); cursor: pointer;
  font-size: 0.82rem; font-weight: 500; width: 100%;
  text-align: left; transition: all 0.15s;
  font-family: inherit;
}
.theme-opt:hover { background: rgba(255,255,255,0.1); color: #fff; }
.theme-opt.active {
  background: rgba(22,65,212,0.35);
  border-color: rgba(22,65,212,0.6);
  color: #fff;
}
.theme-opt .to-icon {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.theme-opt .to-label { flex: 1; line-height: 1.2; }
.theme-opt .to-label small { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.45); font-weight: 400; }
.theme-opt .to-check {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.theme-opt.active .to-check {
  background: #1641d4; border-color: #1641d4;
}
.theme-opt.active .to-check::after {
  content: ''; display: block;
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
}

/* ── Push status button in nav ──────────── */
.push-status-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.45); padding: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: color 0.15s, background 0.15s;
  font-family: inherit;
}
.push-status-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
.push-status-btn.push-active { color: #4ade80; }
.push-status-btn.push-active:hover { color: #86efac; }
.push-status-btn .material-icons { font-size: 20px; }

/* ── Push permission modal ──────────────── */
#pushPermModal {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  align-items: center; justify-content: center;
}
#pushPermModal.open { display: flex; }

.push-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.push-modal-box {
  position: relative; z-index: 1;
  background: #111827;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  max-width: 380px; width: calc(100% - 2rem);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  text-align: center;
  animation: pushModalIn 0.22s ease;
}
@keyframes pushModalIn {
  from { opacity:0; transform:scale(0.92) translateY(12px); }
  to   { opacity:1; transform:none; }
}
.push-modal-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(22,65,212,0.25), rgba(22,65,212,0.1));
  border: 1px solid rgba(22,65,212,0.4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.push-modal-icon .material-icons { font-size: 28px; color: #93c5fd; }
.push-modal-box h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; color: #fff; }
.push-modal-box p  { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin: 0 0 1rem; line-height: 1.5; }

.push-modal-benefits {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; overflow: hidden;
}
.push-modal-benefits li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.push-modal-benefits li:last-child { border-bottom: none; }
.push-modal-benefits li .material-icons { font-size: 16px; color: #4ade80; flex-shrink: 0; }

.push-modal-actions {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.push-modal-actions .btn { width: 100%; justify-content: center; }
.push-modal-actions .btn-ghost { color: rgba(255,255,255,0.5); font-size: 0.82rem; }

/* ── Push feedback toast ────────────────── */
.push-feedback {
  position: fixed; bottom: calc(var(--status-h) + 0.75rem); left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1.1rem; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600;
  z-index: 10001; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.push-feedback.ok  { background: #166534; color: #bbf7d0; border: 1px solid #4ade80; }
.push-feedback.err { background: #7f1d1d; color: #fecaca; border: 1px solid #f87171; }

/* Alto contraste overrides for widget */
[data-theme="contrast"] #themeToggleBtn {
  background: #000000;
  border: 2px solid #ffff00;
  color: #ffff00;
  box-shadow: none;
}
[data-theme="contrast"] #themePanel {
  background: #000000;
  border: 2px solid #ffff00;
  backdrop-filter: none;
}
[data-theme="contrast"] .theme-opt { color: #ffffff; border-color: transparent; }
[data-theme="contrast"] .theme-opt:hover { background: #ffff00; color: #000000; }
[data-theme="contrast"] .theme-opt.active { background: #0055ee; border-color: #ffffff; }
[data-theme="contrast"] .tp-title { color: #ffff00; border-bottom-color: #ffff00; }
[data-theme="contrast"] .theme-opt .to-label small { color: rgba(255,255,255,0.6); }

/* Diurno overrides for widget */
[data-theme="day"] #themeToggleBtn {
  background: rgba(22,65,212,0.92);
}
[data-theme="day"] #themePanel {
  background: rgba(15,23,42,0.97);
}

@media (max-width: 600px) {
  #themeSwitcherWrap { right: 0.75rem; bottom: calc(var(--status-h) + 0.5rem); }
}

/* ══════════════════════════════════════════════════════════════════
   footer.php — animaciones globales
   ══════════════════════════════════════════════════════════════════ */
@keyframes slideIn { from { opacity:0; transform:translateX(20px) } to { opacity:1; transform:translateX(0) } }
@keyframes spin    { from { transform:rotate(0deg) }               to { transform:rotate(360deg) } }

/* ══════════════════════════════════════════════════════════════════
   paginas/servicios.php
   ══════════════════════════════════════════════════════════════════ */
@keyframes pulseGps {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,93,0,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(232,93,0,0); }
}

/* ══════════════════════════════════════════════════════════════════
   paginas/listado_usuarios.php
   ══════════════════════════════════════════════════════════════════ */
.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.user-card {
  background: var(--card-bg, white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  position: relative;
}
.user-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.user-card .user-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary);
  background: var(--light);
}
.user-card .user-avatar-placeholder {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: white; font-weight: 700;
  flex-shrink: 0;
}
.user-card .user-name {
  font-weight: 700; font-size: 0.95rem; color: var(--dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
}
.user-card .user-ind  { font-size: 0.78rem; color: var(--gray); }
.user-card .user-stats {
  display: flex; gap: 1rem; justify-content: center;
  margin-top: 0.3rem;
}
.user-card .ustat       { display: flex; flex-direction: column; align-items: center; }
.user-card .ustat-val   { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.user-card .ustat-lbl   { font-size: 0.68rem; color: var(--gray-2); text-transform: uppercase; letter-spacing: 0.03em; }
.user-card .level-badge { position: absolute; top: 0.55rem; right: 0.55rem; font-size: 0.65rem; padding: 2px 7px; border-radius: 10px; }
.inactive-overlay {
  position: absolute; inset: 0; border-radius: var(--radius);
  background: rgba(255,255,255,0.55); pointer-events: none;
}
.detail-header {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.detail-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--primary);
}
.detail-avatar-ph {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: white; font-weight: 700; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   paginas/multi.php
   ══════════════════════════════════════════════════════════════════ */
.multipanel-layout {
  display:flex; flex-direction:column; height:calc(100vh - 90px);
  background:#0a1128;
}
.panel-toolbar {
  background:rgba(12,18,40,0.98); border-bottom:1px solid rgba(255,255,255,0.07);
  padding:0.5rem 1rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
  flex-shrink:0;
}
.panel-toolbar .label { color:rgba(255,255,255,0.6); font-size:0.75rem; margin-right:0.5rem; }
#panelContainer {
  flex:1; display:grid; gap:4px; padding:4px;
  background:#0a1128; overflow:hidden;
}
.panel-window {
  background:#0c1228; border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; min-height:0;
}
.panel-titlebar {
  background:rgba(22,65,212,0.15); padding:0.35rem 0.75rem;
  display:flex; align-items:center; gap:0.5rem;
  border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0;
  color:rgba(255,255,255,0.85);
}
.panel-window iframe { flex:1; border:none; background:white; }
.layout-btn {
  padding:0.3rem 0.65rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  border-radius:6px; color:rgba(255,255,255,0.75); font-size:0.75rem; cursor:pointer;
  display:flex; align-items:center; gap:0.3rem; transition:all 0.2s;
}
.layout-btn:hover, .layout-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
.quick-btn {
  padding:0.3rem 0.65rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:6px; color:rgba(255,255,255,0.7); font-size:0.75rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.3rem; transition:all 0.2s;
  white-space:nowrap;
}
.quick-btn:hover { background:rgba(232,93,0,0.3); color:white; border-color:var(--secondary); }

/* ══════════════════════════════════════════════════════════════════
   paginas/mapa_operaciones.php
   ══════════════════════════════════════════════════════════════════ */
.mapa-page {
  display:flex; position:relative; isolation:isolate;
  height:calc(100vh - var(--nav-h) - var(--status-h));
  overflow:hidden;
}
.mapa-sidebar {
  width:310px; min-width:310px;
  background:rgba(255,255,255,0.98);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:width 0.25s,min-width 0.25s;
  z-index:500;
}
.mapa-sidebar.collapsed { width:0; min-width:0; }
.mapa-sidebar-head {
  background:var(--dark-nav); color:white;
  padding:0.6rem 0.75rem; font-size:0.82rem; font-weight:700;
  display:flex; align-items:center; gap:0.5rem; flex-shrink:0;
}
.mapa-sidebar-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }
.mapa-stab {
  flex:1; padding:0.45rem 0.2rem; text-align:center;
  font-size:0.7rem; font-weight:600; cursor:pointer;
  border:none; background:none; color:var(--gray); border-bottom:2px solid transparent;
  transition:all var(--transition); white-space:nowrap; min-width:0;
}
.mapa-stab.active { color:var(--primary); border-bottom-color:var(--primary); }
.mapa-tab { display:none; padding:0.6rem; overflow-y:auto; flex:1; }
.mapa-tab.active { display:flex; flex-direction:column; gap:0.4rem; }
.mapa-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.mapa-toolbar {
  background:rgba(12,18,40,0.97);
  backdrop-filter:blur(12px);
  padding:0.3rem 0.6rem;
  display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0; z-index:300;
}
.tb-btn {
  display:inline-flex; align-items:center; gap:0.22rem;
  padding:0.25rem 0.5rem; border-radius:var(--radius-sm);
  font-size:0.73rem; font-weight:600; cursor:pointer;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.82);
  transition:all var(--transition); white-space:nowrap; font-family:var(--font);
}
.tb-btn:hover         { background:rgba(255,255,255,0.15); color:white; }
.tb-btn.active        { background:var(--primary); border-color:var(--primary); color:white; }
.tb-btn.active-sec    { background:var(--secondary); border-color:var(--secondary); color:white; }
.tb-btn.danger:hover  { background:var(--danger); border-color:var(--danger); color:white; }
.tb-btn .material-icons { font-size:13px; }
.gps-sync-status {
  align-items:center;
  max-width:240px;
  padding:0.25rem 0.5rem;
  border-radius:var(--radius-sm);
  background:rgba(15,23,42,0.82);
  color:#fbbf24;
  font-size:0.7rem;
  line-height:1.25;
  white-space:nowrap;
}
.gps-sync-status.sent { color:#6ee7b7; }
.gps-sync-status.error { color:#fca5a5; }
.gps-sync-status.warning { color:#fbbf24; white-space:normal; }
.tb-sep   { width:1px; height:16px; background:rgba(255,255,255,0.12); flex-shrink:0; }
.tb-label { font-size:0.67rem; color:rgba(255,255,255,0.38); white-space:nowrap; }
.tb-coords {
  font-family:var(--font-mono); font-size:0.68rem; color:rgba(255,255,255,0.4);
  margin-left:auto; white-space:nowrap; min-width:160px; text-align:right;
}
.tb-color-swatch {
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); cursor:pointer;
  flex-shrink:0; display:inline-block;
}
#mapaOps { flex:1; min-width:0; min-height:0; }
.mapa-sidebar-backdrop { display:none; }
.unit-card {
  background:var(--light); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0.5rem 0.6rem;
  cursor:pointer; transition:all var(--transition);
  display:flex; align-items:center; gap:0.5rem;
}
.unit-card:hover { border-color:var(--primary); background:var(--primary-light); }
.unit-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.unit-dot.fresh { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,0.2); }
.unit-dot.aging { background:#f59e0b; }
.unit-dot.stale { background:#94a3b8; }
.unit-dot.mine  { background:var(--secondary); box-shadow:0 0 0 3px rgba(232,93,0,0.25); }
.estado-card {
  background:var(--light); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0.5rem 0.6rem;
  display:flex; align-items:center; gap:0.4rem;
}
.estado-card:hover { border-color:var(--primary); }
.layer-group .tb-btn              { border-radius:0; }
.layer-group .tb-btn:first-child  { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.layer-group .tb-btn:last-child   { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.mapa-measure-popup .leaflet-popup-content-wrapper {
  background:rgba(0,0,0,0.8); color:white; font-size:0.8rem; border-radius:6px;
}
.mapa-measure-popup .leaflet-popup-tip { background:rgba(0,0,0,0.8); }
#mapaSearchBar {
  position:absolute; top:8px; right:50px; z-index:900;
  display:flex; gap:4px;
  background:rgba(255,255,255,0.97); border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,0.2); padding:4px;
}
#mapaSearchInput { border:none; outline:none; padding:4px 8px; font-size:0.82rem; min-width:220px; background:transparent; }
#mapaSearchResults {
  position:absolute; top:100%; left:0; right:0;
  background:white; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,0.15);
  max-height:220px; overflow-y:auto; margin-top:2px; display:none;
}
.mapa-search-item { padding:6px 10px; cursor:pointer; font-size:0.8rem; border-bottom:1px solid #f0f0f0; }
.mapa-search-item:hover { background:#f5f5f5; }
#mapaLayerPanel {
  position:absolute; top:45px; right:8px; z-index:900;
  background:rgba(255,255,255,0.97); border-radius:8px;
  box-shadow:0 2px 16px rgba(0,0,0,0.18); padding:0.75rem;
  min-width:200px; display:none;
}
#mapaLayerPanel h5 { margin:0 0 0.5rem; font-size:0.82rem; font-weight:700; }
.layer-item { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; font-size:0.8rem; }
.layer-item input[type=checkbox] { cursor:pointer; }
.layer-item input[type=range]    { flex:1; }
@keyframes mapaOwnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,93,0,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(232,93,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,93,0,0); }
}
.mapa-icon-label {
  background:rgba(0,0,0,0.7); color:white; font-size:10px;
  padding:1px 4px; border-radius:3px; white-space:nowrap;
}
@media (max-width:768px) {
  .mapa-page {
    height:calc(100vh - var(--nav-h) - var(--status-h));
    height:calc(100dvh - var(--nav-h) - var(--status-h));
  }
  .mapa-sidebar {
    position:absolute; top:0; left:0; bottom:0;
    width:min(310px, calc(100vw - 3rem)); min-width:0;
    transform:translateX(-102%);
    box-shadow:var(--shadow-lg); z-index:1200;
    transition:transform 0.25s ease;
  }
  .mapa-sidebar.collapsed { width:min(310px, calc(100vw - 3rem)); min-width:0; }
  .mapa-page.sidebar-open .mapa-sidebar { transform:translateX(0); }
  .mapa-sidebar-backdrop {
    display:none; position:absolute; inset:0; z-index:1100;
    padding:0; border:0; background:rgba(5,10,25,0.42);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .mapa-page.sidebar-open .mapa-sidebar-backdrop { display:block; }
  .mapa-toolbar {
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    min-height:44px; white-space:nowrap; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .mapa-toolbar::-webkit-scrollbar { display:none; }
  .mapa-toolbar > * { flex-shrink:0; }
  .tb-coords { min-width:145px; margin-left:0; }
  #mapaSearchBar { top:50px; right:4px; }
}
@media print { .mapa-page, .mapa-toolbar { display:none !important; } }

/* ══════════════════════════════════════════════════════════════════
   paginas/memoria_anual.php — ficha imprimible
   ══════════════════════════════════════════════════════════════════ */
.ficha-doc {
  background: white; color: #111;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 10pt; line-height: 1.4;
  max-width: 870px; margin: 0 auto; padding: 1.5rem 2rem;
}
.ficha-doc table { border-collapse: collapse; width: 100%; }
.ficha-doc table th,
.ficha-doc table td { border: 1px solid #666; padding: 0.2rem 0.4rem; vertical-align: top; font-size: 8.5pt; }
.ficha-doc table tbody tr:last-child td { border-bottom: 1.5px solid #444; }
.ficha-doc table th { background: #f0f0f0; font-weight: 700; text-align: center; }
.ficha-doc .section-title    { font-weight: 700; margin: 1.25rem 0 0.6rem; font-size: 9.5pt; }
.ficha-doc .subsection-title { font-weight: 700; margin: 1rem 0 0.4rem; font-size: 9pt; }
.ficha-doc .tipo-table { margin-bottom: 1rem; }
.ficha-doc .tipo-table td:nth-child(2),
.ficha-doc .tipo-table td:nth-child(3),
.ficha-doc .tipo-table td:nth-child(4) { text-align: center; width: 20%; }
.ficha-footer-screen {
  background: #f8f8f8; border-top: 2px solid #333;
  padding: 0.4rem 1rem; font-size: 7.5pt; color: #333;
  display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 1rem; margin-top: 1rem;
}
.ficha-print-cabecera { display: none; }
.ficha-page-footer    { display: none; }
@media print {
  .main-nav, .status-bar, .site-footer,
  .no-print, #cookieBanner, #pwaBanner,
  #notifToast, #notifContainer, .modal-overlay { display: none !important; }
  body         { background: white !important; color: #111 !important; margin: 0 !important; }
  .page-wrapper{ padding: 0 !important; }
  .container   { max-width: 100% !important; padding: 0 !important; }
  .card        { box-shadow: none !important; border: none !important; border-radius: 0 !important; }
  .card-body   { padding: 0 !important; }
  .ficha-doc   { max-width: 100%; padding: 0; font-size: 9pt; }
  .ficha-print-wrap     { display: block; }
  .ficha-print-cabecera {
    display: block !important; position: fixed;
    top: var(--pdf-cab-top, 5px); left: 0; right: 0;
    border-bottom: 1px solid #bbb; text-align: center; background: white; z-index: 100;
  }
  .ficha-print-cabecera .cabecera-inner { padding: 0.1cm 0; }
  .ficha-print-cabecera img {
    max-height: var(--pdf-cab-h, 1.7cm); width: auto; max-width: 100%; object-fit: contain;
  }
  /* El padding-top/bottom se establece dinámicamente por JS según
     el tamaño real de cabecera y pie, vía --print-pad-top y --print-pad-bottom */
  .ficha-print-body {
    display: block;
    padding-top: var(--print-pad-top, 2.3cm);
    padding-bottom: var(--print-pad-bottom, 2cm);
  }
  .ficha-page-footer {
    display: block !important; position: fixed;
    bottom: 0; left: 0; right: 0;
    border-top: 1px solid #444; background: white; z-index: 100;
  }
  .ficha-page-footer > div.footer-inner { padding: 0.1cm 0; text-align: center; }
  .ficha-page-footer > div.footer-inner img {
    max-height: var(--pdf-pie-h, 1.2cm); width: auto; max-width: 100%; object-fit: contain;
  }
  .ficha-page-footer > div.footer-text {
    display: grid; grid-template-columns: 2.2fr 1fr 1fr;
    gap: 0.5rem; padding: 0.15cm 1cm; font-size: 7pt; color: #333;
  }
  .ficha-footer-screen { display: none !important; }
  .ficha-doc thead { display: table-header-group; }
  .ficha-doc tfoot { display: table-footer-group; }
  .print-section { page-break-inside: avoid; }
  /* Márgenes de página mínimos (borde físico del papel).
     El espacio para cabecera/pie lo gestiona .ficha-print-body via padding */
  @page { size: A4 portrait; margin: 0.4cm 1cm 0.4cm 1.5cm; }
  .ficha-doc table tbody tr:last-child td { border-bottom: 1px solid #666 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   paginas/meteorologia.php
   ══════════════════════════════════════════════════════════════════ */
.meteo-alerts  { display:flex; flex-direction:column; gap:0.6rem; }
.meteo-alert   { display:flex; align-items:flex-start; gap:0.9rem; padding:0.9rem 1.1rem; border-radius:10px; border-left:5px solid currentColor; }
.alert-extreme { background:rgba(239,68,68,0.15);   color:#000000; border-color:#ef4444; }
.alert-severe  { background:rgba(249,115,22,0.15);  color:#000000; border-color:#f97316; }
.alert-moderate{ background:rgba(234,179,8,0.15);   color:#000000; border-color:#eab308; }
.alert-minor   { background:rgba(163,230,53,0.15);  color:#000000; border-color:#84cc16; }
.alert-unknown { background:rgba(148,163,184,0.12); color:#000000; border-color:#64748b; }
.alert-icon    { font-size:1.6rem; flex-shrink:0; line-height:1; }
.alert-body    { flex:1; }
.alert-body strong    { display:block; font-size:0.95rem; font-weight:700; }
.alert-body small     { font-size:0.78rem; opacity:0.8; }
.alert-sev-badge      { font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; padding:2px 7px; border-radius:20px; background:rgba(0,0,0,0.35); color:#fff; margin-left:0.5rem; }
.current-wrap  { display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2rem; align-items:center; }
.current-main  { text-align:center; }
.current-emoji { font-size:5rem; line-height:1; display:block; }
.current-temp  { font-size:3.5rem; font-weight:900; letter-spacing:-0.04em; }
.current-desc  { font-size:1.05rem; opacity:0.85; text-transform:capitalize; margin-top:0.2rem; }
.current-city  { font-size:0.85rem; opacity:0.6; margin-top:0.25rem; }
.current-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; }
.cstat         { background:rgba(255,255,255,0.06); border-radius:10px; padding:0.7rem 0.5rem; text-align:center; border:1px solid rgba(255,255,255,0.08); }
.cstat-val     { font-size:1.1rem; font-weight:700; }
.cstat-lbl     { font-size:0.68rem; color:rgb(0, 0, 0); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.15rem; }
.forecast-row  { display:grid; grid-template-columns:repeat(7,1fr); gap:0.6rem; }
.fc-day        { background:rgba(0, 33, 79); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:0.75rem 0.4rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.3rem; transition:background 0.15s; }
.fc-day:hover  { background:rgba(22,65,212,0.18); }
.fc-day.today  { border-color:rgba(22,65,212,0.6); background:rgba(1, 14, 57); }
.fc-dayname    { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.55); }
.fc-icon       { font-size:1.8rem; line-height:1; }
.fc-tmax       { font-size:1rem; font-weight:800; color:rgba(255,255,255); }
.fc-tmin       { font-size:0.8rem; color:rgba(255,255,255,0.55); }
.fc-precip     { font-size:0.72rem; color:#93c5fd; display:flex; align-items:center; gap:0.2rem; }
.fc-uv         { font-size:0.68rem; padding:1px 6px; border-radius:10px; font-weight:700; }
.fc-wind       { font-size:0.68rem; color:rgba(255,255,255,0.5); }
.uv-low        { background:#22c55e22; color:#86efac; }
.uv-mod        { background:#eab208; color:#000000; }
.uv-high       { background:#f9731622; color:#fdba74; }
.uv-vhigh      { background:#ef444422; color:#fca5a5; }
.uv-ext        { background:#a855f722; color:#d8b4fe; }
.map-tabs      { display:flex; gap:0.35rem; flex-wrap:wrap; margin-bottom:1rem; }
.map-tab       { padding:0.45rem 1rem; border-radius:8px; border:1px solid rgba(255,255,255,0.14); background:rgb(0, 255, 119); color:rgb(0, 0, 0); cursor:pointer; font-size:0.82rem; font-weight:600; display:flex; align-items:center; gap:0.4rem; transition:all 0.15s; font-family:inherit; }
.map-tab:hover { background:rgba(255,255,255,0.08); color:#fff; }
.map-tab.active{ background:rgba(22,65,212,0.35); border-color:rgba(22,65,212,0.7); color:#fff; }
.map-tab .material-icons { font-size:16px; }
.map-panel        { display:none; }
.map-panel.active { display:block; }
#leafletMap    { width:100%; height:420px; border-radius:10px; background:#0f172a; }
.map-legend    { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; font-size:0.75rem; margin-top:0.6rem; opacity:0.7; }
.legend-item   { display:flex; align-items:center; gap:0.3rem; }
.legend-dot    { width:12px; height:12px; border-radius:3px; }
.radar-controls{ display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; flex-wrap:wrap; }
.radar-btn     { padding:0.35rem 0.8rem; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.07); color:#fff; cursor:pointer; font-size:0.78rem; font-family:inherit; display:flex; align-items:center; gap:0.35rem; }
.radar-btn:hover { background:rgba(255,255,255,0.14); }
.radar-btn .material-icons { font-size:16px; }
#radarTimestamp { font-size:0.78rem; color:rgba(255,255,255,0.6); }
.windy-wrap         { border-radius:10px; overflow:hidden; }
.windy-wrap iframe  { width:100%; height:420px; border:none; display:block; }
.skel { background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 75%); background-size:200% 100%; animation:skel 1.5s infinite; border-radius:8px; }
@keyframes skel  { to { background-position:-200% 0; } }
.meteo-loading { padding:2rem; text-align:center; opacity:0.5; }
[data-theme="day"] .cstat     { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.08); }
[data-theme="day"] .cstat-lbl { color:rgba(0,0,0,0.5); }
[data-theme="day"] .fc-day    { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); }
[data-theme="day"] .fc-dayname{ color:rgba(0,0,0,0.55); }
[data-theme="day"] .fc-tmin   { color:rgba(0,0,0,0.55); }
@media (max-width:900px) {
  .forecast-row  { grid-template-columns:repeat(4,1fr); }
  .current-wrap  { grid-template-columns:1fr; }
  .current-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .forecast-row { grid-template-columns:repeat(3,1fr); }
  #leafletMap   { height:300px; }
}

/* Responsive helpers for forms, dialogs and administrative grids */
.meteo-alert { cursor:pointer; }
.meteo-alert:focus { outline:3px solid var(--primary); outline-offset:2px; }
.alert-detail-btn { margin-top:.65rem; color:inherit; border-color:currentColor; }
.alert-detail-severity { font-weight:700; font-size:1rem; margin-bottom:1rem; }
.alert-detail-grid { display:grid; grid-template-columns:minmax(110px,.35fr) 1fr; gap:.45rem .75rem; margin:0 0 1.25rem; }
.alert-detail-grid dt { color:var(--gray); font-weight:600; }
.alert-detail-grid dd { margin:0; word-break:break-word; }
.weather-alert-modal { max-width:700px; }
.alert-official-note { color:var(--gray); font-size:.82rem; margin-top:1rem; }
.permission-user-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.45rem; }
.permission-user-grid.compact { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.hours-group-box { border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem; margin:.75rem 0; }
.user-file-dropzone {
  min-height:118px; padding:1rem; border:2px dashed var(--border); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  color:var(--gray); cursor:pointer; text-align:center; transition:border-color var(--transition), background var(--transition);
}
.user-file-dropzone:hover, .user-file-dropzone:focus, .user-file-dropzone.dragging {
  border-color:var(--primary); background:rgba(22,65,212,.06); outline:none;
}
.user-file-dropzone .material-icons { color:var(--primary); font-size:1.8rem; }
.user-file-dropzone strong { color:var(--dark); font-size:.9rem; }
.user-file-dropzone small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--primary); }
.user-file-dropzone.has-file { border-style:solid; }
.user-file-upload-form .form-group { margin-bottom:1rem; }

/* Manual de usuario */
.manual-layout { display:grid; grid-template-columns:240px 1fr; overflow:hidden; }
.manual-sidebar { border-right:1px solid var(--border); }
.manual-sidebar .card-header { border-bottom:1px solid var(--border); }
.manual-sidebar nav { padding:.6rem; }
.manual-sidebar a { display:flex; align-items:center; gap:.55rem; padding:.7rem .75rem; border-radius:8px; color:var(--text); text-decoration:none; font-size:.86rem; }
.manual-sidebar a:hover, .manual-sidebar a.active { background:rgba(22,65,212,.12); color:var(--primary); }
.manual-sidebar .material-icons { font-size:1.15rem; }
.manual-content { padding:1.5rem 2rem; min-width:0; }
.manual-intro { display:flex; align-items:center; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.manual-intro > .material-icons { font-size:2.5rem; color:var(--primary); }
.manual-intro h1 { margin:0 0 .2rem; font-size:1.55rem; }
.manual-intro p { margin:0; color:var(--gray); }
.manual-section { scroll-margin-top:1rem; padding:1.3rem 0; border-bottom:1px solid var(--border); }
.manual-section h2 { display:flex; align-items:center; gap:.55rem; margin:0 0 .65rem; font-size:1.1rem; }
.manual-section h2 .material-icons { color:var(--secondary); font-size:1.3rem; }
.manual-section p { line-height:1.7; color:var(--text); margin:0; }
[data-theme="day"] { --text:#0f172a; }
@media (max-width:700px) {
  .manual-layout { display:block; }
  .manual-sidebar { border-right:0; border-bottom:1px solid var(--border); }
  .manual-sidebar nav { display:flex; overflow-x:auto; gap:.3rem; }
  .manual-sidebar a { white-space:nowrap; }
  .manual-content { padding:1.2rem 1rem; }
}

@media print {
  @page { margin:2.7cm 1cm 2.4cm; }
  .ficha-print-body { padding-top:0 !important; padding-bottom:0 !important; }
}

@media (max-width:640px) {
  .card-header { align-items:flex-start; flex-wrap:wrap; gap:.5rem; }
  .card-header h2, .card-header h3 { flex:1 1 70%; min-width:0; }
  .card-header .btn { margin-left:0 !important; }
  .modal-overlay { padding:.5rem; align-items:flex-end; }
  .modal { max-height:94vh; border-radius:var(--radius) var(--radius) 0 0; }
  .modal > form { min-width:0; }
  .modal-header, .modal-body { padding:1rem; }
  .modal-footer { padding:.75rem 1rem; flex-direction:column; align-items:stretch; flex-wrap:nowrap; width:100%; box-sizing:border-box; }
  .modal-footer .btn { width:100%; justify-content:center; flex:0 0 auto; }
  .alert-detail-grid { grid-template-columns:1fr; gap:.2rem; }
  .alert-detail-grid dd { margin-bottom:.45rem; }
  .meteo-alert { gap:.55rem; padding:.75rem; }
  .meteo-alert .alert-body { min-width:0; }
  .volunteer-row { align-items:flex-start !important; flex-wrap:wrap; gap:.5rem; }
  .volunteer-row form { width:100%; }
  .volunteer-row form .form-control { flex:1; min-width:0 !important; max-width:none !important; }
  .permission-user-grid { grid-template-columns:1fr; }
}