/* ============================================================
   TecnicGo — Design System unificado (theme.css)
   Se carga DESPUÉS de Bootstrap y app.css en todos los layouts.
   Unifica Cliente, Técnico y Administrador con una sola identidad.
   No cambia lógica: solo apariencia.
   ============================================================ */

:root {
    /* Paleta */
    --tg-primary:        #2563eb;
    --tg-primary-700:    #1d4ed8;
    --tg-primary-soft:   #eff4ff;
    --tg-success:        #16a34a;
    --tg-warning:        #f59e0b;
    --tg-danger:         #ef4444;
    --tg-info:           #0ea5e9;

    --tg-ink:            #0f172a;
    --tg-muted:          #64748b;
    --tg-line:           #eef2f7;
    --tg-bg:             #e9edf6;
    --tg-surface:        #ffffff;

    --tg-grad:           linear-gradient(135deg, #2563eb 0%, #4f86f7 100%);
    --tg-grad-cyan:      linear-gradient(135deg, #0ea5e9, #22d3ee);
    --tg-grad-green:     linear-gradient(135deg, #16a34a, #4ade80);
    --tg-grad-amber:     linear-gradient(135deg, #f59e0b, #fbbf24);
    --tg-grad-violet:    linear-gradient(135deg, #7c3aed, #a855f7);

    --tg-radius:         20px;
    --tg-radius-sm:      14px;
    --tg-shadow:         0 6px 24px rgba(15, 23, 42, .07);
    --tg-shadow-lg:      0 16px 40px rgba(15, 23, 42, .12);
    --tg-ease:           cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--tg-bg);
    color: var(--tg-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; color: var(--tg-ink); }
a { color: var(--tg-primary); }
.text-muted { color: var(--tg-muted) !important; }
hr { border-color: var(--tg-line); opacity: 1; }

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--tg-line);
    box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
}
.navbar .navbar-brand { font-weight: 800; color: var(--tg-ink) !important; letter-spacing: -0.02em; }
.navbar .nav-link { color: var(--tg-muted) !important; font-weight: 500; border-radius: 10px; padding: .45rem .8rem !important; transition: all .18s var(--tg-ease); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--tg-primary) !important; background: var(--tg-primary-soft); }

/* La barra ahora es clara: forzamos texto legible aunque venga de navbar-dark */
.navbar .navbar-text,
.navbar .text-white,
.navbar .text-white-50,
.navbar .small,
.navbar a.text-white,
.app-navbar .navbar-text,
.app-navbar .text-white,
.app-navbar .text-white-50,
.app-navbar a.text-white,
.app-navbar a { color: var(--tg-ink) !important; opacity: 1 !important; }
.navbar .navbar-text { font-weight: 500; }
.navbar .btn-outline-light {
    color: var(--tg-ink) !important; border: 1px solid #dbe2ec !important; background: #eef2f7 !important; font-weight: 600;
}
.navbar .btn-outline-light:hover { color: #fff !important; border-color: var(--tg-danger) !important; background: var(--tg-danger) !important; }
.navbar-dark .navbar-toggler, .navbar .navbar-toggler { border-color: var(--tg-line); }
.navbar .navbar-toggler-icon { filter: invert(35%) sepia(0%) saturate(0%) brightness(.6); }
.navbar .badge.bg-light { background: #eef2f7 !important; color: var(--tg-ink) !important; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    box-shadow: 0 0 0 1px #e1e8f2, var(--tg-shadow);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    transition: transform .18s var(--tg-ease), box-shadow .18s var(--tg-ease);
}
.card.shadow-sm { box-shadow: 0 0 0 1px #e1e8f2, var(--tg-shadow) !important; }

/* Borde superior de acento: separa cada tarjeta del fondo (como las de alertas) */
.card, .tg-kpi, .ch-stat, .ch-card, .panel-card { border-top: 3px solid var(--tg-primary) !important; }
.tg-kpi:has(.tg-kpi-ic.green)  { border-top-color: var(--tg-success) !important; }
.tg-kpi:has(.tg-kpi-ic.amber)  { border-top-color: var(--tg-warning) !important; }
.tg-kpi:has(.tg-kpi-ic.cyan)   { border-top-color: var(--tg-info) !important; }
.tg-kpi:has(.tg-kpi-ic.violet) { border-top-color: #7c3aed !important; }
.tg-kpi:has(.tg-kpi-ic.danger) { border-top-color: var(--tg-danger) !important; }
.card-body { padding: 1.4rem; }

/* Tarjetas de acceso (menús) */
.panel-card { cursor: pointer; }
.panel-card:hover { transform: translateY(-4px); box-shadow: var(--tg-shadow-lg); border-color: #dbe4f5; }
.panel-icon {
    font-size: 1.7rem; color: var(--tg-primary); margin-bottom: .7rem; line-height: 1;
}

/* ---------- KPI cards ---------- */
.tg-kpi {
    position: relative; overflow: hidden;
    background: var(--tg-surface); border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius); padding: 1.25rem 1.35rem; box-shadow: var(--tg-shadow);
    transition: transform .18s var(--tg-ease), box-shadow .18s var(--tg-ease);
    height: 100%;
}
.tg-kpi:hover { transform: translateY(-4px); box-shadow: var(--tg-shadow-lg); }
.tg-kpi-ic {
    font-size: 1.7rem; color: var(--tg-primary); margin-bottom: .65rem; line-height: 1; display: inline-block;
}
.tg-kpi-ic.green  { color: var(--tg-success); }
.tg-kpi-ic.amber  { color: var(--tg-warning); }
.tg-kpi-ic.cyan   { color: var(--tg-info); }
.tg-kpi-ic.violet { color: #7c3aed; }
.tg-kpi-ic.danger { color: var(--tg-danger); }

/* Tinte suave de la tarjeta según el color del icono (separa del fondo sin tapar el icono) */
.tg-kpi { background: linear-gradient(180deg, #ffffff 0%, #f3f6fc 100%); border-color: #dfe6f2; }
.tg-kpi:has(.tg-kpi-ic.green)  { background: linear-gradient(180deg, #ffffff, #eefaf1); border-color: #cdeeda; }
.tg-kpi:has(.tg-kpi-ic.amber)  { background: linear-gradient(180deg, #ffffff, #fef7ea); border-color: #f4e6c5; }
.tg-kpi:has(.tg-kpi-ic.cyan)   { background: linear-gradient(180deg, #ffffff, #eafaff); border-color: #c7ebf6; }
.tg-kpi:has(.tg-kpi-ic.violet) { background: linear-gradient(180deg, #ffffff, #f5effe); border-color: #e2d4f8; }
.tg-kpi:has(.tg-kpi-ic.danger) { background: linear-gradient(180deg, #ffffff, #fef0f0); border-color: #f6d2d2; }
.tg-kpi::after { display: none; }
.tg-kpi-val { font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--tg-ink); }
.tg-kpi-label { font-size: .82rem; color: var(--tg-muted); margin-top: .25rem; font-weight: 500; }
.tg-kpi-sub { font-size: .76rem; margin-top: .35rem; font-weight: 600; }
.tg-kpi-sub.up { color: var(--tg-success); }
.tg-kpi-sub.down { color: var(--tg-danger); }
.tg-kpi::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--tg-primary-soft); opacity: .6; z-index: 0; }
.tg-kpi > * { position: relative; z-index: 1; }

/* ---------- Botones ---------- */
.btn { border-radius: 12px; font-weight: 600; padding: .55rem 1.1rem; transition: transform .15s var(--tg-ease), box-shadow .15s var(--tg-ease), filter .15s; }
.btn:active { transform: scale(.97); }
.btn-lg { border-radius: 14px; padding: .8rem 1.4rem; }
.btn-sm { border-radius: 10px; }
.btn-primary { background: var(--tg-grad); border: none; box-shadow: 0 8px 18px rgba(37, 99, 235, .28); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(37, 99, 235, .38); }
.btn-success { background: var(--tg-grad-green); border: none; }
.btn-warning { background: var(--tg-grad-amber); border: none; color: #fff; }
.btn-danger  { background: linear-gradient(135deg,#ef4444,#f87171); border: none; }
.btn-outline-primary { border-color: #cdd9f3; color: var(--tg-primary); }
.btn-outline-primary:hover { background: var(--tg-primary); border-color: var(--tg-primary); transform: translateY(-2px); }
.btn-outline-secondary { border-color: #e2e8f0; color: var(--tg-muted); }
.btn-outline-secondary:hover { background: #f1f5f9; color: var(--tg-ink); border-color: #cbd5e1; }

/* ---------- Chips / filtros ---------- */
.tg-chip, .ch-chip {
    border: 1px solid var(--tg-line); background: #fff; border-radius: 999px; padding: .4rem .9rem;
    font-size: .82rem; font-weight: 600; color: var(--tg-muted); transition: all .15s var(--tg-ease);
}
.tg-chip:hover, .ch-chip:hover { border-color: #cbd5e1; transform: translateY(-1px); }
.tg-chip.active, .ch-chip.active { background: var(--tg-grad); color: #fff !important; border-color: transparent; box-shadow: 0 6px 14px rgba(37,99,235,.28); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; border-radius: 8px; padding: .38em .7em; letter-spacing: .01em; }
.badge.rounded-pill { border-radius: 999px; }
.bg-primary { background: var(--tg-primary) !important; }
.bg-success { background: var(--tg-success) !important; }
.bg-warning { background: var(--tg-warning) !important; }
.bg-danger  { background: var(--tg-danger) !important; }
.bg-info    { background: var(--tg-info) !important; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; color: var(--tg-ink); }
.table > :not(caption) > * > * { padding: .9rem 1rem; border-bottom-color: var(--tg-line); }
.table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tg-muted); font-weight: 700; border-bottom: 1px solid var(--tg-line); background: #fbfcfe; }
.table-hover > tbody > tr { transition: background .15s var(--tg-ease); }
.table-hover > tbody > tr:hover > * { background: var(--tg-primary-soft); }
.table-responsive { border-radius: var(--tg-radius); }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border-radius: 12px; border: 1px solid #e2e8f0; padding: .6rem .85rem; color: var(--tg-ink);
    transition: border-color .15s var(--tg-ease), box-shadow .15s var(--tg-ease);
}
.form-control:focus, .form-select:focus { border-color: var(--tg-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.form-label { font-weight: 600; font-size: .85rem; color: #334155; margin-bottom: .35rem; }
.input-group-text { border-radius: 12px; background: #f8fafc; border-color: #e2e8f0; color: var(--tg-muted); }

/* ---------- Alertas ---------- */
.alert { border: none; border-radius: var(--tg-radius-sm); padding: .9rem 1.1rem; }
.alert-success { background: #ecfdf3; color: #15803d; }
.alert-info    { background: #eff6ff; color: #1e40af; }
.alert-warning { background: #fffbeb; color: #b45309; }
.alert-danger  { background: #fef2f2; color: #b91c1c; }
.alert-light   { background: #f8fafc; color: var(--tg-muted); }

/* ---------- Dropdowns / modales / list-group ---------- */
.dropdown-menu { border: 1px solid var(--tg-line); border-radius: var(--tg-radius-sm); box-shadow: var(--tg-shadow-lg); padding: .4rem; }
.dropdown-item { border-radius: 10px; padding: .5rem .75rem; font-weight: 500; }
.dropdown-item:hover { background: var(--tg-primary-soft); color: var(--tg-primary); }
.modal-content { border: none; border-radius: var(--tg-radius); box-shadow: var(--tg-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--tg-line); }
.list-group-item { border-color: var(--tg-line); padding: .85rem 1rem; }
.list-group-item:first-child { border-top-left-radius: var(--tg-radius-sm); border-top-right-radius: var(--tg-radius-sm); }
.list-group-item:last-child { border-bottom-left-radius: var(--tg-radius-sm); border-bottom-right-radius: var(--tg-radius-sm); }

/* ---------- Progreso ---------- */
.progress { border-radius: 999px; background: #eef2f7; height: 9px; }
.progress-bar { background: var(--tg-grad); border-radius: 999px; }

/* ---------- Mapas integrados (Leaflet) ---------- */
.leaflet-container { border-radius: var(--tg-radius); }
.map-shell, .ch-map-col { border-radius: var(--tg-radius); box-shadow: var(--tg-shadow); overflow: hidden; }

/* ---------- Microanimaciones ---------- */
@keyframes tgFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tg-animate, .card, .tg-kpi { animation: tgFadeUp .35s var(--tg-ease) both; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Utilidades ---------- */
.tg-page-title { font-size: 1.5rem; font-weight: 800; margin-bottom: .15rem; }
.tg-page-sub { color: var(--tg-muted); margin-bottom: 1.4rem; }
.tg-soft { background: var(--tg-primary-soft); color: var(--tg-primary); }