/* =====================================================================
   MACH CLOSER — Tema de marca (Manual de marca v1.0 · 2026)
   ---------------------------------------------------------------------
   Se carga AL FINAL (después de todos los <style> internos) en:
   index.html, vendedor.html, supervisor.html, administrador.html
   y configuracion_meteoro.html.

   Paleta oficial:
     Carbon   #111214  fondo principal
     Graphite #2A2D33  tarjetas, paneles
     Volt     #C6FF3D  protagonista y acción (solo 10%, solo sobre oscuro)
     Steel    #8A9099  textos secundarios e íconos
     White    #FFFFFF  textos principales
     Deep volt#4D6B00  volt para textos sobre blanco
   Estados (solo dentro de la plataforma):
     Lead caliente #FF6B2C · Lead frío #5AC8FA · Éxito #C6FF3D · Alerta #FF4D4F
   Tipografía: Poppins (Bold títulos, Medium subtítulos/etiquetas, Regular texto)
   ===================================================================== */

:root,
[data-bs-theme="dark"] {
    /* --- Paleta oficial --- */
    --mc-carbon:   #111214;
    --mc-graphite: #2A2D33;
    --mc-volt:     #C6FF3D;
    --mc-steel:    #8A9099;
    --mc-white:    #FFFFFF;
    --mc-deepvolt: #4D6B00;

    --mc-hot:     #FF6B2C;
    --mc-cold:    #5AC8FA;
    --mc-success: #C6FF3D;
    --mc-danger:  #FF4D4F;

    /* --- Variables que ya usan las páginas (tema anterior), ahora con la paleta oficial --- */
    --mc-negro:       #0C0D0F;                 /* barra superior, cabeceras */
    --mc-fondo:       var(--mc-carbon);
    --mc-card:        #1C1E22;                 /* superficie entre Carbon y Graphite */
    --mc-card-2:      #24272C;                 /* inputs, burbujas, filas */
    --mc-borde:       #33363D;
    --mc-lima:        var(--mc-volt);
    --mc-lima-hover:  #D4FF6B;
    --mc-lima-suave:  rgba(198, 255, 61, .10);
    --mc-lima-glow:   rgba(198, 255, 61, .22);
    --mc-texto:       var(--mc-white);
    --mc-texto-2:     var(--mc-steel);

    /* --- Aliases cortos para componentes nuevos --- */
    --mc-line:        var(--mc-borde);
    --mc-volt-soft:   rgba(198, 255, 61, .10);
    --mc-volt-line:   rgba(198, 255, 61, .45);
    --mc-carbon-2:    #17181B;
    --mc-graphite-2:  #34373E;
    --mc-radius:      14px;
    --mc-radius-sm:   10px;
    --mc-font:        'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* --- Bootstrap --- */
    --bs-body-font-family: var(--mc-font);
    --bs-body-bg: var(--mc-carbon);
    --bs-body-color: var(--mc-white);
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--mc-steel);
    --bs-border-color: var(--mc-borde);
    --bs-tertiary-bg: var(--mc-card-2);
    --bs-primary: var(--mc-volt);
    --bs-primary-rgb: 198, 255, 61;
    --bs-danger: var(--mc-danger);
    --bs-danger-rgb: 255, 77, 79;
    --bs-link-color: var(--mc-volt);
    --bs-link-color-rgb: 198, 255, 61;
    --bs-link-hover-color: var(--mc-lima-hover);
    --bs-border-radius: 10px;
}

/* ============================== BASE ============================== */
html, body { font-family: var(--mc-font); }
body {
    background-color: var(--mc-carbon);
    /* Rejilla sutil + resplandor volt, como las portadas del manual */
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(198, 255, 61, .06) 0%, transparent 70%),
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    background-attachment: fixed;
    color: var(--mc-white);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-5 { font-family: var(--mc-font); font-weight: 700; letter-spacing: -.01em; }
h6, .h6, .fw-semibold { font-weight: 500 !important; }
.fw-bold, strong, b { font-weight: 600; }
h5 > .bi, h6 > .bi { color: var(--mc-volt); }
::selection { background: var(--mc-volt); color: var(--mc-carbon); }

.text-muted, .text-secondary { color: var(--mc-steel) !important; }
.text-primary, .text-info { color: var(--mc-volt) !important; }
.text-success { color: var(--mc-volt) !important; }
.text-danger  { color: var(--mc-danger) !important; }
.text-warning { color: var(--mc-hot) !important; }
.text-white   { color: var(--mc-white) !important; }
.bg-light { background-color: var(--mc-card-2) !important; color: var(--mc-white) !important; }
.text-dark.bg-light { color: var(--mc-white) !important; }

/* Etiqueta de marca: Medium, mayúsculas espaciadas */
.mc-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mc-volt); }
.mc-muted { color: var(--mc-steel); }
.mc-volt  { color: var(--mc-volt); }
.mc-badge-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 26px; padding: 0 8px; border-radius: 6px;
    background: var(--mc-volt); color: var(--mc-carbon); font-weight: 700; font-size: 13px;
}

/* ============================== NAVBAR ============================== */
.navbar, .navbar.bg-primary {
    background: rgba(12, 13, 15, .92) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mc-borde);
}
.navbar-brand { color: var(--mc-white) !important; font-weight: 700; letter-spacing: 0; display: flex; align-items: center; gap: 12px; }
.navbar-brand .mc-brand-logo { height: 30px; width: auto; display: block; }
.navbar .text-white { color: var(--mc-white) !important; }
.navbar .badge.bg-light {
    background: var(--mc-volt-soft) !important; color: var(--mc-volt) !important;
    border: 1px solid var(--mc-volt-line); font-weight: 500; text-transform: capitalize;
}
.btn-outline-light {
    --bs-btn-color: var(--mc-white);
    --bs-btn-border-color: var(--mc-borde);
    --bs-btn-hover-bg: var(--mc-card-2);
    --bs-btn-hover-border-color: var(--mc-steel);
    --bs-btn-hover-color: #fff;
}

/* ============================== BOTONES ============================== */
.btn { font-family: var(--mc-font); font-weight: 500; border-radius: 10px; }
.btn-primary,
.btn-success {
    --bs-btn-bg: var(--mc-volt);
    --bs-btn-border-color: var(--mc-volt);
    --bs-btn-color: var(--mc-carbon);
    --bs-btn-hover-bg: var(--mc-lima-hover);
    --bs-btn-hover-border-color: var(--mc-lima-hover);
    --bs-btn-hover-color: var(--mc-carbon);
    --bs-btn-active-bg: var(--mc-lima-hover);
    --bs-btn-active-border-color: var(--mc-lima-hover);
    --bs-btn-active-color: var(--mc-carbon);
    --bs-btn-disabled-bg: #4a5a1a;
    --bs-btn-disabled-border-color: #4a5a1a;
    --bs-btn-disabled-color: #1a1a1a;
    font-weight: 600;
}
.btn-primary:hover, .btn-success:hover { box-shadow: none; }

.btn-outline-primary, .btn-outline-success, .btn-outline-info {
    --bs-btn-color: var(--mc-volt);
    --bs-btn-border-color: var(--mc-volt-line);
    --bs-btn-hover-bg: var(--mc-volt);
    --bs-btn-hover-border-color: var(--mc-volt);
    --bs-btn-hover-color: var(--mc-carbon);
    --bs-btn-active-bg: var(--mc-volt);
    --bs-btn-active-color: var(--mc-carbon);
}
.btn-outline-secondary, .btn-secondary {
    --bs-btn-color: var(--mc-white);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mc-borde);
    --bs-btn-hover-bg: var(--mc-card-2);
    --bs-btn-hover-border-color: var(--mc-steel);
    --bs-btn-hover-color: #fff;
}
.btn-warning {
    --bs-btn-bg: var(--mc-card-2);
    --bs-btn-border-color: var(--mc-borde);
    --bs-btn-color: var(--mc-white);
    --bs-btn-hover-bg: var(--mc-graphite);
    --bs-btn-hover-border-color: var(--mc-volt);
    --bs-btn-hover-color: var(--mc-volt);
}
.btn-outline-warning {
    --bs-btn-color: var(--mc-steel);
    --bs-btn-border-color: var(--mc-borde);
    --bs-btn-hover-bg: var(--mc-card-2);
    --bs-btn-hover-border-color: var(--mc-steel);
    --bs-btn-hover-color: #fff;
}
.btn-danger {
    --bs-btn-bg: var(--mc-danger);
    --bs-btn-border-color: var(--mc-danger);
    --bs-btn-hover-bg: #ff6668;
    --bs-btn-hover-border-color: #ff6668;
}
.btn-outline-danger {
    --bs-btn-color: var(--mc-danger);
    --bs-btn-border-color: rgba(255, 77, 79, .45);
    --bs-btn-hover-bg: var(--mc-danger);
    --bs-btn-hover-border-color: var(--mc-danger);
    --bs-btn-hover-color: #fff;
}
/* Botón "Capturar": oscuro con borde volt */
.btn-danger.text-white {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mc-volt);
    --bs-btn-hover-bg: var(--mc-volt);
    --bs-btn-hover-border-color: var(--mc-volt);
    color: var(--mc-volt) !important;
}
.btn-danger.text-white:hover { color: var(--mc-carbon) !important; }
.btn-accion { border-radius: 8px; padding: 4px 10px; }
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ============================== TABS ============================== */
.nav-tabs { border-bottom: 1px solid var(--mc-borde); gap: 4px; }
.nav-tabs .nav-link {
    color: var(--mc-steel); background: transparent; font-weight: 500;
    border: none; border-radius: 10px 10px 0 0; padding: 12px 22px;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover { background: transparent; color: var(--mc-white); }
.nav-tabs .nav-link.active {
    background: transparent; color: var(--mc-volt);
    border-bottom: 2px solid var(--mc-volt);
    box-shadow: none;
}
.nav-tabs .nav-link .bi { margin-right: 4px; }

/* ============================== FORMULARIOS ============================== */
.form-label { font-weight: 500; }
.form-control, .form-select {
    background-color: var(--mc-carbon);
    border-color: var(--mc-borde);
    color: var(--mc-white);
    font-family: var(--mc-font);
}
.form-control::placeholder { color: #5d626b; }
.form-control:focus, .form-select:focus {
    background-color: var(--mc-carbon);
    border-color: var(--mc-volt);
    color: #fff;
    box-shadow: 0 0 0 .2rem var(--mc-volt-soft);
}
.form-check-input { background-color: var(--mc-carbon); border-color: #4a4e56; }
.form-check-input:checked { background-color: var(--mc-volt); border-color: var(--mc-volt); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--mc-volt-soft); border-color: var(--mc-volt); }
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23111214'/%3e%3c/svg%3e");
}

/* ============================== TABLAS ============================== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mc-white);
    --bs-table-border-color: var(--mc-borde);
    --bs-table-hover-bg: rgba(198, 255, 61, .04);
    --bs-table-hover-color: #fff;
}
.table-leads th, .tabla-sup th {
    background: var(--mc-card);
    color: var(--mc-steel);
    font-weight: 500;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .12em;
    border-top: none;
}

/* Estados de lead con los colores de apoyo del manual */
.badge { font-weight: 500; border-radius: 999px; padding: .4em .8em; }
.badge-nuevo      { background: rgba(90, 200, 250, .12); color: var(--mc-cold); border: 1px solid rgba(90, 200, 250, .4); }
.badge-contactado { background: var(--mc-graphite); color: var(--mc-white); border: 1px solid var(--mc-borde); }
.badge-negociando { background: rgba(255, 107, 44, .14); color: var(--mc-hot); border: 1px solid rgba(255, 107, 44, .45); }
.badge-concretada { background: var(--mc-volt); color: var(--mc-carbon); border: 1px solid var(--mc-volt); }
.badge-perdido    { background: rgba(255, 77, 79, .12); color: var(--mc-danger); border: 1px solid rgba(255, 77, 79, .4); }
.badge.bg-success   { background: var(--mc-volt-soft) !important; color: var(--mc-volt) !important; border: 1px solid var(--mc-volt-line); }
.badge.bg-secondary { background: var(--mc-graphite) !important; color: var(--mc-white) !important; }
.badge.bg-warning   { background: rgba(255, 107, 44, .14) !important; color: var(--mc-hot) !important; }
.badge.bg-danger    { background: rgba(255, 77, 79, .14) !important; color: var(--mc-danger) !important; }
.badge.bg-info      { background: rgba(90, 200, 250, .14) !important; color: var(--mc-cold) !important; }

/* ============================== TARJETAS ============================== */
.card, .card-config, .card-login {
    background: var(--mc-card);
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radius);
    box-shadow: none;
    color: var(--mc-white);
}
.card-config .card-header, .card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--mc-borde);
    color: #fff;
    font-weight: 600;
}
.card-config .card-header i, .card .card-header > i { color: var(--mc-volt); }
.kpi-card { background: var(--mc-card); border-color: var(--mc-borde); }
.kpi-card .kpi-valor { color: var(--mc-volt); font-weight: 700; }

.grabacion-panel { background: var(--mc-carbon); border: 2px dashed var(--mc-borde); }
.tiempo-grabacion { color: var(--mc-volt); }
.btn-grabar, .btn-clonar { background: var(--mc-volt); color: var(--mc-carbon); font-family: var(--mc-font); }
.btn-grabar:hover, .btn-clonar:hover { background: var(--mc-lima-hover); }
.btn-grabar.grabando { background: var(--mc-danger); color: #fff; }
.voz-item { background: var(--mc-card-2); border-color: var(--mc-borde); color: var(--mc-white); }
.voz-item:hover { border-color: var(--mc-volt-line); box-shadow: none; }
.voz-item .badge-principal { background: var(--mc-volt); color: var(--mc-carbon); }

/* ============================== ALERTAS ============================== */
.alert { border-radius: 10px; }
.alert-success { background: var(--mc-volt-soft); border-color: var(--mc-volt-line); color: var(--mc-volt); }
.alert-info    { background: var(--mc-card-2); border-color: var(--mc-borde); color: var(--mc-white); }
.alert-warning { background: rgba(255, 107, 44, .10); border-color: rgba(255, 107, 44, .35); color: var(--mc-hot); }
.alert-danger  { background: rgba(255, 77, 79, .10); border-color: rgba(255, 77, 79, .4); color: var(--mc-danger); }
.spinner-border.text-primary { color: var(--mc-volt) !important; }

/* ============================== MODALES ============================== */
.modal-content { background: var(--mc-card); border: 1px solid var(--mc-borde); border-radius: var(--mc-radius); color: var(--mc-white); }
.modal-header, .modal-footer { border-color: var(--mc-borde); }
.modal-title { font-weight: 600; }
.modal-title i { color: var(--mc-volt) !important; }
#zonaPegado { background: var(--mc-carbon) !important; border-color: var(--mc-borde) !important; }
#zonaPegado:hover, #zonaPegado:focus { border-color: var(--mc-volt) !important; outline: none; }
kbd { background: var(--mc-volt); color: var(--mc-carbon); }

/* ============================== CONVERSACIÓN ============================== */
.conversacion-container { background: var(--mc-carbon); border: 1px solid var(--mc-borde); }
.conversacion-container .mensaje-enviado { background: var(--mc-volt); color: var(--mc-carbon); }
.conversacion-container .mensaje-recibido { background: var(--mc-graphite); color: var(--mc-white); border: 1px solid var(--mc-borde); }

/* ============================== AGENDA ============================== */
.calendario-wrapper { background: var(--mc-card); border: 1px solid var(--mc-borde); }
.calendario-esquina,
.calendario-dia-header { background: var(--mc-negro); border-color: var(--mc-borde); color: var(--mc-steel); font-weight: 500; }
.calendario-dia-header.es-hoy { background: var(--mc-volt); color: var(--mc-carbon); }
.calendario-hora-label { background: var(--mc-negro); border-color: var(--mc-borde); color: var(--mc-steel); }
.calendario-celda { border-color: #23252a; }
.calendario-celda:hover { background: var(--mc-volt-soft); }
.cita-bloque { background: var(--mc-volt); color: var(--mc-carbon); font-weight: 500; }
.cita-bloque.estado-completada { background: rgba(198, 255, 61, .14); color: var(--mc-volt); border: 1px solid var(--mc-volt-line); }
.cita-bloque.estado-cancelada { background: var(--mc-graphite); color: var(--mc-steel); }

/* ============================== METEORO (asistente flotante) ============================== */
.meteoro-btn {
    background: var(--mc-carbon) url('../img/marca/meteoro-avatar.jpg') center / cover no-repeat;
    color: transparent;
    font-size: 0;
    border: 2px solid var(--mc-volt);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.meteoro-btn:hover { transform: scale(1.06); box-shadow: 0 8px 28px rgba(0, 0, 0, .6); }
.meteoro-panel { background: var(--mc-card); border: 1px solid var(--mc-borde); border-radius: 18px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6); }
.meteoro-header { background: var(--mc-negro); border-bottom: 1px solid var(--mc-borde); color: #fff; }
.meteoro-header h6 { color: var(--mc-white); font-weight: 600; }
.meteoro-header small { color: var(--mc-volt); opacity: 1; font-weight: 500; letter-spacing: .04em; }
.meteoro-avatar {
    background: var(--mc-carbon) url('../img/marca/meteoro-avatar.jpg') center / cover no-repeat;
    color: transparent; font-size: 0;
    border: 1px solid var(--mc-volt-line);
}
.meteoro-close { color: var(--mc-steel); }
.meteoro-close:hover { background: var(--mc-card-2); color: #fff; }
.meteoro-body, .meteoro-suggestions { background: var(--mc-carbon); border-color: var(--mc-borde); }
.meteoro-msg.user { background: var(--mc-volt); color: var(--mc-carbon); }
.meteoro-msg.bot { background: var(--mc-graphite); color: var(--mc-white); border-color: var(--mc-borde); }
.meteoro-chip { background: transparent; border-color: var(--mc-volt-line); color: var(--mc-volt); }
.meteoro-chip:hover { background: var(--mc-volt); color: var(--mc-carbon); }
.meteoro-footer { background: var(--mc-card); border-color: var(--mc-borde); }
.meteoro-footer input { background: var(--mc-carbon); border-color: var(--mc-borde); color: var(--mc-white); font-family: var(--mc-font); }
.meteoro-footer input:focus { border-color: var(--mc-volt); }
.meteoro-send { background: var(--mc-volt); color: var(--mc-carbon); }
.meteoro-send:hover { background: var(--mc-lima-hover); }
.meteoro-send.grabando { background: var(--mc-danger); color: #fff; }
.meteoro-empty-avatar { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; border: 1px solid var(--mc-volt-line); }

/* ============================== CONFIGURACIÓN DE METEORO (tab) ============================== */
.mc-meteoro-config .card-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-meteoro-config .card-header img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; border: 1px solid var(--mc-volt-line); }
.mc-meteoro-config .mc-sub { display: block; font-size: .8rem; color: var(--mc-steel); font-weight: 400; }
.mc-meteoro-config .mc-section-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-weight: 600; font-size: 1rem; }
.mc-meteoro-config .mc-help { display: block; font-size: .8rem; color: var(--mc-steel); margin: -2px 0 8px; line-height: 1.5; }
.mc-prompt-textarea { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important; font-size: .8rem !important; line-height: 1.6 !important; min-height: 420px; }
.mc-adicionales { background: var(--mc-volt-soft); border: 1px solid var(--mc-volt-line); border-radius: 12px; padding: 16px; }
.mc-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mc-vars button { background: var(--mc-carbon); color: var(--mc-steel); border: 1px dashed var(--mc-borde); border-radius: 6px; padding: 2px 8px; font: 500 .72rem ui-monospace, Menlo, Consolas, monospace; }
.mc-vars button:hover { color: var(--mc-volt); border-color: var(--mc-volt-line); }
.mc-preview-pre { white-space: pre-wrap; font: .78rem/1.6 ui-monospace, Menlo, Consolas, monospace; color: #d6d9de; background: var(--mc-carbon); border: 1px solid var(--mc-borde); border-radius: 10px; padding: 16px; max-height: 65vh; overflow: auto; margin: 0; }

/* Segmentado (tú / usted) */
.mc-segment { display: inline-flex; background: var(--mc-carbon); border: 1px solid var(--mc-borde); border-radius: 10px; padding: 3px; }
.mc-segment input { display: none; }
.mc-segment label { padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: .85rem; font-weight: 500; color: var(--mc-steel); margin: 0; }
.mc-segment input:checked + label { background: var(--mc-volt); color: var(--mc-carbon); }

/* Pills de estado */
.mc-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--mc-graphite); color: var(--mc-white); }
.mc-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mc-steel); }
.mc-pill--hot::before     { background: var(--mc-hot); }
.mc-pill--cold::before    { background: var(--mc-cold); }
.mc-pill--success::before { background: var(--mc-success); }
.mc-pill--danger::before  { background: var(--mc-danger); }

/* ============================== LOGIN ============================== */
.mc-login-logo { width: 150px; height: auto; display: block; margin: 0 auto 14px; }
.mc-login-tagline { font-weight: 700; font-size: 1.15rem; margin: 0; }
.mc-login-tagline span { color: var(--mc-volt); }

/* ============================== COMPONENTES SUELTOS (configuracion_meteoro.html) ============================== */
.mc-card { background: var(--mc-graphite); border-radius: var(--mc-radius); padding: 20px; border: 1px solid transparent; }
.mc-card--outline { background: var(--mc-carbon-2); border-color: var(--mc-borde); }
.mc-card--volt { background: var(--mc-volt-soft); border-color: var(--mc-volt-line); }
.mc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--mc-font); font-weight: 600; font-size: 14px;
    padding: 11px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
    transition: transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s;
}
.mc-btn:active { transform: translateY(1px); }
.mc-btn:disabled { opacity: .5; cursor: not-allowed; }
.mc-btn--primary { background: var(--mc-volt); color: var(--mc-carbon); }
.mc-btn--primary:hover { background: var(--mc-lima-hover); }
.mc-btn--ghost { background: transparent; color: var(--mc-white); border-color: var(--mc-borde); }
.mc-btn--ghost:hover { border-color: var(--mc-steel); }
.mc-field { display: block; margin-bottom: 18px; }
.mc-label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; color: var(--mc-white); }
.mc-input, .mc-textarea {
    width: 100%; box-sizing: border-box; background: var(--mc-carbon); color: var(--mc-white);
    border: 1px solid var(--mc-borde); border-radius: 10px; padding: 11px 13px;
    font-family: var(--mc-font); font-size: 14px; line-height: 1.55;
}
.mc-textarea { resize: vertical; min-height: 110px; }
.mc-textarea--code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; }
.mc-input:focus, .mc-textarea:focus { outline: none; border-color: var(--mc-volt); box-shadow: 0 0 0 3px var(--mc-volt-soft); }
.mc-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
    background: var(--mc-graphite); color: var(--mc-white); border-left: 3px solid var(--mc-volt);
    padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 9999;
}
.mc-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.mc-toast.is-error { border-left-color: var(--mc-danger); }
.mc-logo { display: block; height: auto; }
.mc-logo--sm { width: 120px; }

/* ============================== SCROLLBARS ============================== */
* { scrollbar-color: var(--mc-graphite-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--mc-graphite-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--mc-steel); }

/* ============================== NEUTRALIZAR EL TEMA MORADO ANTERIOR (css/style.css) ============================== */
.btn-primary { background: var(--bs-btn-bg); border: 1px solid var(--bs-btn-border-color); color: var(--bs-btn-color); }
.btn-primary:hover { background: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); transform: none; box-shadow: none; }
.btn-primary:disabled { background: var(--bs-btn-disabled-bg); }
.card-login .form-control { border: 1px solid var(--mc-borde); }
.card-login .form-control:focus { border-color: var(--mc-volt); box-shadow: 0 0 0 .2rem var(--mc-volt-soft); }
textarea.form-control.mc-prompt-textarea { min-height: 420px; }

/* ===== Botón de DICTAR (mantener presionado y hablar) ===== */
.btn-dictar {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mc-lima); color: #000; border: 0; border-radius: 999px;
    padding: 6px 14px; font-weight: 600; font-size: .85rem;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: transform .1s ease, background .15s ease;
}
.btn-dictar:hover { filter: brightness(1.05); }
.btn-dictar:active { transform: scale(.97); }
.btn-dictar.grabando { background: #dc3545; color: #fff; animation: mcPulsoDictado 1s ease-in-out infinite; }
.btn-dictar.transcribiendo { background: #6c757d; color: #fff; }
.btn-dictar:disabled { opacity: .6; }
.btn-dictar-icono { padding: 6px 12px; border-radius: 0; }     /* dentro de un input-group */
.mc-dictado-ayuda { font-size: .78rem; color: var(--mc-texto-2, #9aa0a6); }
.mc-dictado-error { font-size: .8rem; color: #ff6b6b; }
@keyframes mcPulsoDictado {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); }
    50% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
}