:root{
  /* PALETA OSCURO */
  --bg:#0b0f17;       /* fondo */
  --surface:#111725;  /* contenedores */
  --surface-2:#151c2d;/* botones y campos */
  --text:#e7ecf4;     /* texto principal */
  --muted:#9fb0cf;    /* texto secundario */
  --accent:#ff5555;   /* rojo principal */
  --accent-2:#ff8c42; /* apoyo cálido */
  --border:rgba(255,255,255,.12); /* bordes */
  --ok:#33d39c;       /* estado ok */
  --warn:#ffb454;     /* estado advertencia */
  --modal-bg:#070a12;     /* fondo cuadros emergentes */
  --modal-border:rgba(255,255,255,.18);
}
:root.light{
  /* PALETA CLARA */
  --bg:#f2f2f2;      /* fondo */
  --surface:#ffffff; /* contenedores */
  --surface-2:#e7e7e7; /* botones y campos */
  --text:#222222;    /* texto principal */
  --muted:#666666;   /* texto secundario */
  --border:#cccccc;  /* bordes */
  --modal-bg:#ffe6c9;    /* fondo cuadros emergentes */
  --modal-border:#ffb27a;
}

:root.light input,
:root.light select,
:root.light textarea{
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:4px 8px;
}

:root.light button{
  background:var(--accent-2);
  color:#fff;
  border:1px solid var(--border);
}
*{ box-sizing:border-box }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); font:15.5px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif; }

/* ====== Layout general ====== */
header.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:600 }
.brand img{ width:28px; height:28px; border-radius:6px; object-fit:cover }
.grow{ flex:1 }
.pill{ padding:6px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:13px }
.theme-switch{position:relative;display:inline-block;width:42px;height:22px;}
.theme-switch input{opacity:0;width:0;height:0;}
.theme-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;transition:.3s;}
.theme-slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background:var(--text);border-radius:50%;transition:.3s;}
.theme-switch input:checked + .theme-slider{background:var(--accent-2);}
.theme-switch input:checked + .theme-slider:before{transform:translateX(20px);}

.layout{
  display:grid;
  grid-template-columns: 220px 1fr 420px;  /* izq / centro / derecha (ancha) */
  gap:16px;
  padding:16px;
  max-width:1400px; margin:0 auto;
}
@media (max-width: 1100px){
  .layout{ grid-template-columns: 200px 1fr 380px; }
}
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
  aside.sidebar{ order:2 }
  section.content{ order:1 }
  aside.profile{ order:3 }
}

/* ====== Sidebar izquierda (botonera) ====== */
aside.sidebar{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  height:fit-content;
  position:sticky; top:72px;
}
.side-title{ font-size:13px; letter-spacing:.3px; color:var(--muted); margin:4px 6px 8px; text-transform:uppercase }
.nav-col{ display:flex; flex-direction:column; gap:8px; }
.nav-btn{
  width:100%; text-align:left;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  transition: transform .08s ease, background .15s ease;
}
.nav-btn:hover{ transform: translateY(-1px); }
.nav-btn .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px rgba(255,85,85,.2) inset }
.nav-note{ color:var(--muted); font-size:12.5px; margin:6px 4px 0; }

/* ====== Zona central (contenido general) ====== */
section.content{
  min-height:60vh;
  display:flex; flex-direction:column; gap:14px;
}
.view-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.view-tab{
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition:background .2s ease, transform .1s ease;
}
.view-tab:hover{ transform:translateY(-1px); }
.view-tab.active{ background:var(--accent); color:#fff; border-color:transparent; }
.view-panel[hidden]{ display:none !important; }
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.section-title{ margin:0 0 10px; font-size:18px }
.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 1100px){ .grid{ grid-template-columns: 1fr; } }

/* ====== Columna derecha (perfil ancho) ====== */
aside.profile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  position:sticky; top:72px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.avatar{
  width:140px; height:140px; border-radius:50%; overflow:hidden; border:3px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.avatar img{ width:100%; height:100%; object-fit:cover }
.name{ font-size:20px; font-weight:700; margin-top:6px; text-align:center }
.role{ font-size:13px; color:var(--muted); text-align:center }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); font-size:12px; color:var(--muted) }

.details{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.dl{
  display:grid; grid-template-columns: 1fr 2fr; gap:8px 10px; font-size:14px;
}
.dl dt{ color:var(--muted) }
.dl dd{ margin:0; font-weight:500 }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; font-weight:600;
}
.btn.secondary{ background:var(--surface-2); color:var(--text) }
.btn.approve{ background:#2e7d32; }
.btn.reject{ background:#c62828; }

.news-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.news-subtitle{ margin:0; color:var(--muted); font-size:14px; }
.news-feed{ display:flex; flex-direction:column; gap:16px; }
.news-empty{ text-align:center; font-weight:600; color:var(--muted); }
.news-card{ display:flex; flex-direction:column; gap:12px; }
.news-card-header{ display:flex; gap:12px; align-items:flex-start; }
.news-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--surface-2); border:1px solid var(--border); }
.news-author{ font-weight:600; }
.news-date{ font-size:13px; color:var(--muted); }
.news-title{ margin:0; font-size:20px; }
.news-content{ margin:0; color:var(--text); line-height:1.6; white-space:pre-wrap; }
.news-images{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
.news-images img{ width:100%; border-radius:12px; object-fit:cover; max-height:260px; border:1px solid var(--border); }
.news-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.reaction-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-weight:600; transition:background .2s ease, border .2s ease; }
.reaction-btn span{ font-weight:600; }
.reaction-btn.active{ background:rgba(255,184,0,.18); border-color:rgba(255,184,0,.6); }
.news-actions .news-remove{ margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:22px; line-height:1; }
.news-actions .news-remove:hover{ color:#ff6b6b; }
.news-comments{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.news-comment{ display:flex; gap:10px; }
.news-comment-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--border); background:var(--surface-2); }
.news-comment-body{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:8px 12px; flex:1; }
.comment-meta{ font-size:13px; color:var(--muted); margin-bottom:4px; display:flex; gap:6px; align-items:center; }
.comment-text{ margin:0; white-space:pre-wrap; }
.news-show-more{ background:none; border:none; color:var(--accent-2); cursor:pointer; font-weight:600; align-self:flex-start; padding:0; }
.news-new-comment{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.news-new-comment textarea{ width:100%; resize:vertical; min-height:70px; padding:10px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
.news-new-comment button{ align-self:flex-end; }
.news-images-list{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.news-images-list li{ display:flex; align-items:center; gap:6px; }
.news-images-list button{ background:none; border:none; color:#ff7676; cursor:pointer; font-size:16px; }

:root.light .reaction-btn.active{ background:rgba(255,193,7,.25); border-color:rgba(255,193,7,.6); }

#notifBtn.pending{animation:ring 1s infinite;}
@keyframes ring{
  0%{transform:rotate(0);} 10%{transform:rotate(15deg);} 20%{transform:rotate(-15deg);} 30%{transform:rotate(10deg);} 40%{transform:rotate(-10deg);} 50%{transform:rotate(5deg);} 60%{transform:rotate(-5deg);} 70%,100%{transform:rotate(0);}
}

dialog{
  background:var(--modal-bg);
  color:var(--text);
  border:1px solid var(--modal-border);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  padding:20px;
}

dialog::backdrop{
  background:rgba(5,8,12,.55);
  backdrop-filter:blur(4px);
}

:root.light dialog::backdrop{
  background:rgba(17,23,37,.35);
}

dialog#notifModal{
  width:min(90vw,400px);
  max-height:80vh;
  padding:20px;
}
dialog#notifModal ul li{
  display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--border);
}
dialog#notifModal ul li:last-child{border-bottom:none;}
dialog#notifModal ul li .fecha{color:var(--muted);font-size:12px;}
dialog#notifModal ul li button{margin-left:auto;background:none;border:none;color:#c62828;font-weight:bold;cursor:pointer;}

/* Pequeños adornos */
.kpi{ display:flex; align-items:center; justify-content:center; height:96px; border-radius:12px; background:var(--surface); border:1px solid var(--border); }
.kpi strong{ font-size:22px }

dialog#editModal{
  width:min(90vw,600px);
  padding:20px;
}

dialog#completeDataModal{
  width:min(90vw,400px);
  padding:20px;
  text-align:center;
}
.form-fields{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}
.form-fields label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:14px;
  align-items:flex-start;
}
.form-fields input:not([type="checkbox"]),
.form-fields select,
.form-fields textarea{
  width:100%;
}
.form-fields input[type="checkbox"]{
  margin-top:6px;
}
dialog[open]{ animation:fadeIn .3s ease; }
dialog.closing{ animation:fadeOut .3s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;} }
@keyframes fadeOut{ from{opacity:1; transform:none;} to{opacity:0; transform:translateY(-10px);} }
.toast{
  position:fixed; bottom:20px; right:20px; background:var(--surface); border:1px solid var(--border);
  padding:10px 14px; border-radius:8px; opacity:0; transform:translateY(10px);
  transition:opacity .3s, transform .3s; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* Modal para ampliar la foto de perfil */
.photo-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  z-index:50;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  padding:20px;
}
.photo-modal img{
  max-width:90vw;
  max-height:80vh;
  border-radius:12px;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
.photo-modal .close-btn{
  position:absolute;
  top:20px;
  right:20px;
  background:var(--surface);
  border:none;
  color:var(--text);
  font-size:28px;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
}
.photo-modal .delete-btn{
  position:absolute;
  top:20px;
  left:20px;
  background:var(--accent);
  border:none;
  color:#fff;
  font-size:20px;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
}
.photo-date{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cert-thumb{width:100%;border-radius:8px;cursor:pointer}

/* Loading spinner for charts */
.chart-loading{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chart-loading::after{
  content:"";
  width:24px;
  height:24px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}

/* bomberos.ar® */