/* =====================================================================
   TPChiloé — Sistema de diseño (ADN GW Factory)
   Profundidad sutil, transiciones suaves, paleta corporativa 50/700,
   tipografía Inter. Complementa a Tailwind (CDN).
   ===================================================================== */

:root {
    --marca-50: #eef4ff;
    --marca-600: #1e40af;
    --marca-700: #1b3a9c;
    --borde: #e2e8f0;        /* slate-200 */
}

[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fondo con un degradado tenue para superficies de paneles/formularios. */
.gw-bg {
    background:
        radial-gradient(1200px 600px at 100% -10%, #e8efff 0%, rgba(232,239,255,0) 60%),
        radial-gradient(900px 500px at -10% 110%, #eef2f7 0%, rgba(238,242,247,0) 55%),
        #f6f8fb;
}

/* Transiciones suaves para elementos interactivos (efecto WOW discreto). */
button, a, input, select, textarea, .gw-card, .gw-tr {
    transition: all .2s ease-in-out;
}

/* --- Tarjetas con elevación y profundidad --- */
.gw-card {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}
.gw-card-hover:hover {
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08), 0 16px 40px rgba(15, 23, 42, .10);
    transform: translateY(-2px);
}

/* --- Botones --- */
.gw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; border-radius: .75rem; padding: .625rem 1.1rem; cursor: pointer;
    border: 1px solid transparent; line-height: 1;
}
.gw-btn:active { transform: scale(.97); }
.gw-btn-primary { background: var(--marca-600); color: #fff; box-shadow: 0 6px 16px rgba(30,64,175,.25); }
.gw-btn-primary:hover { background: var(--marca-700); box-shadow: 0 8px 22px rgba(30,64,175,.32); }
.gw-btn-ghost { background: #fff; color: #334155; border-color: var(--borde); }
.gw-btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }

/* --- Campos de formulario --- */
.gw-input, input[type=text]:not(.bus-arrow), input[type=tel], input[type=email],
input[type=password], input[type=number], input[type=date], select, textarea {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: .65rem;
}
.gw-input:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca-600);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .15);
}

/* --- Tablas --- */
.gw-table thead th { background: #f8fafc; color: #64748b; font-weight: 600; }
.gw-table tbody tr { transition: background .15s ease; }
.gw-table tbody tr:hover { background: #f8fafc; }

/* --- Badges suaves (50/700) --- */
.gw-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600;
    padding: .15rem .55rem; border-radius: 9999px; border: 1px solid transparent; }
.gw-badge-ok    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.gw-badge-off   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.gw-badge-warn  { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.gw-badge-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* --- Animación de entrada --- */
@keyframes gw-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gw-fade-in { animation: gw-fade-in .35s ease-out both; }

/* Scrollbar discreta (WebKit). */
.gw-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.gw-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

/* =====================================================================
   Mapa y marcadores (Leaflet) — se conservan de la versión anterior
   ===================================================================== */

#mapa { width: 100%; height: 100%; }

.bus-marker { background: transparent; border: none; }
.bus-dot {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.bus-arrow { font-size: 12px; line-height: 1; display: inline-block; transform-origin: center; }

.bus-self {
    width: 22px; height: 22px; border-radius: 50%; background: #2563eb;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); position: relative;
}
.bus-self span {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid #2563eb; animation: pulso 1.6s ease-out infinite;
}
@keyframes pulso {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Marcador de ubicación del usuario público (violeta con halo). */
.user-marker { background: transparent; border: none; }
.user-dot {
    width: 20px; height: 20px; border-radius: 50%; background: #7c3aed;
    border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); position: relative;
}
.user-dot span {
    position: absolute; inset: -7px; border-radius: 50%;
    border: 2px solid #7c3aed; animation: pulso 1.8s ease-out infinite;
}

.latido { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }