/* ==========================================================
   CRM - SOLUTIONSCODE DARK THEME (GRAFITO #10151a + ACENTO)
   Paleta tomada de solutionscodearg.com
   ========================================================== */

:root {
    /* El acento suelto, en canal RGB. Todo lo que antes escribia
       "43, 229, 139" a mano ahora lee esta variable, y
       js/apariencia.js la pisa cuando el usuario elige otro color.
       Es lo que hace que cambiar el acento repinte la aplicacion
       entera y no solamente los botones. */
    --acento-rgb: 43, 229, 139;

    /* Escala grafito de solutionscodearg.com (src/styles/global.css) */
    --bg-main: #10151a;
    --bg-surface: #171d23;
    --bg-card: #222a31;
    --bg-glass: rgba(23, 29, 35, 0.72);
    --border-color: #2e383f;
    --border-glow: rgba(var(--acento-rgb), 0.45);

    /* Aurora: los 4 radiales que pintan el fondo del sitio */
    --aurora-1: #1d4650;
    --aurora-2: #27385c;
    --aurora-3: #1a504d;
    --aurora-4: #1c5a3e;

    --vivo-rosa: #f472b6;
    --vivo-violeta: #a78bfa;
    --vivo-celeste: #38bdf8;

    /* Verde terminal: el acento de accion (copper / copper-hot / copper-dim) */
    --primary: #2be58b;
    --primary-hover: #54ffa8;
    --primary-dim: #0f6e56;
    --accent: #2be58b;
    --accent-glow: rgba(var(--acento-rgb), 0.3);

    --success: var(--primary);
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #38bdf8;

    --text-main: #e8ece9;
    --text-muted: #9aa5a0;
    --text-dim: #8b9a95;

    --status-inactivo: #8b9a95;
    --status-contactado: #38bdf8;
    --status-propuesta: #f59e0b;
    --status-vendido: var(--primary);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* El sitio habla entero en monoespaciada: titulos y cuerpo comparten
       la misma voz que las lineas de codigo. */
    --font-family: 'JetBrains Mono', ui-monospace, monospace;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* BASE RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
}

/* FONDO GRAFITO PLANO �?" sin aurora de color. Queda un unico velo verde
   muy tenue arriba para que el grafito no se lea como negro muerto. */
html {
    background:
        radial-gradient(90% 60% at 50% -10%, rgba(var(--acento-rgb), 0.05) 0%, transparent 65%),
        var(--bg-main);
    background-attachment: fixed;
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
}

body {
    background: transparent;
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

::selection {
    background: var(--primary);
    color: var(--bg-main);
}

/* PANTALLA DE CARGA SPLASH DARK GRAFITO CON ACCESO COBRE */
.splash-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: splashZoomIn 0.8s ease-out;
}

/* --- El nombre en el arranque ------------------------------------
   Antes era un PNG dentro de una tarjeta con resplandor. El PNG traia
   dos problemas: dibujaba "S/C" en sus propios colores, ajeno al acento
   que la persona eligio, y sobre el tema claro la tarjeta quedaba como
   un recuadro blanco flotando en un fondo casi blanco.

   Escrito con letras se arregla solo: hereda el color del tema y es
   nitido en cualquier pantalla, pese menos que la imagen.

   Las letras entran de a una. La version de moda para esto anima un
   `filter: blur()` que se va aclarando, y queda muy bien, pero este
   proyecto ya saco el blur de todos lados por lo que cuesta: obliga a
   rasterizar el arbol en una textura aparte y rehacerla en cada cuadro.
   No voy a reintroducirlo por un efecto de medio segundo.

   El reemplazo usa opacidad, desplazamiento y escala —las tres cosas
   que el compositor resuelve sin repintar— y se lee practicamente
   igual: las letras emergen en vez de aparecer de golpe. */
.marca-splash {
    display: flex;
    align-items: baseline;
    font-family: var(--font-mono, monospace);
    font-size: clamp(1.6rem, 6.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

.marca-splash__parte {
    display: inline-flex;
    color: var(--text-main);
}

/* La mitad que se lleva el color elegido en Apariencia. */
.marca-splash__parte--acento {
    color: rgb(var(--acento-rgb));
}

.marca-splash span span {
    display: inline-block;
    opacity: 0;
    /* El turno de cada letra. Trece letras a 45 ms entran en 585 ms:
       se lee como una sola palabra apareciendo, no como un cartel de
       aeropuerto girando letra por letra. */
    animation: marcaLetra 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: calc(var(--i) * 45ms);
}

@keyframes marcaLetra {
    from {
        opacity: 0;
        transform: translateY(0.3em) scale(0.86);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* El guion bajo de la marca. Late como un cursor de terminal, y arranca
   recien cuando termino de escribirse el nombre. */
.marca-splash__cursor {
    color: rgb(var(--acento-rgb));
    opacity: 0;
    animation: marcaCursor 1.1s steps(1, end) 0.62s infinite;
}

@keyframes marcaCursor {
    0%, 45%  { opacity: 1; }
    46%, 100% { opacity: 0; }
}

/* Una linea fina que se estira debajo del nombre. Reemplaza a la barra
   de progreso, que prometia un progreso que nadie estaba midiendo. */
.splash-linea {
    width: min(260px, 60vw);
    height: 2px;
    background: rgba(var(--acento-rgb), 0.14);
    border-radius: 2px;
    overflow: hidden;
}

.splash-linea span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgb(var(--acento-rgb)),
        transparent);
    /* Solo transform: la barra se mueve en el compositor y no obliga a
       recalcular el layout en cada cuadro. */
    animation: splashBarrido 1.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes splashBarrido {
    from { transform: translateX(-110%); }
    to   { transform: translateX(360%); }
}

/* La version del login: mismo nombre, sin coreografia. Las letras no
   entran de a una porque ahi no hay nada que esperar —la pantalla ya
   esta— y un titulo que se arma solo cada vez que alguien vuelve a la
   pestana cansa. El cursor sigue latiendo, que es la firma de la marca. */
.marca-splash--quieta {
    justify-content: center;
    font-size: clamp(1.35rem, 5vw, 2rem);
}

.marca-splash--quieta .marca-splash__cursor {
    animation-delay: 0s;
}

/* Red de seguridad: el logo de marca lo pone el cliente y puede venir en
   cualquier proporcion. Ningun uso puede desbordar su contenedor. */
img[data-marca-logo] {
    object-fit: contain;
    max-width: 100%;
}

/* MARCA DE AGUA: detras de todo y discreta. Sin acotar, un PNG grande
   ocupaba la pantalla entera y tapaba el CRM. */
.watermark-logo-glow-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.watermark-logo-img {
    width: auto;
    height: 320px;
    max-width: 40vw;
    max-height: 40vh;
    object-fit: contain;
    opacity: 0.035;
    filter: grayscale(1);
}

.splash-subtext {
    color: var(--text-dim, var(--text-muted));
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--font-mono);
    margin: 0;
    /* Entra ultimo y despacio: es el renglon menos importante de los
       tres y no tiene por que competir con el nombre. */
    opacity: 0;
    animation: splashApagado 0.7s ease-out 0.55s forwards;
}

@keyframes splashApagado {
    to { opacity: 0.65; }
}

@keyframes splashZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* PANTALLA DE LOGIN GRAFITO CON PULSO COBRE */
.auth-card-3d {
    width: 100%;
    max-width: 440px;
    padding: 2.75rem 2.25rem 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 0 45px var(--accent-glow),
        0 20px 40px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    position: relative;
    z-index: 2;
    /* Entra una vez, con ganas, y se queda quieta.

       Antes latia para siempre animando `box-shadow`: una sombra no se
       puede interpolar en el compositor, asi que el navegador repintaba
       la tarjeta entera veinte veces por segundo mientras alguien
       tipeaba su contrasena. El movimiento ahora esta donde se nota
       —la entrada— y sale de transform y opacidad. */
    animation: authEntrada 0.55s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

@keyframes authEntrada {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* Los campos entran detras de la tarjeta, uno atras del otro. Es el
   mismo escalonado del nombre en el arranque: da sensacion de armado
   en vez de aparicion. */
.auth-card-3d .form-group-3d,
.auth-card-3d .btn-primary-3d,
.auth-card-3d .btn-primary {
    animation: authCampo 0.45s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

.auth-card-3d .form-group-3d:nth-of-type(1) { animation-delay: 0.10s; }
.auth-card-3d .form-group-3d:nth-of-type(2) { animation-delay: 0.17s; }
.auth-card-3d .form-group-3d:nth-of-type(3) { animation-delay: 0.24s; }
.auth-card-3d .btn-primary-3d,
.auth-card-3d .btn-primary { animation-delay: 0.30s; }

@keyframes authCampo {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

/* FORMULARIO Y GRUPOS DE INPUTS */
.form-group-3d {
    margin-bottom: 1.5rem;
}

.form-group-3d label {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin-bottom: 8px !important;
}

/* BOT�"N 3D EN COLOR COBRE SOLUTIONSCODE (var(--primary) / #1c5a3e) */
.btn-primary-3d, .btn-primary {
    background: transparent !important;
    border: 1.5px solid var(--primary) !important;
    color: var(--primary) !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(var(--acento-rgb), 0.35) !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 0.5rem !important;
}

.btn-primary-3d:hover, .btn-primary:hover {
    background: rgba(var(--acento-rgb), 0.12) !important;
    border-color: var(--primary-hover) !important;
    color: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(var(--acento-rgb), 0.25) !important;
}

.btn-primary-3d i, .btn-primary i {
    font-size: 1.15rem !important;
    color: inherit !important;
}

.input-glow-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
    transition: var(--transition) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.input-glow-wrapper:focus-within {
    border-color: var(--primary) !important;
    background: var(--bg-surface) !important;
    box-shadow: 0 0 16px var(--accent-glow) !important;
}

.icon-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(var(--acento-rgb), 0.15) !important;
    border: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    font-size: 0.95rem !important;
}

.input-glow-wrapper input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text-main) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 8px 4px !important;
}

.input-glow-wrapper input::placeholder {
    color: var(--text-dim) !important;
}

.auth-footer-3d {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.auth-footer-3d p {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.auth-footer-3d strong {
    color: var(--primary);
    font-weight: 700;
}

/* UTILITY CLASSES & GLASS PANELS */
.hidden { display: none !important; }

.glass-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-md);
}

/* TOP NAVBAR SOLUTIONSCODE THEME */
.top-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    margin-bottom: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.badge-admin {
    background: rgba(var(--acento-rgb), 0.15);
    color: var(--primary);
    border: 1px solid var(--border-color);
}

/* MAIN TABS SOLUTIONSCODE THEME */
.main-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-main);
    background: var(--bg-card);
}

.tab-btn.active {
    background: rgba(var(--acento-rgb), 0.10);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* KANBAN BOARD & CARDS SOLUTIONSCODE THEME */
.kanban-column {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.lead-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--text-main);
}

.lead-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px var(--accent-glow);
    transform: translateY(-2px);
}

.lead-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
}

.lead-card-phone {
    font-size: 0.88rem;
    color: var(--primary);
    font-weight: 600;
    font-family: var(--font-mono);
}

.lead-card-details {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* TABLES SOLUTIONSCODE THEME */
.custom-table th {
    color: var(--text-main);
    font-weight: 700;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}

.custom-table td {
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* MODALS SOLUTIONSCODE THEME */
.modal-card {
    width: 100%;
    max-width: 580px;
    padding: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-lg);
    color: var(--text-main);
}

.modal-header h3 {
    color: var(--text-main);
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
.select-field {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.brand-header-3d {
    text-align: center;
    margin-bottom: 2rem;
}

.logo-3d-glow {
    width: 220px;
    height: auto;
    margin: 0 auto 0.75rem;
    display: block;
    filter: drop-shadow(0 0 18px rgba(var(--acento-rgb), 0.45));
}

.brand-subline-3d {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* FORMULARIO Y GRUPOS DE INPUTS EN CÁPSULA NE�"N */
.form-group-3d {
    margin-bottom: 1.5rem;
}

.form-group-3d label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--border-color);
    margin-bottom: 8px;
}

.input-glow-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 14px;
    padding: 6px 12px;
    transition: var(--transition);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.input-glow-wrapper:focus-within {
    border-color: #38bdf8;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 0.95rem;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.input-glow-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--bg-card);
    font-size: 0.95rem;
    padding: 8px 4px;
}

.input-glow-wrapper input::placeholder {
    color: var(--text-muted);
}

/* BOT�"N 3D VERDE TERMINAL SOLUTIONSCODE */
.btn-primary-3d {
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0.5rem;
}

.btn-primary-3d:hover {
    transform: translateY(-2px);
    background: rgba(var(--acento-rgb), 0.12);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
    box-shadow: 0 0 30px rgba(var(--acento-rgb), 0.28);
}

.btn-primary-3d i {
    font-size: 1.2rem;
    color: inherit;
}

/* FOOTER FUTURISTA */
.auth-footer-3d {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-footer-3d p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.auth-footer-3d strong {
    color: var(--bg-card);
}

.powered-badge {
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.powered-badge small { color: var(--text-muted); }

.brand-subline {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
    font-weight: 500;
}

.navbar-logo {
    height: 36px;
    width: auto;
    display: block;
}

/* UTILITY CLASSES */
.hidden { display: none !important; }
.glass-panel {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-main);
}

.text-center { text-align: center; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* SCREEN VIEWS */
.view-screen {
    min-height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.view-screen.active {
    display: flex;
}

/* FORM ELEMENTS SOLUTIONSCODE DARK THEME */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main) !important;
    margin-bottom: 6px;
}

.form-group label i {
    margin-right: 4px;
    color: var(--primary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
.select-field,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-sm);
    color: var(--text-main) !important;
    font-size: 0.95rem;
    font-weight: 600 !important;
    transition: var(--transition);
}

input:focus, textarea:focus, .select-field:focus, select:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.select-field option, select option {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

/* BUTTONS SOLUTIONSCODE THEME */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: transparent !important;
    border: 1.5px solid var(--primary) !important;
    color: var(--primary) !important;
    box-shadow: none !important;
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: rgba(var(--acento-rgb), 0.12) !important;
    border-color: var(--primary-hover) !important;
    color: var(--primary-hover) !important;
    box-shadow: 0 4px 14px rgba(var(--acento-rgb), 0.2) !important;
}

.btn-accent {
    background: transparent !important;
    border: 1.5px solid var(--primary) !important;
    color: var(--primary) !important;
}

.btn-warning {
    background: transparent !important;
    border: 1.5px solid var(--warning) !important;
    color: var(--warning) !important;
    font-weight: 700;
}

.btn-secondary {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover {
    background: var(--bg-surface) !important;
    border-color: var(--primary) !important;
}

.btn-danger {
    background: transparent !important;
    border: 1.5px solid var(--danger) !important;
    color: var(--danger) !important;
}

.btn-block { width: 100%; }

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
}

.btn-icon:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* WORKSPACE LAYOUT SOLUTIONSCODE DARK THEME */
#crm-workspace.hidden {
    display: none !important;
}

#crm-workspace:not(.hidden) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    max-width: 1440px;
    margin: 0 auto;
    background: var(--bg-main) !important;
}

/* TOP NAVBAR */
.top-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    margin-bottom: 1rem;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    border-radius: var(--radius-md);
}

.user-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main) !important;
}

.badge-admin {
    background: rgba(var(--acento-rgb), 0.15) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* TAB CONTENT SWITCHING & ISOLATION */
.tab-content {
    display: none !important;
}

/* Al cambiar de pestana el contenido sube apenas mientras aparece.

   El desplazamiento es de 6px y no de 20: la pestana de consultas
   puede traer miles de tarjetas, y cuanto mas lejos viaja la capa mas
   superficie tiene que rasterizar el navegador de una sola vez. Seis
   pixeles se perciben igual —el ojo lee la direccion, no la
   distancia— y entran en un cuadro. */
.tab-content.active {
    display: block !important;
    animation: vistaEntra 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes vistaEntra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* MAIN TABS BAR */
.main-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 1.25rem;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.85rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-muted) !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.tab-btn:hover {
    color: var(--text-main) !important;
    background: var(--bg-card) !important;
}

.tab-btn.active {
    background: rgba(var(--acento-rgb), 0.10) !important;
    color: var(--primary) !important;
    box-shadow: inset 0 0 0 1.5px var(--primary) !important;
}

/* DASHBOARD METRICS */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.icon-blue { background: rgba(var(--acento-rgb), 0.15) !important; color: var(--primary) !important; border: 1px solid var(--border-color) !important; }
.icon-yellow { background: rgba(245, 158, 11, 0.15) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; }
.icon-green { background: rgba(var(--acento-rgb), 0.15) !important; color: var(--primary) !important; border: 1px solid rgba(var(--acento-rgb), 0.3) !important; }
.icon-purple { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; }

.metric-data h3 {
    font-size: 0.8rem;
    color: var(--text-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
}

.metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main) !important;
    margin: 2px 0;
    font-family: var(--font-mono);
}

.metric-subtext {
    font-size: 0.75rem;
    color: var(--text-dim) !important;
}

/* CHARTS GRID */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.25rem;
}

.chart-card {
    padding: 1.25rem;
    background: var(--bg-surface) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.chart-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main) !important;
}

.chart-tag {
    font-size: 0.75rem;
    color: var(--primary) !important;
    background: rgba(var(--acento-rgb), 0.15) !important;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color) !important;
    font-weight: 600;
    font-family: var(--font-mono);
}

.chart-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 260px;
}

/* --- El embudo de etapas -----------------------------------------
   No es un canvas: son barras y texto en DOM. Asi que no quiere el
   centrado del .chart-body, quiere ocupar el ancho y apilarse. */
.chart-body.embudo-etapas {
    display: block;
    align-items: stretch;
    padding: 4px 2px 0;
}

/* La deuda de contacto, arriba de todo. Es el numero que hay que
   mirar y por eso va en cuerpo grande, no como una fila mas. */
.embudo-titular {
    margin: 0 0 14px;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.embudo-titular strong {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: rgb(var(--acento-rgb));
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}

.embudo-titular-resto { display: block; font-size: 0.76rem; color: var(--text-dim); }

/* El cierre: lo que salio del embudo por arriba y lo que se cayo.
   Sin barra, porque no es un paso del recorrido. */
.embudo-cierre {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.embudo-cierre i { margin-right: 5px; color: var(--text-dim); }

.embudo-vacio {
    margin: 0;
    padding: 28px 0;
    text-align: center;
    font-size: 0.84rem;
    color: var(--text-muted);
}

/* Chart.js con responsive:true crece sin techo si el contenedor no tiene
   altura propia: en cada re-render lee la altura que el canvas acaba de
   fijar y la duplica. Se acota el contenedor del canvas. */
.chart-body:has(> canvas) {
    position: relative;
    display: block;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    overflow: hidden;
}

.chart-body > canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* KANBAN BOARD & COLUMNS SOLUTIONSCODE THEME */
.section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    border-radius: var(--radius-md);
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.search-input {
    position: relative;
    flex: 1;
    max-width: 380px;
}

.search-input i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

.search-input input {
    padding-left: 2.25rem !important;
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.kanban-column {
    background: var(--bg-surface) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}

.column-header {
    background: color-mix(in srgb, var(--estado-color, var(--primary)) 15%, var(--surf-2));
    color: var(--text-main);
    border: 1px solid color-mix(in srgb, var(--estado-color, var(--primary)) 40%, rgba(var(--acento-rgb), 0.2));
}

.status-badge {
    background: color-mix(in srgb, var(--estado-color, var(--primary)) 15%, var(--surf-2));
    color: var(--text-main);
    border: 1px solid color-mix(in srgb, var(--estado-color, var(--primary)) 40%, rgba(var(--acento-rgb), 0.2));
}

.count-badge {
    background: rgba(var(--acento-rgb), 0.2) !important;
    color: var(--primary) !important;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

/* POOL TABLE & USERS GRID SOLUTIONSCODE THEME */
.pool-container, .users-container {
    padding: 1.75rem;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4) !important;
}

.pool-header, .users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.pool-header h3, .users-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main) !important;
}

.pool-header p, .users-header p {
    font-size: 0.85rem;
    color: var(--text-muted) !important;
    margin-top: 4px;
}

.batch-assign-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.batch-assign-controls select {
    max-width: 260px;
}

/* CUSTOM TABLE STYLING */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    margin-top: 1rem;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--bg-card) !important;
}

.custom-table th {
    padding: 1rem 1.25rem !important;
    text-align: left;
    color: var(--text-main) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-surface) !important;
    border-bottom: 2px solid var(--border-color) !important;
    white-space: nowrap;
}

.custom-table td {
    padding: 1rem 1.25rem !important;
    text-align: left;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: middle;
    font-size: 0.9rem;
}

.custom-table tbody tr:hover {
    background: var(--bg-surface) !important;
}

/* USERS GRID STYLING */
.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.user-card {
    padding: 1.5rem;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 170px;
    transition: var(--transition);
}

.user-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary) !important;
    box-shadow: 0 8px 24px var(--accent-glow) !important;
}

.user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.user-card-body h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main) !important;
}

.user-card-body p {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
    margin: 6px 0 14px;
}

.user-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

/* ANIMATIONS */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* OVERLAY DE SINCRONIZACI�"N GLASSMORPHISM EN TIEMPO REAL CON LOGO GRANDE Y ONDAS COBRE */
.crm-sync-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-glass);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.crm-sync-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sync-overlay-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 35px var(--accent-glow);
    border-radius: 20px;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    width: 90%;
    /* El ancho maximo va abajo, en una regla con mas especificidad:
       ver "EL ANCHO DE LAS TARJETAS QUE FLOTAN". */
    animation: syncPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes syncPopIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.sync-logo-container {
    position: relative;
    width: 160px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sync-logo-pulse {
    width: 145px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 6px 16px var(--accent-glow));
    animation: logoPulseScale 1.5s infinite ease-in-out;
}

@keyframes logoPulseScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* ONDAS COBRE DE ACENTO (COPPER WAVE RIPPLES) */
.blue-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2.5px solid rgba(var(--acento-rgb), 0.6);
    background: rgba(var(--acento-rgb), 0.08);
    pointer-events: none;
    z-index: 1;
    animation: copperWaveExpand 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.blue-wave.wave-2 {
    animation-delay: 0.5s;
}

@keyframes copperWaveExpand {
    0% {
        width: 70px;
        height: 70px;
        opacity: 0.9;
        border-width: 3px;
        box-shadow: 0 0 12px rgba(var(--acento-rgb), 0.5);
    }
    100% {
        width: 210px;
        height: 210px;
        opacity: 0;
        border-width: 1px;
        box-shadow: 0 0 25px rgba(var(--acento-rgb), 0);
    }
}

.sync-overlay-text {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.01em;
    margin: 0;
}

/* ==========================================================
   SEGUIMIENTO: agenda, chips y linea de tiempo
   ========================================================== */

.chip-seguimiento {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--chip, var(--primary)) 15%, var(--surf-2));
    color: var(--text-main);
    border: 1px solid color-mix(in srgb, var(--chip, var(--primary)) 35%, rgba(var(--acento-rgb), 0.2));
}

/* --- Agenda del dashboard --- */
.agenda-panel { margin-bottom: 1.25rem; padding: 1.1rem; }

.agenda-titulo {
    margin: 0.9rem 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.agenda-titulo:first-child { margin-top: 0; }

.agenda-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--chip, var(--primary));
    border-radius: 12px;
}

.agenda-datos { flex: 1; min-width: 0; }
.agenda-datos strong { display: block; font-size: 0.9rem; color: var(--text-main); }
.agenda-datos small { color: var(--text-muted); font-size: 0.78rem; }

.agenda-acciones { display: flex; gap: 6px; }

.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
}
.btn-mini:hover { background: var(--bg-card); border-color: var(--primary); }

/* --- Atajos para agendar el proximo contacto --- */
.atajos-fecha { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.atajos-fecha button {
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
}
.atajos-fecha button:hover { border-color: var(--primary); color: var(--primary); }

/* --- Linea de tiempo dentro de la ficha --- */
.bloque-timeline {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.bloque-timeline h4 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    color: var(--text-main);
}

.interaccion-nueva {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}
.interaccion-nueva select { flex: 0 0 150px; }
.interaccion-nueva input { flex: 1; min-width: 160px; }

.timeline { max-height: 260px; overflow-y: auto; }

.timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}
.timeline-item:last-child { border-bottom: none; }

.timeline-icono {
    flex: 0 0 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tipo-color, var(--primary)) 18%, var(--surf-2));
    color: var(--tipo-color, var(--primary));
    font-size: 0.78rem;
}

.timeline-cuerpo { flex: 1; min-width: 0; }
.timeline-cabecera {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--text-main);
}
.timeline-cabecera span { color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; }
.timeline-detalle { margin: 3px 0; font-size: 0.83rem; color: var(--text-muted); }
.timeline-autor { color: var(--text-dim); font-size: 0.72rem; }

.timeline-vacio {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
}

/* ==========================================================
   IMPORTACION DE CSV
   ========================================================== */

.csv-ayuda {
    margin: 6px 0 16px;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.csv-paso { margin-bottom: 16px; }
.csv-paso > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-main);
}

.csv-resumen { margin-bottom: 10px; font-size: 0.83rem; color: var(--text-muted); }

.csv-mapeo { max-height: 300px; overflow-y: auto; }

.csv-fila-mapeo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.csv-col-origen { min-width: 0; }
.csv-col-origen strong { display: block; font-size: 0.85rem; color: var(--text-main); }
.csv-col-origen small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.csv-fila-mapeo > i { color: var(--text-dim); }

.btn-enlace {
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-enlace:hover { text-decoration: underline; }

/* "apagar la PC" va al lado de "frenar" y no hacen lo mismo: uno
   cancela lo que falta, el otro corta el proceso en el acto. En el
   mismo azul se leerian como dos maneras de decir lo mismo y se
   apretaria el que quede mas cerca. El color es la diferencia. */
.btn-enlace.es-corte { color: var(--danger, #ef4444) !important; }

@media (max-width: 640px) {
    .csv-fila-mapeo { grid-template-columns: 1fr; }
    .csv-fila-mapeo > i { display: none; }
}

/* ==========================================================
   UTILIDADES DE FORMULARIO Y LAYOUT
   ========================================================== */

.campo {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.9rem;
}
.campo:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.campo-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-muted);
}

/* Grilla de dos columnas que colapsa sola en celular. */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* Tarjeta seleccionable (presets de avatar). */
.tarjeta-opcion {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}
.tarjeta-opcion:hover,
.tarjeta-opcion.activa { border-color: var(--primary); }

.tarjeta-opcion img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 6px;
    display: block;
    border: 1.5px solid var(--border-color);
}

.texto-acento { color: var(--primary); }

.avatar-nombre {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
}

/* ==========================================================
   TRIAGE DE CONSULTAS, BITACORA Y HORAS DE USO
   ========================================================== */

.triage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0;
}

.triage-chip {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--triage-color, #8b9a95);
    background: color-mix(in srgb, var(--triage-color, #8b9a95) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--triage-color, #8b9a95) 40%, transparent);
}

.bitacora-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.bitacora-panel {
    padding: 1.5rem;
    border-radius: 16px;
}

.bitacora-panel h3 {
    margin: 0 0 1rem;
    color: var(--text-main);
}

.bitacora-subtitulo {
    margin: 1.5rem 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-main);
}

.bitacora-ayuda,
.bitacora-vacio {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.bitacora-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
}

.bitacora-resumen span,
.bitacora-resumen a {
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(var(--acento-rgb), 0.10);
    border: 1px solid rgba(var(--acento-rgb), 0.25);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
}

.bitacora-nota-form {
    display: flex;
    gap: 8px;
    margin-bottom: 0.9rem;
}

.bitacora-nota-form input {
    flex: 1;
}

.bitacora-nota {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft, rgba(139, 154, 149, 0.25));
    margin-bottom: 8px;
}

.bitacora-nota p {
    margin: 0 0 4px;
    font-size: 0.88rem;
    color: var(--text-main);
    word-break: break-word;
}

.bitacora-nota span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.uso-totales {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.uso-totales > div {
    padding: 12px;
    border-radius: 12px;
    background: rgba(var(--acento-rgb), 0.08);
    border: 1px solid rgba(var(--acento-rgb), 0.22);
    text-align: center;
}

.uso-label {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.uso-totales strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
}

.uso-barras {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 130px;
}

.uso-barra {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
}

.uso-barra-fill {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--primary), var(--marca-color-oscuro, #1c5a3e));
    transition: height 0.3s ease;
}

.uso-barra span {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: capitalize;
}

@media (max-width: 900px) {
    .bitacora-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   BANDEJA DE CONSULTAS / CARTERA DE PROYECTOS / CLIENTES
   ========================================================== */

/* El encabezado de seccion y la barra de filtros viven en ui.css:
   son patrones compartidos por todas las pestanas, no de esta. */

/* Termometro: una fila de tarjetas chatas, no metric-cards grandes */
.consultas-resumen,
.clientes-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 1.25rem;
}

.consultas-resumen:empty {
    display: none;
}

.resumen-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--triage-color, var(--primary));
}

.resumen-item strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-main);
}

.resumen-item span {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
}

.resumen-item small {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--text-dim);
}

.resumen-total {
    --triage-color: var(--primary);
    background: rgba(var(--acento-rgb), 0.08);
}

/* --- Cartera de proyectos --- */

.historial-wrap {
    margin-top: 2rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.historial-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.historial-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.historial-head h3 i {
    color: var(--primary);
}

.historial-head p {
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.historial-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.historial-filtros .select-field,
.historial-filtros .btn {
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0 10px;
}

.historial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

/* --- Estado vacio de tablas --- */

.tabla-vacia {
    text-align: center;
    padding: 2.5rem 1.5rem;
    max-width: 52ch;
    margin: 0 auto;
}

.tabla-vacia > i {
    font-size: 2rem;
    color: var(--primary);
    opacity: 0.5;
    margin-bottom: 0.9rem;
    display: block;
}

.tabla-vacia h4 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: var(--text-main);
}

.tabla-vacia p {
    margin: 0 0 1.2rem;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.tabla-vacia strong {
    color: var(--primary);
}

/* El responsive de la barra de filtros lo resuelve ui.css.

   ACA HABIA UN @media (max-width: 900px) ABIERTO Y NUNCA CERRADO. Se
   comia todo lo que sigue —el bloque entero del dialogo de
   confirmacion, hasta el final del archivo— y lo dejaba valiendo solo
   en pantallas chicas. En una pantalla grande el dialogo se quedaba
   sin ancho maximo. */

/* ==========================================================
   DIALOGO DE CONFIRMACION

   Hereda .crm-sync-overlay y .sync-overlay-card, asi que el
   vidrio, el pop-in y el logo ya vienen dados. Aca solo va lo
   que el overlay de sincronizacion no necesita: el texto y los
   dos botones.
   ========================================================== */

.crm-dialogo-card {
    gap: 10px;
    padding: 22px 26px 20px;
    /* ==========================================================
       EL TECHO DE ALTURA NO ES COSMETICA: ES LO QUE HACE
       ALCANZABLE EL BOTON DE ACEPTAR

       El texto del dialogo lo arma quien lo llama, y algunos meten
       listas enteras adentro: el barrido de prospeccion pega los
       rubros seleccionados uno atras del otro y son mas de cien.
       Sin tope, la tarjeta crecia todo lo que hiciera falta, los
       botones quedaban empujados abajo del borde inferior de la
       pantalla y el barrido no se podia confirmar. La unica salida
       era Escape.

       Con el techo puesto, lo que sobra scrollea en el cuerpo y la
       botonera queda siempre a la vista. Va en vh y no en px para
       que valga igual en un monitor que en un telefono.
       ========================================================== */
    max-height: min(82vh, 560px);
}

/* El cuerpo es lo unico que cede: `min-height: 0` es lo que le
   permite encogerse dentro del flex —sin eso un hijo flex no baja de
   su contenido y el scroll nunca aparece—. */
.crm-dialogo-card .crm-dialogo-texto {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    width: 100%;
}

/* El titulo y la botonera no se encogen ni se van de cuadro */
.crm-dialogo-card .crm-dialogo-titulo,
.crm-dialogo-card .crm-dialogo-acciones,
.crm-dialogo-card .crm-dialogo-logo {
    flex-shrink: 0;
}

/* ==========================================================
   EL ANCHO DE LAS TARJETAS QUE FLOTAN

   Las dos tarjetas del overlay llevan .glass-panel, y ajustes.css le
   pone a esa clase `max-width: 100% !important` para que las tarjetas
   de las grillas se puedan encoger. Empatan en especificidad —una clase
   cada una— y ajustes.css se carga despues, asi que ganaba: la tarjeta
   se estiraba al 90% del monitor, que en una pantalla ancha son casi
   dos mil pixeles de cartel para una linea de texto.

   Se resuelve con el overlay adelante en el selector, que suma una
   clase mas. Van juntas y con el motivo escrito para que la proxima vez
   no se intente de nuevo con un !important suelto, que no alcanza.
   ========================================================== */
.crm-sync-overlay .sync-overlay-card { max-width: 340px !important; }
.crm-sync-overlay .crm-dialogo-card { max-width: 380px !important; }

/* El logo va mas chico que en el overlay: aca lo que importa es
   lo que dice, no que algo esta pasando. Y una sola onda, mas
   lenta: dos latiendo rapido leen como "esperá", y esto es
   justo lo contrario, esta esperando a la persona. */
.crm-dialogo-logo {
    width: 110px;
    height: 74px;
}

.crm-dialogo-logo .sync-logo-pulse {
    width: 96px;
    animation-duration: 3.2s;
}

.crm-dialogo-logo .blue-wave {
    animation-duration: 3.2s;
}

.crm-dialogo-titulo {
    margin: 2px 0 0;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

/* white-space: pre-line para que los \n de los mensajes largos
   (los que ya venian del confirm nativo) sigan cortando donde
   corresponde en vez de quedar todo en un parrafo. */
.crm-dialogo-texto {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
    white-space: pre-line;
}

.crm-dialogo-texto:empty { display: none; }

.crm-dialogo-acciones {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.crm-dialogo-btn {
    flex: 1;
    height: 40px;
    padding: 0 16px;
    border-radius: 11px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 150ms ease, background 150ms ease, border-color 150ms ease;
}

.crm-dialogo-btn:focus-visible {
    outline: 2px solid rgba(var(--acento-rgb), 0.75);
    outline-offset: 2px;
}

.crm-dialogo-btn.es-secundario {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
}

.crm-dialogo-btn.es-secundario:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-main);
}

.crm-dialogo-btn.es-principal {
    border: 1px solid transparent;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px -6px var(--accent-glow);
}

.crm-dialogo-btn.es-principal:hover { filter: brightness(1.08); }

/* Borrar y vaciar no pueden verse igual que guardar. */
.crm-dialogo-btn.es-principal.es-peligro {
    background: #dc2626;
    box-shadow: 0 6px 18px -6px rgba(220, 38, 38, 0.55);
}

/* Cuando no hay nada que decidir (el reemplazo de alert()), el
   unico boton no se estira a lo ancho de la tarjeta. */
.crm-dialogo-btn.hidden { display: none; }

.crm-dialogo-acciones:has(.crm-dialogo-btn.hidden) {
    justify-content: flex-end;
}

.crm-dialogo-acciones:has(.crm-dialogo-btn.hidden) .es-principal {
    flex: 0 0 auto;
    min-width: 140px;
}

/* ==========================================================
   MENOS MOVIMIENTO PARA QUIEN LO PIDIO

   Las animaciones que se agregaron al arranque, al login y al
   cambio de pestana son de entrada: aparecen una vez y no se
   repiten. Aun asi, quien tiene activado "reducir movimiento"
   en su sistema operativo suele tenerlo por una razon —mareos,
   vertigo, migrana— y ese pedido se respeta.

   No se apaga la interfaz: se apaga el desplazamiento. El
   contenido queda donde tiene que quedar, visible y quieto.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .auth-card-3d,
    .auth-card-3d .form-group-3d,
    .auth-card-3d .btn-primary-3d,
    .auth-card-3d .btn-primary,
    .tab-content.active {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}