/**
 * ============================================================================
 * Complemento: tdc_marca
 * Componente:  Kit de marca blanca para Roundcube (TDC-RC-KIT)
 * Archivo:     plugins/tdc_marca/marca.css
 * Propósito:   Ajustes fijos de marca sobre Elastic. NO lleva colores fijos:
 *              usa las variables de marca-variables.css (generadas desde
 *              colores.conf), así sirve igual para cualquier cliente.
 *              Selectores verificados contra skins/elastic/styles/styles.min.css
 *              de Roundcube 1.7.4. Prefijo "html body" para ganar prioridad.
 * ----------------------------------------------------------------------------
 * Historial de cambios (últimos 3):
 *   2026-10-17  v1.0.0  Versión genérica con variables, basada en
 *                       techdinecom_marca/marca.css v1.2.0 (uhernandez)
 * ============================================================================
 * AUTOR: Ulises J.Hernandez G. (uhernandez)
 * REVISIÓN Y APROBACIÓN: Ulises Hernandez - Director Técnico (techdinecom)
 * UNIDAD ORGANIZATIVA: Departamento de Desarrollo
 * EMPRESA/FIRMA: TECHDINECOM
 * SISTEMA: Sistema de Gestión NORMADINTECH (TDC-NDT-ERP)
 * TIPO DE SISTEMA: ERP/CMS Institucional de la firma
 * ============================================================================
 */

/* ---------- Logos responsivos ---------- */
html body #logo {
    max-width: 100%;
    height: auto;
}

/* Pantalla de inicio de sesión: logo horizontal */
html body #login-form #logo {
    width: auto;
    max-width: min(320px, 80vw);
    max-height: 110px;
}

/* Barra lateral: ícono cuadrado */
html body #layout-menu #logo {
    max-width: 70%;
    max-height: 3.5rem;
}

/* ---------- Franja de 4 colores en el inicio de sesión ---------- */
html body.task-login::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 1000;
    background: linear-gradient(90deg,
        var(--tdc-principal) 0 25%,
        var(--tdc-acento-1) 25% 50%,
        var(--tdc-acento-2) 50% 75%,
        var(--tdc-acento-3) 75% 100%);
}

/* ---------- Botón principal ---------- */
html body .btn-primary,
html body .btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--tdc-principal);
    border-color: var(--tdc-principal);
    color: var(--tdc-texto-sobre-principal);
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--tdc-principal-oscuro);
    border-color: var(--tdc-principal-oscuro);
    color: var(--tdc-texto-sobre-principal-oscuro);
}

/* ---------- Enlaces ---------- */
html body a,
html body .btn-link {
    color: var(--tdc-principal-texto);
}

/* ---------- Campos con foco ---------- */
html body .form-control:focus,
html body .custom-select:focus {
    border-color: var(--tdc-principal);
    box-shadow: 0 0 0 0.2rem rgba(var(--tdc-principal-rgb), 0.25);
}

/* ---------- Barra lateral izquierda (#taskmenu) ----------
 * En Elastic su fondo es gris oscuro en AMBOS modos, por eso se usa
 * siempre la variante clara del color principal. */
html body #taskmenu .action-buttons a,
html.dark-mode body #taskmenu .action-buttons a {
    color: var(--tdc-principal-claro);
}

html body #taskmenu .action-buttons a:hover,
html.dark-mode body #taskmenu .action-buttons a:hover {
    color: #fff;
}

/* ---------- Contador de no leídos ---------- */
html body .folderlist li.mailbox .unreadcount {
    background: var(--tdc-principal);
    color: var(--tdc-texto-sobre-principal);
}

/* Correo nuevo recién llegado: acento 1 para llamar la atención */
html body .folderlist li.mailbox.recent > a > .unreadcount {
    background: var(--tdc-acento-1);
    color: var(--tdc-texto-sobre-acento-1);
}

/* ---------- Carpeta seleccionada ---------- */
html body ul.treelist li.selected > a,
html body ul.treelist li.selected > div > a {
    color: var(--tdc-principal-texto);
    background-color: var(--tdc-principal-suave);
}

/* ---------- Mensaje o elemento seleccionado ---------- */
html body .listing li.selected,
html body .listing tr.selected td {
    color: #2c363a;
    background-color: var(--tdc-principal-suave);
}

/* ---------- Opción elegida en menús emergentes ---------- */
html body .popupmenu .listing li.selected {
    color: var(--tdc-texto-sobre-principal);
    background-color: var(--tdc-principal);
}

/* ---------- Avisos ---------- */
html body .alert-success {
    border-left: 4px solid var(--tdc-acento-2);
}

html body .alert-danger {
    border-left: 4px solid var(--tdc-acento-1);
}

html body .alert-warning {
    border-left: 4px solid var(--tdc-acento-3);
}

/* ============================================================================
 * Modo oscuro
 * ========================================================================== */
html.dark-mode body a,
html.dark-mode body .btn-link {
    color: var(--tdc-principal-claro);
}

html.dark-mode body .folderlist li.mailbox .unreadcount {
    background-color: var(--tdc-principal);
    color: var(--tdc-texto-sobre-principal);
}

html.dark-mode body .folderlist li.mailbox.recent > a > .unreadcount {
    background-color: var(--tdc-acento-1);
    color: var(--tdc-texto-sobre-acento-1);
}

html.dark-mode body .listing li.selected,
html.dark-mode body .listing li.selected > a,
html.dark-mode body .listing li.selected > div > a,
html.dark-mode body .listing tr.selected td,
html.dark-mode body ul.treelist li.selected > a,
html.dark-mode body ul.treelist li.selected > div > a {
    color: var(--tdc-principal-claro);
    background-color: var(--tdc-principal-fondo-oscuro);
}