/* ═══════════════════════════════════════
   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: #008294;   /* AA 4.54 sobre blanco (antes #00c4de, 2.11) */

  /* Text */
  --text-primary:    #1A2B3C;
  --text-secondary:  #4A6070;
  --text-muted:      #61727D;   /* AA 4.99 sobre blanco y 4.51 sobre --bg-input,
                                   que es donde viven los chips (antes #8FA8B8, 2.48) */

  /* Variantes legibles como TEXTO de los colores de marca. Los originales
     (--accent, --green) se siguen usando para bordes, fondos y superficies,
     donde el umbral es 3:1; como texto no llegaban a 4.5:1. */
  --accent-text:     #278196;   /* AA 4.50 (antes #35B0CC, 2.55) */
  --green-text:      #587925;   /* AA 4.54 sobre el fondo teñido de los chips,
                                   5.03 sobre blanco (antes #8BBF3A, 2.18) */

  /* 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%; }

/* Reset base.
 *
 * Hasta que se saco bootstrap.min.css, todo esto lo daba su Reboot y el proyecto
 * no tenia reset propio salvo el box-sizing de arriba. Bootstrap pesaba 227 KB y
 * de sus 2149 selectores de clase el codigo usaba DOS —me-1 y ms-auto, 10 usos
 * en total— asi que se saco entero y se repone aca lo que hacia falta.
 *
 * De paso desaparecio el conflicto de cascada que tenia esto: Bootstrap definia
 * `body { font-family/font-size/color }` con la misma especificidad que la regla
 * de abajo, y ganaba por orden —este archivo entra por <link> y el suyo lo
 * inyectaba Vite despues—, asi que la tipografia del producto nunca llegaba al
 * body. Sin Bootstrap no hay dos reglas peleando. */

body {
  /* Sin esto el navegador le pone 8px de margen y se despega todo del borde. */
  margin: 0;
  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;
}

/* Los tamaños replican los de Bootstrap: hay <h3> y <h5> sin clase en las vistas
 * que dependian de ellos, y con los del navegador (1.17em / 0.83em) encogian. */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 600; line-height: 1.2; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; padding-left: 2rem; }
ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; }
dl, dd { margin-top: 0; margin-bottom: 0; }

/* Los controles no heredan la fuente por si solos: sin esto los inputs, selects
 * y textareas del panel vuelven a la fuente del sistema. */
button, input, optgroup, select, textarea {
  margin: 0; font-family: inherit; font-size: inherit; line-height: inherit;
}
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled),
[type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
textarea { resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
label { display: inline-block; }

table { border-collapse: collapse; caption-side: bottom; }
th { text-align: inherit; }

img, svg { vertical-align: middle; }
strong, b { font-weight: bolder; }
small { font-size: .875em; }
summary { display: list-item; cursor: pointer; }
[hidden] { display: none !important; }

/* Las dos unicas utilities de Bootstrap que usaba el codigo. */
.me-1 { margin-right: .25rem; }
.ms-auto { margin-left: auto; }

#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 ─── */
/* Las cinco primeras las daba el Reboot de Bootstrap y el proyecto nunca las
   definio. Sin ellas el badge hereda el line-height 1.6 del body y crece de
   alto —medido: 11.2px a 17.92px— y ademas puede partirse en dos lineas. */
.badge {
  display: inline-block; line-height: 1; text-align: center;
  white-space: nowrap; vertical-align: baseline;
  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. */