/* =====================================================================
   Conecta Chiloé — Sistema de diseño (Brandbook v3.0)
   Identidad: Azul confianza (#1E88E5) + Verde territorio (#43A047) + blanco claridad.
   Tipografía Montserrat (títulos) / Poppins (cuerpo). Complementa a Tailwind (CDN).
   ===================================================================== */

:root {
    --marca-50: #e3f2fd;
    --marca-600: #1e88e5;     /* Azul — confianza (primario) */
    --marca-700: #1976d2;
    --azul: #1e88e5;          /* Azul de marca */
    --verde: #43a047;         /* Verde — territorio */
    --cielo: #90caf9;         /* Azul claro de apoyo */
    --gris: #f2f4f7;          /* Gris neutro de superficie */
    --borde: #e2e8f0;         /* slate-200 */
}

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

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

/* Títulos con la tipografía principal de marca. */
h1, h2, h3, h4, h5, h6, .cc-display {
    font-family: 'Montserrat', 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* Fondo con un degradado tenue para superficies de paneles/formularios. */
.cc-bg {
    background:
        radial-gradient(1200px 600px at 100% -10%, #e3f2fd 0%, rgba(227,242,253,0) 60%),
        radial-gradient(900px 500px at -10% 110%, #e8f5e9 0%, rgba(232,245,233,0) 55%),
        var(--gris);
}

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

/* --- Tarjetas con elevación y profundidad --- */
.cc-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);
}
.cc-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 --- */
.cc-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;
}
.cc-btn:active { transform: scale(.97); }
.cc-btn-primary { background: var(--marca-600); color: #fff; box-shadow: 0 6px 16px rgba(30,136,229,.28); }
.cc-btn-primary:hover { background: var(--marca-700); box-shadow: 0 8px 22px rgba(30,136,229,.36); }
.cc-btn-ghost { background: #fff; color: #334155; border-color: var(--borde); }
.cc-btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }

/* --- Campos de formulario --- */
.cc-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;
}
.cc-input:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca-600);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, .18);
}

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

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

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

/* Scrollbar discreta (WebKit). */
.cc-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.cc-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: #1e88e5;
    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 #1e88e5; 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 (Verde territorio con halo). */
.user-marker { background: transparent; border: none; }
.user-dot {
    width: 20px; height: 20px; border-radius: 50%; background: #43a047;
    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 #43a047; 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; } }