/* ═══════════════════════════════════════
   TEMA CLARO — Institucional Ituzaingó
   Paleta oficial Municipio de Ituzaingó
   Teal #35B0CC · Verde #8BBF3A · Azul #2361A8
═══════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg-base:         #F5F8FA;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-sidebar:      #2361A8;
  --bg-input:        #F0F4F8;
  --bg-input-focus:  #ffffff;
  --nav-bg:          rgba(255,255,255,0.96);
  --overlay-bg:      #ffffff;
  --modal-bg:        #ffffff;
  --login-card-bg:   #ffffff;

  /* Primary accent — teal institucional */
  --accent:          #35B0CC;
  --accent-light:    #61C4D9;
  --accent-dim:      rgba(53,176,204,0.1);
  --accent-glow:     0 0 0 3px rgba(53,176,204,0.18);
  --accent-shadow:   0 4px 20px rgba(53,176,204,0.35);

  /* Aliases (para componentes que usan --amber) */
  --amber:           var(--accent);
  --amber-light:     var(--accent-light);
  --amber-dim:       var(--accent-dim);
  --amber-glow:      var(--accent-glow);
  --amber-shadow:    var(--accent-shadow);
  --border-amber:    rgba(53,176,204,0.3);

  /* Colors institucionales */
  --blue:            #2361A8;
  --blue-dim:        rgba(35,97,168,0.12);
  --green:           #8BBF3A;
  --green-dim:       rgba(139,191,58,0.12);
  --red:             #DC2626;
  --red-dim:         rgba(220,38,38,0.1);
  --orange:          #EA8C1E;
  --complaint-num-color: #00c4de;

  /* Text */
  --text-primary:    #1A2B3C;
  --text-secondary:  #4A6070;
  --text-muted:      #8FA8B8;

  /* Borders */
  --border:          #E2EAF0;
  --border-hover:    #CAD9E4;

  /* Sidebar (fondo azul → texto blanco) */
  --sidebar-text:        rgba(255,255,255,0.75);
  --sidebar-text-active: #ffffff;
  --sidebar-text-muted:  rgba(255,255,255,0.45);
  --sidebar-active-bg:   rgba(255,255,255,0.18);
  --sidebar-hover-bg:    rgba(255,255,255,0.08);
  --sidebar-border:      rgba(255,255,255,0.12);

  /* Login orbs */
  --orb-1-color:     rgba(53,176,204,0.18);
  --orb-2-color:     rgba(139,191,58,0.14);
  --orb-3-color:     rgba(35,97,168,0.1);

  /* Boundary */
  --boundary-color:  #8BBF3A;
  --boundary-fill:   rgba(139,191,58,0.07);

  /* Misc */
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    16px;
  --font-display: 'Raleway', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --shadow-sm:    0 1px 4px rgba(35,97,168,0.08);
  --shadow-md:    0 4px 16px rgba(35,97,168,0.12);
  --shadow-lg:    0 12px 40px rgba(35,97,168,0.16);

  /* Botón primario — turquesa profundo con texto blanco (contraste + look premium) */
  --btn-primary:        linear-gradient(135deg, #33AEC9 0%, #1D8CA9 100%);
  --btn-primary-hover:  linear-gradient(135deg, #2FA2BC 0%, #16809B 100%);
  --btn-primary-text:   #ffffff;
  --btn-primary-shadow: 0 6px 18px rgba(29,140,169,0.38);
  --btn-primary-track:  rgba(255,255,255,0.35);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-base); height: 100%; }
body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--text-primary); background: var(--bg-base);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#app { height: 100%; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(35,97,168,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(35,97,168,0.25); }

/* ─── Cards ─── */
.card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; backdrop-filter: none; box-shadow: var(--shadow-sm); }
.card-header { background: #F8FAFC !important; border-bottom: 1px solid var(--border) !important; color: var(--text-secondary) !important; }

/* ─── Tables ─── */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(53,176,204,0.05); --bs-table-border-color: var(--border); color: var(--text-primary); }
.table thead th { color: var(--text-muted) !important; font-size: .7rem; letter-spacing: .1em; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid var(--border-hover) !important; background: #F8FAFC !important; padding: 12px 16px; }
.table > :not(caption) > * > * { background-color: transparent !important; border-bottom-color: var(--border) !important; padding: 12px 16px; }
.table-hover > tbody > tr:hover > * { background-color: rgba(53,176,204,0.04) !important; cursor: pointer; }
.table-light { --bs-table-bg: #F8FAFC !important; background: #F8FAFC !important; }

/* ─── Forms ─── */
.form-control, .form-select { background-color: var(--bg-input) !important; border: 1px solid var(--border-hover) !important; color: var(--text-primary) !important; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.form-control:focus, .form-select:focus { background-color: var(--bg-input-focus) !important; border-color: var(--accent) !important; box-shadow: var(--accent-glow) !important; color: var(--text-primary) !important; }
.form-control::placeholder { color: var(--text-muted) !important; }
.form-label { color: var(--text-secondary); font-size: .82rem; font-weight: 500; margin-bottom: .35rem; }
.form-check-input { background-color: var(--bg-input) !important; border-color: var(--border-hover) !important; }
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-input:focus { box-shadow: var(--accent-glow) !important; }
.input-group-text { background: var(--bg-input) !important; border-color: var(--border-hover) !important; color: var(--text-secondary) !important; }
.form-control-color { padding: 2px 4px !important; }

/* ─── Buttons ─── */
.btn { font-family: var(--font-body); font-weight: 500; transition: all .2s; }
.btn-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--green) 100%) !important; border-color: var(--accent) !important; color: #ffffff !important; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-light) 0%, #A5D14F 100%) !important; border-color: var(--accent-light) !important; color: #ffffff !important; box-shadow: var(--accent-shadow) !important; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; }
.btn-outline-secondary { color: var(--text-secondary) !important; border-color: var(--border-hover) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--bg-input) !important; color: var(--text-primary) !important; }
.btn-outline-danger { color: var(--red) !important; border-color: rgba(220,38,38,0.3) !important; background: transparent !important; }
.btn-outline-danger:hover { background: rgba(220,38,38,0.06) !important; color: var(--red) !important; }
.btn-danger { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.btn-danger:hover:not(:disabled) { background: #b91c1c !important; box-shadow: 0 0 16px rgba(220,38,38,0.25) !important; }
.btn-close { filter: none; opacity: .5; }

/* ─── Badges ─── */
.badge { font-family: var(--font-body); font-weight: 600; letter-spacing: .03em; font-size: .72rem; padding: .3em .65em; border-radius: var(--radius-sm); }
.badge.bg-warning  { background: #FEF3C7 !important; color: #B45309 !important; border: 1px solid #FDE68A !important; }
.badge.bg-primary  { background: var(--accent-dim) !important; color: var(--accent) !important; border: 1px solid rgba(53,176,204,0.25) !important; }
.badge.bg-success  { background: var(--green-dim) !important; color: #4A7C1E !important; border: 1px solid rgba(139,191,58,0.3) !important; }
.badge.bg-danger   { background: var(--red-dim) !important; color: var(--red) !important; border: 1px solid rgba(220,38,38,0.2) !important; }
.badge.bg-secondary { background: #F1F5F9 !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }

/* ─── Alerts ─── */
.alert-primary { background: rgba(53,176,204,0.08) !important; border-color: rgba(53,176,204,0.2) !important; color: #1a6d80 !important; }
.alert-success  { background: rgba(139,191,58,0.08) !important; border-color: rgba(139,191,58,0.2) !important; color: #3f6b12 !important; }
.alert-danger   { background: rgba(220,38,38,0.06) !important; border-color: rgba(220,38,38,0.15) !important; color: #991b1b !important; }

/* ─── Spinner ─── */
.spinner-border { color: var(--accent) !important; }
.spinner-border-sm { width: 1rem; height: 1rem; }

/* ─── Leaflet ─── */
.leaflet-popup-content-wrapper { background: #ffffff !important; border: 1px solid var(--border) !important; backdrop-filter: none !important; color: var(--text-primary) !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--radius) !important; }
.leaflet-popup-content { color: var(--text-primary) !important; }
.leaflet-popup-tip { background: #ffffff !important; }
.leaflet-popup-close-button { color: var(--text-muted) !important; top: 8px !important; right: 8px !important; font-size: 18px !important; }
.leaflet-popup-close-button:hover { color: var(--accent) !important; }
.leaflet-container { font-family: var(--font-body) !important; }
.leaflet-bar a { background: #ffffff !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
.leaflet-bar a:hover { background: var(--accent-dim) !important; color: var(--accent) !important; }
.leaflet-control-attribution { background: rgba(255,255,255,0.85) !important; color: var(--text-muted) !important; }
.leaflet-control-attribution a { color: var(--accent) !important; }
.barrio-tooltip { background: rgba(255,255,255,0.96) !important; border: 1px solid var(--border-hover) !important; color: #1e293b !important; font-family: var(--font-body) !important; font-size: .78rem !important; font-weight: 600 !important; border-radius: 6px !important; padding: 4px 10px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; }

/* ─── Complaint number ─── */
.complaint-num { color: var(--complaint-num-color); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ─── Animations ─── */
.map-marker { animation: marker-breathe 3s ease-in-out infinite; }
@keyframes marker-breathe { 0%,100% { opacity:1 } 50% { opacity:.8 } }
.page-enter { animation: page-in .25s ease both; }
@keyframes page-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }

/* ─── Map labels layer (solo-etiquetas Carto) ───
   grayscale + contrast oscurece el texto hacia negro pero mantiene el halo
   claro (contraste empuja lo oscuro a negro y lo claro a blanco). brightness(0)
   aplastaba texto y halo a negro → letras "en negrita" ilegibles. */
.leaflet-layer.map-labels { filter: grayscale(1) contrast(1.8); }