/* ==============================================================================
   TOTALISYS COLLEGE — assets/css/admin.css
   Estilos del Panel de Licencias. Reutiliza las variables de style.css.
   ============================================================================== */

.tc-admin { background: var(--tc-paper-alt); min-height: 100vh; }

/* --- Login --- */
.tc-admin-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--tc-navy); }
.tc-login-card {
    background: var(--tc-white); border-radius: var(--tc-radius); padding: 40px 36px;
    width: 100%; max-width: 380px; box-shadow: var(--tc-shadow); text-align: center;
}
.tc-login-logo { height: 56px; margin: 0 auto 18px; }
.tc-login-card h1 { font-size: 1.3rem; margin-bottom: 4px; }
.tc-login-card form { text-align: left; margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.tc-login-card label { font-size: 0.85rem; font-weight: 600; color: var(--tc-navy); margin-top: 10px; }
.tc-login-card input {
    padding: 11px 14px; border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm);
    font-family: var(--tc-font-body); font-size: 0.95rem;
}
.tc-login-card button { margin-top: 18px; }
.tc-lang-switch { display: inline-block; margin-top: 18px; font-size: 0.85rem; color: var(--tc-blue); text-decoration: none; }

.tc-alert { border-radius: var(--tc-radius-sm); padding: 12px 14px; font-size: 0.88rem; text-align: left; margin: 14px 0; }
.tc-alert-error { background: #fde3e1; color: #a3271b; }
.tc-alert-warn { background: #fdf1d8; color: #6b4b00; }

/* --- Header del panel --- */
.tc-admin-header { background: var(--tc-white); border-bottom: 1px solid var(--tc-line); padding: 10px 28px; }
.tc-admin-header-row { display: flex; align-items: center; justify-content: space-between; }
.tc-admin-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tc-navy); font-family: var(--tc-font-display); font-weight: 600; }
.tc-admin-brand img { height: 34px; }
.tc-admin-brand-suffix { font-size: 0.72rem; font-weight: 500; color: var(--tc-ink-soft); font-family: var(--tc-font-mono); border-left: 1px solid var(--tc-line); padding-left: 10px; }
.tc-admin-nav { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; flex-wrap: wrap; row-gap: 6px; margin-top: 8px; }

/* Enlace de nivel superior — la página activa lleva una "píldora" de fondo
   para que sobresalga a simple vista (pedido explícito: "que el menú en el
   cual estoy... sobresalga algo"). */
.tc-admin-nav .tc-navlink {
    text-decoration: none; color: var(--tc-ink-soft); padding: 7px 12px; border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}
.tc-admin-nav .tc-navlink:hover { color: var(--tc-blue); background: var(--tc-paper); }
.tc-admin-nav .tc-navlink.is-active { color: var(--tc-blue); background: var(--tc-mint-soft); font-weight: 600; }

.tc-nav-dropdown { position: relative; }
.tc-nav-dropdown-toggle {
    display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.85rem; color: var(--tc-ink-soft); padding: 7px 12px; border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}
.tc-nav-dropdown-toggle:hover { color: var(--tc-blue); background: var(--tc-paper); }
.tc-nav-dropdown-toggle.is-active { color: var(--tc-blue); background: var(--tc-mint-soft); font-weight: 600; }
.tc-nav-dropdown-caret { font-size: 0.65rem; transition: transform 0.15s ease; }
.tc-nav-dropdown.is-open .tc-nav-dropdown-caret { transform: rotate(180deg); }
.tc-nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 40, 72, 0.14); padding: 8px; min-width: 210px;
}
.tc-nav-dropdown.is-open .tc-nav-dropdown-menu { display: block; }
.tc-nav-dropdown-menu a {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    font-size: 0.85rem; white-space: nowrap; color: var(--tc-ink); text-decoration: none;
}
.tc-nav-dropdown-menu a svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tc-ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-nav-dropdown-menu a:hover { background: var(--tc-paper); color: var(--tc-blue); }
.tc-nav-dropdown-menu a:hover svg { stroke: var(--tc-blue); }
.tc-nav-dropdown-menu a.is-active { background: var(--tc-mint-soft); color: var(--tc-blue); font-weight: 600; }
.tc-nav-dropdown-menu a.is-active svg { stroke: var(--tc-blue); }


.tc-admin-header-right { display: flex; align-items: center; gap: 10px; }

/* --- Campana de notificaciones: visible en TODAS las páginas del panel
   (no solo en el CRM), a la izquierda del avatar de perfil. Mismo
   patrón visual de dropdown que .tc-profile-dropdown, con una insignia
   de conteo encima del ícono. --- */
.tc-notif-dropdown { position: relative; }
.tc-notif-toggle {
    position: relative; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: none; color: var(--tc-navy); display: flex; align-items: center; justify-content: center;
    padding: 0; transition: background 0.15s ease;
}
.tc-notif-toggle svg { width: 20px; height: 20px; }
.tc-notif-toggle:hover, .tc-notif-dropdown.is-open .tc-notif-toggle { background: var(--tc-paper); }
.tc-notif-badge {
    position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px; background: #e0453c; color: var(--tc-white); font-size: 0.62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--tc-white);
}
.tc-notif-menu {
    display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 40, 72, 0.14); padding: 8px; width: 300px; max-height: 70vh; overflow-y: auto;
}
.tc-notif-dropdown.is-open .tc-notif-menu { display: block; }
.tc-notif-menu-title { padding: 6px 8px 10px; font-size: 0.85rem; font-weight: 600; color: var(--tc-navy); border-bottom: 1px solid var(--tc-line); margin-bottom: 4px; }
.tc-notif-item {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 8px; border-radius: 8px;
    text-decoration: none; color: var(--tc-ink); font-size: 0.85rem;
}
.tc-notif-item:hover { background: var(--tc-paper); }
.tc-notif-item .tc-crm-badge { align-self: flex-start; }
.tc-notif-item strong { font-size: 0.85rem; color: var(--tc-navy); }
.tc-notif-preview { font-size: 0.78rem; color: var(--tc-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-notif-empty { padding: 16px 8px; text-align: center; font-size: 0.82rem; color: var(--tc-ink-soft); }

/* --- Ícono de perfil: separado del resto de los menús, siempre a la
   derecha. Despliega nombre de usuario, idioma y cerrar sesión. --- */
.tc-profile-dropdown { position: relative; }
.tc-profile-toggle {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--tc-gradient); color: var(--tc-white); font-family: var(--tc-font-display);
    font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
    padding: 0; transition: box-shadow 0.15s ease;
}
.tc-profile-toggle:hover, .tc-profile-dropdown.is-open .tc-profile-toggle { box-shadow: 0 0 0 3px var(--tc-mint-soft); }
.tc-profile-menu {
    display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 40, 72, 0.14); padding: 8px; min-width: 190px;
}
.tc-profile-dropdown.is-open .tc-profile-menu { display: block; }
.tc-profile-name {
    padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--tc-line);
    font-size: 0.85rem; font-weight: 600; color: var(--tc-navy);
}
.tc-profile-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    font-size: 0.85rem; color: var(--tc-ink); text-decoration: none;
}
.tc-profile-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tc-ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-profile-item:hover { background: var(--tc-paper); color: var(--tc-blue); }
.tc-profile-item:hover svg { stroke: var(--tc-blue); }
.tc-profile-item-danger { color: #a3271b; }
.tc-profile-item-danger svg { stroke: #a3271b; }
.tc-profile-item-danger:hover { background: #fdeceb; color: #a3271b; }
.tc-profile-item-danger:hover svg { stroke: #a3271b; }

.tc-admin-burger { display: none; }

/* --- Móvil: el panel nunca había tenido un menú hamburguesa — en pantallas
   chicas, toda la barra de navegación se apretujaba o se cortaba. Mismo
   patrón ya probado en el sitio público: botón hamburguesa que abre un
   panel a pantalla completa, con display:none/flex (no transform con
   porcentaje, que ya causó un bug real en el sitio público — tanda 9). --- */
@media (max-width: 900px) {
    .tc-admin-header { padding: 10px 16px; }
    .tc-admin-brand-suffix { display: none; }
    .tc-admin-burger {
        display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
        background: none; border: none; cursor: pointer; color: var(--tc-navy); padding: 0;
    }
    .tc-burger-icon-close { display: none; }
    .tc-admin-burger.is-open .tc-burger-icon-lines { display: none; }
    .tc-admin-burger.is-open .tc-burger-icon-close { display: block; }

    .tc-admin-nav {
        display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; margin-top: 0;
        position: fixed; top: 59px; left: 0; right: 0; bottom: 0; background: var(--tc-white);
        padding: 14px 16px; overflow-y: auto; z-index: 55;
    }
    .tc-admin-nav.is-open { display: flex; }
    .tc-admin-nav .tc-navlink { padding: 12px 14px; border-radius: 10px; }
    .tc-admin-nav .tc-navlink.is-active { background: var(--tc-mint-soft); }

    .tc-nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 14px; }
    .tc-nav-dropdown-menu {
        display: none; position: static; box-shadow: none; border: none; background: var(--tc-paper);
        margin: 2px 0 6px; width: 100%;
    }
    .tc-nav-dropdown.is-open .tc-nav-dropdown-menu { display: block; }
}

/* --- Layout general --- */
.tc-admin-main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
.tc-admin-main.tc-narrow { max-width: 680px; }
.tc-admin-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }

.tc-search-bar { margin-bottom: 18px; }
.tc-search-bar input {
    width: 100%; max-width: 420px; padding: 10px 14px; border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius-sm); font-family: var(--tc-font-body);
}

/* --- Tabla --- */
.tc-table-wrap { background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: var(--tc-radius); overflow: auto; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tc-table th { text-align: left; font-family: var(--tc-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tc-ink-soft); padding: 12px 16px; border-bottom: 1px solid var(--tc-line); white-space: nowrap; }
.tc-table td { padding: 12px 16px; border-bottom: 1px solid var(--tc-line); vertical-align: middle; }
.tc-table tr:last-child td { border-bottom: none; }
.tc-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-empty { text-align: center; color: var(--tc-ink-soft); padding: 32px !important; }
.tc-actions { display: flex; gap: 10px; white-space: nowrap; }
.tc-actions a, .tc-actions button { text-decoration: none; border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--tc-ink-soft); padding: 2px; }
.tc-actions a:hover, .tc-actions button:hover { color: var(--tc-blue); }
.tc-actions .tc-danger:hover { color: #a3271b; }
.tc-inline-form { display: inline; }

/* --- Formularios --- */
.tc-form { background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 28px; display: flex; flex-direction: column; gap: 4px; }
.tc-form label { font-size: 0.85rem; font-weight: 600; color: var(--tc-navy); margin-top: 14px; }
.tc-form input, .tc-form select, .tc-form textarea {
    padding: 10px 14px; border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm);
    font-family: var(--tc-font-body); font-size: 0.92rem; width: 100%;
}
.tc-form textarea { resize: vertical; }
.tc-form button { margin-top: 22px; align-self: flex-start; }
.tc-help { font-size: 0.78rem; color: var(--tc-ink-soft); margin: 2px 0 0; }
.tc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .tc-grid-2 { grid-template-columns: 1fr; } }

.tc-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 6px; }
.tc-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 0.88rem !important; color: var(--tc-ink) !important; margin-top: 0 !important; }
.tc-checkbox input { width: auto !important; }

.tc-secret-box { font-family: var(--tc-font-mono); font-size: 0.85rem; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.tc-back-link { display: inline-block; margin-bottom: 14px; font-size: 0.88rem; text-decoration: none; }

/* --- Diagnóstico --- */
.tc-diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 16px; }
.tc-diag-card { background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 18px; position: relative; }
.tc-diag-card h3 { font-size: 0.95rem; margin: 6px 0 4px; }
.tc-diag-card p { font-size: 0.82rem; margin: 0; }
.tc-diag-dot { position: absolute; top: 18px; right: 18px; width: 10px; height: 10px; border-radius: 50%; }
.tc-diag-ok .tc-diag-dot { background: #2fbf83; box-shadow: 0 0 0 4px rgba(47,191,131,0.18); }
.tc-diag-error .tc-diag-dot { background: #e0453c; box-shadow: 0 0 0 4px rgba(224,69,60,0.18); }
.tc-diag-stat { background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm); padding: 16px; text-align: center; }
.tc-diag-stat strong { display: block; font-family: var(--tc-font-display); font-size: 1.6rem; color: var(--tc-navy); }
.tc-diag-stat span { font-size: 0.78rem; color: var(--tc-ink-soft); }

/* --- Firma (canvas) en la vista pública de firma de contrato --- */
.tc-sign-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tc-sign-tab { padding: 8px 16px; border: 1px solid var(--tc-line); border-radius: 999px; background: var(--tc-white); cursor: pointer; font-size: 0.85rem; }
.tc-sign-tab.is-active { background: var(--tc-navy); color: var(--tc-white); border-color: var(--tc-navy); }
.tc-sign-pane { display: none; }
.tc-sign-pane.is-active { display: block; }
#tc-sign-canvas { border: 1px dashed var(--tc-line); border-radius: var(--tc-radius-sm); touch-action: none; width: 100%; max-width: 480px; height: 180px; background: var(--tc-white); }
.tc-contract-box { background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 24px; max-height: 420px; overflow-y: auto; font-size: 0.9rem; white-space: pre-wrap; }

/* --- Vista previa de precio (admin/contract_new.php) --- */
.tc-price-preview { background: var(--tc-mint-soft); border-radius: var(--tc-radius-sm); padding: 16px 20px; margin-top: 18px; font-size: 0.9rem; color: #146c4f; }
.tc-price-preview strong { font-family: var(--tc-font-mono); }

/* --- CRM Omnicanal (admin/crm.php) --------------------------------------
   REESCRITO COMPLETO el 2026-09-08 tras feedback real de Jorge: la
   versión anterior tenía una regla .tc-crm-conv-item DUPLICADA (una de
   la tanda que agregó el CRM, otra de la tanda del rediseño) — las dos
   coexistían y sus propiedades se mezclaban en el navegador de forma
   impredecible (esa era la causa real del scroll horizontal feo y el
   aspecto "grueso" que reportó). Esta versión es la ÚNICA fuente de
   verdad para cada selector, sin repetir ninguno.

   Bandeja de tres columnas (lista | hilo | info del contacto) + una
   pestaña de libreta de contactos, reusando la paleta del resto del
   panel (var(--tc-*)) — nunca colores nuevos. Bordes más suaves que el
   resto del panel a propósito (var(--tc-line) a menor opacidad) porque
   aquí hay MUCHAS líneas divisorias juntas (chips, avatares, burbujas) y
   el mismo grosor que en una pantalla con una sola tabla se siente
   pesado por acumulación, no porque un valor individual esté mal. */

.tc-crm-app {
    display: grid; grid-template-columns: 300px 1fr; gap: 0;
    background: var(--tc-white); border: 1px solid rgba(15, 40, 72, 0.08); border-radius: var(--tc-radius);
    overflow: hidden; height: 72vh; min-height: 420px;
}
.tc-crm-app.has-info-panel { grid-template-columns: 300px 1fr 300px; }
@media (max-width: 1080px) {
    .tc-crm-app.has-info-panel { grid-template-columns: 280px 1fr; }
    /* Especificidad reforzada a propósito (".tc-crm-app .tc-crm-info-panel"
       en vez de solo ".tc-crm-info-panel") — bug real encontrado el
       2026-09-08: la declaración base de más abajo en este archivo
       también fija "display: flex" para este mismo selector con LA
       MISMA especificidad (una sola clase); como esa declaración base
       aparece DESPUÉS en el archivo, le ganaba a esta regla de aquí sin
       importar el ancho de pantalla — el panel de contacto quedaba
       visible a pantalla completa en el celular sin que nadie lo
       abriera. Con un selector más específico aquí, esta regla gana
       siempre, sin depender de en qué orden queden las dos en el
       archivo. */
    .tc-crm-app .tc-crm-info-panel { display: none; position: fixed; inset: 0; z-index: 200; background: var(--tc-white); height: 100vh; }
    .tc-crm-app .tc-crm-info-panel.is-open { display: flex; flex-direction: column; }
}
@media (max-width: 760px) {
    /* En móvil se apila: la lista ocupa toda la pantalla y el hilo activo
       se muestra encima al elegir una conversación (mismo patrón de
       "back button" que ya usa el widget de chat público).
       IMPORTANTE: hay que repetir ", .tc-crm-app.has-info-panel" aquí —
       bug real encontrado el 2026-09-08: ".tc-crm-app.has-info-panel"
       (dos clases) tiene MÁS especificidad que ".tc-crm-app" sola (una
       clase), así que sin repetirlo, la regla de 2 columnas del rango
       de 1080px le seguía ganando a esta en pantallas de teléfono real
       (320-430px) — el hilo quedaba asomando cortado por el borde
       derecho en vez de apilarse debajo de la lista. La especificidad
       de CSS no respeta el orden de las media queries, solo el número
       de clases/selectores. */
    .tc-crm-app, .tc-crm-app.has-info-panel { grid-template-columns: 1fr; height: auto; min-height: 60vh; }
    .tc-crm-conversations.is-hidden-mobile { display: none; }
    .tc-crm-thread.is-hidden-mobile { display: none; }
}

/* --- Pestañas Conversaciones / Contactos (arriba de todo el componente) --- */
.tc-crm-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tc-crm-tab {
    font-size: 0.82rem; font-weight: 600; padding: 7px 16px; border-radius: 999px 999px 0 0;
    border: none; background: transparent; color: var(--tc-ink-soft); cursor: pointer;
}
.tc-crm-tab.is-active { background: var(--tc-white); color: var(--tc-blue); box-shadow: 0 -1px 0 var(--tc-mint) inset; }

/* --- Columna izquierda: buscador, filtros, lista --- */
.tc-crm-conversations { border-right: 1px solid rgba(15, 40, 72, 0.08); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tc-crm-toolbar { padding: 12px 14px; border-bottom: 1px solid rgba(15, 40, 72, 0.08); display: flex; flex-direction: column; gap: 8px; }
.tc-crm-search { position: relative; }
.tc-crm-search input {
    width: 100%; padding: 8px 12px 8px 32px; border: 1px solid rgba(15, 40, 72, 0.12); border-radius: 999px;
    font-family: var(--tc-font-body); font-size: 0.85rem; background: var(--tc-paper); box-sizing: border-box;
}
.tc-crm-search input:focus { outline: none; border-color: var(--tc-blue); background: var(--tc-white); }
.tc-crm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--tc-ink-soft); pointer-events: none; }
.tc-crm-filter-row { display: flex; gap: 5px; flex-wrap: wrap; }
.tc-crm-chip {
    font-size: 0.7rem; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(15, 40, 72, 0.12);
    background: var(--tc-white); color: var(--tc-ink-soft); cursor: pointer; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tc-crm-chip:hover { border-color: var(--tc-blue); color: var(--tc-blue); }
.tc-crm-chip.is-active { background: var(--tc-navy); border-color: var(--tc-navy); color: var(--tc-white); }

.tc-crm-conv-list { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.tc-crm-avatar {
    flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-family: var(--tc-font-display); font-weight: 600; font-size: 0.85rem;
    color: var(--tc-white);
}
.tc-crm-avatar-whatsapp { background: #1fae6b; }
.tc-crm-avatar-instagram { background: linear-gradient(135deg, #d62976, #962fbf); }
.tc-crm-avatar-messenger { background: #1a437c; }
.tc-crm-avatar-web_chat { background: #b57c00; }
.tc-crm-avatar-email { background: #5c6f7f; }

.tc-crm-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-right: 5px; }
.tc-crm-status-dot.status-abierta { background: #2fbf83; }
.tc-crm-status-dot.status-pendiente { background: #e0a53c; }
.tc-crm-status-dot.status-resuelta { background: #9aa5ad; }

/* Versión clicable del punto de estado — antes era un <span> puramente
   decorativo (bug real reportado por Jorge: "le doy clic y no pasa
   nada"). Ahora es un botón que rota el estado con un clic, con un
   anillo más grande alrededor del punto para que sea fácil de tocar en
   el celular sin agrandar el punto visual en sí. */
.tc-crm-status-dot-btn {
    width: 18px; height: 18px; border-radius: 50%; border: none; background: none;
    cursor: pointer; flex: none; padding: 0; position: relative;
}
.tc-crm-status-dot-btn::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
}
.tc-crm-status-dot-btn.status-abierta::before { background: #2fbf83; }
.tc-crm-status-dot-btn.status-pendiente::before { background: #e0a53c; }
.tc-crm-status-dot-btn.status-resuelta::before { background: #9aa5ad; }
.tc-crm-status-dot-btn:hover { background: rgba(15, 40, 72, 0.08); }

/* --- Tarjeta de conversación/contacto ------------------------------
   Único diseño reusado en la bandeja Y en la libreta de contactos
   (pedido explícito de Jorge, con una referencia visual de otro CRM):
   avatar+nombre+hora arriba, menú "⋮" de acciones rápidas, vista previa
   del último mensaje, canal+agente asignado, y etiquetas (o "Sin
   etiquetas"). Toda la tarjeta es clicable (role="button"), el menú
   detiene la propagación del click para no abrir la conversación sin
   querer al usarlo. */
.tc-crm-card {
    border: 1px solid rgba(15, 40, 72, 0.08); border-radius: var(--tc-radius-sm); padding: 10px 12px;
    cursor: pointer; background: var(--tc-white); display: flex; flex-direction: column; gap: 7px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tc-crm-card:hover { border-color: rgba(15, 40, 72, 0.18); background: var(--tc-paper); }
.tc-crm-card.is-active { border-color: var(--tc-blue); background: var(--tc-mint-soft); }
.tc-crm-card:focus-visible { outline: 2px solid var(--tc-blue); outline-offset: 2px; }

.tc-crm-card-top { display: flex; align-items: center; gap: 8px; position: relative; }
.tc-crm-card-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; color: var(--tc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-crm-card.is-unread .tc-crm-card-name { font-weight: 700; }
.tc-crm-card-time { flex: none; font-size: 0.68rem; color: var(--tc-ink-soft); }
.tc-crm-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tc-mint); flex: none; }

.tc-crm-card-menu {
    flex: none; width: 22px; height: 22px; border-radius: 50%; border: none; background: none;
    color: var(--tc-ink-soft); cursor: pointer; font-size: 1rem; line-height: 1;
}
.tc-crm-card-menu:hover { background: rgba(15, 40, 72, 0.08); }
.tc-crm-card-menu-panel {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    background: var(--tc-white); border: 1px solid var(--tc-line); border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 40, 72, 0.14); padding: 6px; min-width: 150px; flex-direction: column;
}
.tc-crm-card-menu-panel.is-open { display: flex; }
.tc-crm-card-menu-panel button {
    background: none; border: none; text-align: left; padding: 7px 9px; border-radius: 6px;
    font-size: 0.8rem; color: var(--tc-ink); cursor: pointer;
}
.tc-crm-card-menu-panel button:hover { background: var(--tc-paper); }

.tc-crm-card-preview {
    display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--tc-ink-soft);
    min-width: 0;
}
.tc-crm-card-preview svg { flex: none; width: 13px; height: 13px; opacity: 0.6; }
.tc-crm-card-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-crm-card.is-unread .tc-crm-card-preview span { color: var(--tc-navy); font-weight: 600; }

.tc-crm-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-crm-card-agent { font-size: 0.72rem; color: var(--tc-ink-soft); }

.tc-crm-card-tags { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--tc-blue); min-width: 0; }
.tc-crm-card-tags svg { flex: none; width: 12px; height: 12px; opacity: 0.7; }
.tc-crm-card-tags span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tc-crm-card-contact-btn {
    margin-top: 2px; align-self: flex-start; background: var(--tc-mint-soft); color: #146c4f;
    border: none; border-radius: 999px; padding: 5px 12px; font-size: 0.72rem; font-weight: 600;
    cursor: pointer;
}
.tc-crm-card-contact-btn:hover { background: #c8ecdc; }

/* --- Modal "Contactar" con plantilla de WhatsApp ---
   Plantillas aprobadas por Meta — único tipo de mensaje permitido para
   escribirle primero a alguien fuera de la ventana de 24h de servicio.
   Mismo patrón visual que el resto del panel (tarjeta blanca centrada
   sobre velo oscuro), sin introducir un componente de modal genérico
   nuevo — esta es la primera pantalla del CRM que necesita uno. */
.tc-crm-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 300; background: rgba(15, 40, 72, 0.45);
    align-items: center; justify-content: center; padding: 20px;
}
.tc-crm-modal {
    background: var(--tc-white); border-radius: var(--tc-radius); width: 100%; max-width: 420px;
    max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(15, 40, 72, 0.3);
}
.tc-crm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--tc-line); }
.tc-crm-modal-header h3 { margin: 0; font-size: 1rem; }
.tc-crm-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tc-crm-modal-body select {
    width: 100%; padding: 8px 10px; border: 1px solid rgba(15, 40, 72, 0.12); border-radius: var(--tc-radius-sm);
    font-family: var(--tc-font-body); font-size: 0.85rem; box-sizing: border-box;
}
.tc-crm-template-preview {
    background: var(--tc-paper); border-radius: var(--tc-radius-sm); padding: 12px; font-size: 0.85rem;
    color: var(--tc-ink); white-space: pre-wrap; min-height: 40px;
}

.tc-crm-badge {
    font-size: 0.63rem; font-family: var(--tc-font-mono); text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex: none;
}
.tc-crm-badge-whatsapp { background: #dff3ea; color: #146c4f; }
.tc-crm-badge-instagram { background: #fbe3ee; color: #a3216b; }
.tc-crm-badge-messenger { background: #e3ecfd; color: #1a437c; }
.tc-crm-badge-web_chat { background: #fdf1d8; color: #8a5a00; }
.tc-crm-badge-email { background: #e5eaee; color: #3d4b58; }

/* --- Columna central: hilo activo --- */
.tc-crm-thread { display: flex; flex-direction: column; min-height: 0; }
.tc-crm-thread-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid rgba(15, 40, 72, 0.08);
}
.tc-crm-thread-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.tc-crm-thread-header-left > div { min-width: 0; overflow: hidden; }
.tc-crm-thread-header h2 { font-size: 0.95rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-crm-back { display: none; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--tc-ink-soft); flex: none; }
@media (max-width: 760px) { .tc-crm-back { display: inline-block; } }
.tc-crm-info-toggle { background: none; border: 1px solid rgba(15, 40, 72, 0.12); border-radius: 999px; padding: 5px 12px; font-size: 0.73rem; cursor: pointer; color: var(--tc-ink-soft); flex: none; }
.tc-crm-info-toggle:hover { border-color: var(--tc-blue); color: var(--tc-blue); }
/* En todo el rango móvil el nombre del contacto y el botón de info
   compiten por el mismo espacio — el botón se reduce a solo un ícono
   (el texto sigue disponible como aria-label para lectores de pantalla,
   agregado en admin/crm.php) para que el nombre tenga espacio real
   antes de truncarse con ellipsis. Mismo punto de quiebre (760px) que
   usa el resto del CRM para pasar a layout de una sola columna. */
@media (max-width: 760px) {
    .tc-crm-info-toggle {
        width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
        font-size: 0; border-radius: 50%;
    }
    .tc-crm-info-toggle::after { content: 'ⓘ'; font-size: 1.1rem; line-height: 1; }
}

.tc-crm-stream { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--tc-paper); }
.tc-crm-bubble { max-width: 72%; padding: 9px 13px; border-radius: 14px; font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.tc-crm-bubble-in { align-self: flex-start; background: var(--tc-white); box-shadow: 0 0 0 1px rgba(15, 40, 72, 0.06); border-bottom-left-radius: 4px; }
.tc-crm-bubble-out { align-self: flex-end; background: var(--tc-gradient); color: var(--tc-white); border-bottom-right-radius: 4px; }

/* Nota de handoff — compacta a propósito (feedback real: la versión
   anterior era un párrafo completo que se sentía como demasiado texto).
   Ahora es una píldora chiquita, una sola línea, con ícono. */
.tc-crm-handoff-pill {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: #8a5a00;
    background: #fdf1d8; padding: 3px 10px; border-radius: 999px; margin: 8px 18px 0; align-self: flex-start;
}

.tc-crm-composer { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(15, 40, 72, 0.08); }
.tc-crm-composer textarea {
    flex: 1; resize: none; border: 1px solid rgba(15, 40, 72, 0.12); border-radius: var(--tc-radius-sm);
    padding: 9px 12px; font-family: var(--tc-font-body); font-size: 0.9rem; box-sizing: border-box;
}
.tc-crm-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--tc-ink-soft); font-size: 0.9rem; text-align: center; padding: 24px; }

/* --- Botón de ayuda de redacción con IA (✨) — pedido de Jorge: revisar
   el texto antes de enviar, con corrección y ajuste de tono. Reusa la
   misma paleta del resto del CRM, sin colores nuevos. --- */
.tc-crm-ai-toggle {
    flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(15, 40, 72, 0.12);
    background: var(--tc-white); cursor: pointer; font-size: 1rem; align-self: flex-end;
}
.tc-crm-ai-toggle:hover { background: var(--tc-mint-soft); border-color: var(--tc-mint); }
.tc-crm-ai-panel { padding: 12px 16px 4px; border-top: 1px solid rgba(15, 40, 72, 0.08); background: var(--tc-paper); }
.tc-crm-ai-panel-tones { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-crm-ai-tone-btn {
    font-size: 0.72rem; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(15, 40, 72, 0.12);
    background: var(--tc-white); color: var(--tc-navy); cursor: pointer;
}
.tc-crm-ai-tone-btn:hover { border-color: var(--tc-blue); color: var(--tc-blue); }
.tc-crm-ai-tone-btn:disabled { opacity: 0.6; cursor: default; }
.tc-crm-ai-preview {
    margin: 10px 0 0; padding: 10px 12px; background: var(--tc-white); border: 1px solid rgba(15, 40, 72, 0.1);
    border-radius: var(--tc-radius-sm); font-size: 0.85rem; color: var(--tc-ink); white-space: pre-wrap;
}
.tc-crm-ai-actions { display: flex; gap: 8px; margin: 8px 0 10px; }

/* --- Columna derecha: info del contacto --- */
.tc-crm-info-panel { border-left: 1px solid rgba(15, 40, 72, 0.08); display: flex; flex-direction: column; overflow-y: auto; }
.tc-crm-info-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(15, 40, 72, 0.08); }
.tc-crm-info-header h3 { margin: 0; font-size: 0.92rem; }
.tc-crm-info-close { display: none; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--tc-ink-soft); }
@media (max-width: 1080px) { .tc-crm-info-close { display: block; } }
.tc-crm-info-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tc-crm-info-avatar { width: 56px; height: 56px; font-size: 1.3rem; margin: 0 auto; }
.tc-crm-info-field label { font-size: 0.7rem; font-weight: 600; color: var(--tc-navy); text-transform: uppercase; letter-spacing: 0.03em; display: block; margin-bottom: 4px; }
.tc-crm-info-section-title {
    font-size: 0.78rem; font-weight: 700; color: var(--tc-blue); text-transform: uppercase;
    letter-spacing: 0.04em; margin: 4px 0 -6px; padding-top: 10px; border-top: 1px solid rgba(15, 40, 72, 0.08);
}
.tc-crm-info-body > .tc-crm-info-section-title:first-of-type { border-top: none; padding-top: 0; }
.tc-crm-info-field input:disabled { background: var(--tc-paper); color: var(--tc-ink-soft); }
.tc-crm-info-field input, .tc-crm-info-field select, .tc-crm-info-field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid rgba(15, 40, 72, 0.12); border-radius: var(--tc-radius-sm);
    font-family: var(--tc-font-body); font-size: 0.85rem; box-sizing: border-box;
}
.tc-crm-info-field textarea { resize: vertical; min-height: 70px; }
.tc-crm-tag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tc-crm-tag-chip { font-size: 0.68rem; background: var(--tc-mint-soft); color: #146c4f; padding: 2px 9px; border-radius: 999px; }
.tc-crm-info-meta { font-size: 0.7rem; color: var(--tc-ink-soft); text-align: center; }
.tc-crm-info-save-msg { font-size: 0.75rem; color: #146c4f; text-align: center; min-height: 1em; }

/* --- Libreta de contactos (pestaña "Contactos") ---
   Tabla simple reusando .tc-table, con avatar+badge en la primera
   celda — misma información que la bandeja, presentada para escanear
   muchos contactos de un vistazo en vez de leer una conversación.
   Desde el rediseño con tarjetas (2026-09-08) esto ya NO es una tabla
   HTML — es el mismo componente .tc-crm-card que la bandeja, así que no
   hace falta ninguna conversión de tabla a tarjeta para que se vea bien
   en móvil: ya nace como tarjeta. */
.tc-crm-directory-wrap { padding: 10px; overflow: auto; height: 100%; display: flex; flex-direction: column; gap: 8px; }