@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   Sistema COOPERATIVAS — Design System (Municipalidad de Pocito)
   navy #0e1f3d · azul #1e5fe0 · DM Sans · flat, redondeado
   ============================================================ */
:root{
    --navy:#0e1f3d; --blue:#1e5fe0; --blue-2:#4b87f5; --blue-soft:#dbeafe;
    --bg:#f0f4fb; --line:#e2e8f4; --muted:#64748b; --muted2:#94a3b8;
    --ok:#059669; --ok-bg:#dcfce7; --warn:#d97706; --warn-bg:#fef3c7;
    --err:#dc2626; --err-bg:#fee2e2; --purple:#7c3aed; --purple-bg:#ede9fe;
}

body{
    font-family:"DM Sans", system-ui, -apple-system, sans-serif;
    background-color:var(--bg);
    color:var(--navy);
    min-height:100vh;
}

/* ===== NAVBAR (navy) ===== */
.navbar.bg-primary{ background-color:var(--navy) !important; box-shadow:0 1px 0 rgba(255,255,255,.04); }
.navbar-brand{ font-weight:700; font-size:1.1rem; color:#fff; }
.navbar .nav-link{ font-size:.9rem; font-weight:600; color:rgba(255,255,255,.62) !important; border-radius:8px; margin:0 1px; transition:.15s; }
.navbar .nav-link:hover, .navbar .nav-link.active{ color:#fff !important; background:rgba(255,255,255,.08); }
.navbar .badge.bg-info{ background:var(--blue) !important; color:#fff !important; font-weight:700; }

/* ===== CARDS ===== */
.card{ border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 4px rgba(14,31,61,.05); }
.card-header{ border-radius:12px 12px 0 0 !important; font-weight:700; font-size:.9rem; border-bottom:1px solid var(--line); }
.card-header.bg-dark{ background:var(--navy) !important; }
.card-header.bg-primary{ background:var(--navy) !important; }

/* ===== BOTONES ===== */
.btn{ border-radius:9px; font-weight:600; }
.btn-primary{ --bs-btn-bg:var(--blue); --bs-btn-border-color:var(--blue); --bs-btn-hover-bg:#1a54c9; --bs-btn-hover-border-color:#1a54c9; --bs-btn-active-bg:#1a54c9; box-shadow:0 3px 10px rgba(30,95,224,.28); }
.btn-outline-primary{ --bs-btn-color:var(--blue); --bs-btn-border-color:var(--blue); --bs-btn-hover-bg:var(--blue); --bs-btn-hover-border-color:var(--blue); }
.btn-success{ --bs-btn-bg:var(--ok); --bs-btn-border-color:var(--ok); }
.btn-danger{ --bs-btn-bg:var(--err); --bs-btn-border-color:var(--err); }

/* ===== TABLAS ===== */
.table{ --bs-table-hover-bg:#f8faff; }
.table thead th, .table-light th{
    background:var(--bg); color:var(--muted); text-transform:uppercase;
    font-size:.72rem; font-weight:700; letter-spacing:.6px; border-bottom:2px solid var(--line);
}
.table td{ font-size:.9rem; vertical-align:middle; border-color:#f0f4fb; }
.table.table-dark thead th{ background:var(--navy); color:#fff; }

/* ===== BADGES (píldora suave) ===== */
.badge{ border-radius:20px; font-weight:700; padding:.4em .8em; font-size:.75rem; }
.badge.bg-success{ background:var(--ok-bg) !important; color:var(--ok) !important; }
.badge.bg-warning{ background:var(--warn-bg) !important; color:var(--warn) !important; }
.badge.bg-danger{ background:var(--err-bg) !important; color:var(--err) !important; }
.badge.bg-primary{ background:var(--blue-soft) !important; color:var(--blue) !important; }
.badge.bg-secondary{ background:#f1f5f9 !important; color:var(--muted) !important; }

/* ===== FORMULARIOS ===== */
.form-control, .form-select{ border:2px solid #c8d6ea; border-radius:8px; font-size:.92rem; color:var(--navy); }
.form-control:focus, .form-select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,95,224,.12); }
.form-label{ font-weight:600; color:var(--navy); }

/* ===== MODALES ===== */
.modal-content{ border:none; border-radius:16px; box-shadow:0 10px 30px rgba(14,31,61,.18); }
.modal-header.bg-primary{ background:var(--navy) !important; }

/* ===== DASHBOARD — tarjetas de estadística COMPACTAS y planas ===== */
.stat-card{
    border-radius:12px; padding:.85rem 1rem; color:#fff; border:none;
    box-shadow:0 2px 8px rgba(14,31,61,.10); transition:transform .15s;
}
.stat-card:hover{ transform:translateY(-2px); }
.stat-card .stat-icon{ font-size:1.5rem; opacity:.85; }
.stat-card .stat-number{ font-size:1.5rem; font-weight:800; line-height:1; }
.stat-card .stat-label{ font-size:.68rem; opacity:.92; text-transform:uppercase; letter-spacing:.5px; }

/* colores planos (sin gradiente) segun el design system */
.bg-stat-blue{ background:var(--blue); }
.bg-stat-green{ background:var(--ok); }
.bg-stat-orange{ background:var(--warn); }
.bg-stat-red{ background:var(--err); }
.bg-stat-purple{ background:var(--purple); }

/* Botones de acción del dashboard (Personas / Marcar / etc.) */
.btn-action{
    border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--navy);
    font-weight:600; box-shadow:0 1px 4px rgba(14,31,61,.05); transition:.15s;
}
.btn-action:hover{ border-color:var(--blue); box-shadow:0 4px 14px rgba(30,95,224,.15); transform:translateY(-2px); }
.btn-marcar .btn-marcar-icon{ font-size:2.2rem; }

h4.fw-bold, h5.fw-bold{ color:var(--navy); }
.text-primary{ color:var(--blue) !important; }

/* ===== MÓVIL: dashboard aún más compacto ===== */
@media (max-width:576px){
    .stat-card{ padding:.7rem .8rem; }
    .stat-card .stat-number{ font-size:1.3rem; }
    .stat-card .stat-icon{ font-size:1.3rem; }
    .stat-card .stat-label{ font-size:.62rem; }
    .btn-marcar .btn-marcar-icon{ font-size:1.9rem; }
    .navbar-brand{ font-size:1rem; }
}

/* ===== Anti-desborde horizontal en móvil ===== */
html, body{ overflow-x:hidden; max-width:100%; }
.container, .container-fluid{ overflow-x:hidden; }
img, video, canvas, table{ max-width:100%; }
@media (max-width:576px){
    .container{ padding-left:12px; padding-right:12px; }
}

/* ===== Fix desborde de filas Bootstrap en móvil ===== */
.container > .row, .container-fluid > .row{ margin-left:0; margin-right:0; }
@media (max-width:576px){
    .row{ margin-left:0 !important; margin-right:0 !important; }
    .row > [class*="col-"]{ padding-left:6px; padding-right:6px; }
}

/* ===== Fix: textos largos no deben estirar las tarjetas ===== */
.stat-card, .stat-card * { min-width:0; }
.stat-card .stat-number, .stat-card .stat-label{
    overflow:hidden; text-overflow:ellipsis;
    overflow-wrap:anywhere; word-break:break-word;
}
/* la grilla de stats nunca mas ancha que la pantalla */
.row{ --bs-gutter-x:0.75rem; }
[class*="col-"]{ min-width:0; }

/* ===== Cinturón anti-desborde móvil (fuerza ancho máximo) ===== */
*{ max-width:100%; }
@media (max-width:576px){
    body *{ max-width:100% !important; }
    .stat-card, .card, .btn, .table, .dstat, .dact{ min-width:0 !important; }
    /* nombres/palabras largas nunca ensanchan */
    .stat-number, .stat-label, .dv, .dl, .card-header, td, th, .navbar-brand{
        overflow-wrap:anywhere !important; word-break:break-word !important;
    }
}

/* ===== Móvil: texto entra completo sin cortar (achica en vez de partir) ===== */
@media (max-width:576px){
    /* preferir cortar por espacios, no en mitad de palabra */
    .stat-number, .stat-label, .dv, .dl{
        word-break:normal !important; overflow-wrap:break-word !important;
    }
    /* tarjetas de stats (dashboard viejo): letra un poco menor */
    .stat-card .stat-number{ font-size:1.25rem; }
    .stat-card .stat-label{ font-size:.62rem; line-height:1.15; }
    .stat-card .stat-icon{ font-size:1.25rem; }
    .stat-card{ padding:.6rem .7rem; }
    /* chips del dashboard nuevo */
    .dstat .dv{ font-size:1.15rem; }
    .dstat .dv.trunc{ font-size:.8rem; }
    .dstat .dl{ font-size:.6rem; }
}

/* ===== Nombre de cooperativa en formato Título (no TODO mayúsculas) ===== */
.stat-card .stat-number,
.dstat .dv{ text-transform:none; }
#stat-comitiva, .dstat .dv.trunc{ text-transform:capitalize; }