/* ============================================================
   WeiSIP - MODO DÍA: contraste y legibilidad
   Fecha: 2026-08-13

   IMPORTANTE:
   - Todas las reglas están limitadas a body.light.
   - No modifica el modo oscuro.
   - Objetivo: mejorar contraste, tamaño de textos secundarios
     y separar visualmente el menú lateral del área de trabajo.
   ============================================================ */

/* ---------- Paleta clara de accesibilidad ---------- */

body.light {
    --light-background: #f1f3f8 !important;
    --light-panel: #ffffff !important;
    --light-panel-secondary: #f5f6fa !important;
    --light-border: #d9dce7 !important;

    /* Más contraste que #191725 / #777482 anteriores */
    --light-text: #171521 !important;
    --light-text-secondary: #4f4b5c !important;

    color: var(--light-text) !important;
    background-color: var(--light-background) !important;
}

/* ---------- Sidebar: separación clara del workspace ---------- */

body.light .sidebar {
    background: #e9ebf3 !important;
    border-right: 1px solid #cfd3df !important;
    box-shadow: 6px 0 22px rgba(35, 31, 55, .07) !important;
}

body.light .brand,
body.light .sidebar-header,
body.light .sidebar-footer {
    border-color: #cfd3df !important;
}

body.light .brand-name,
body.light .sidebar .brand-name,
body.light .sidebar strong,
body.light .sidebar b {
    color: #171521 !important;
}

body.light .brand-description,
body.light .menu-label,
body.light .sidebar .menu-label {
    color: #595566 !important;
}

body.light .menu-item {
    color: #35313f !important;
    font-weight: 650 !important;
}

body.light .menu-item:hover {
    color: #171521 !important;
    background: rgba(108, 92, 231, .10) !important;
}

body.light .menu-item.active {
    color: #ffffff !important;
}

body.light .menu-item.active svg,
body.light .menu-item.active i,
body.light .menu-item.active .menu-text {
    color: #ffffff !important;
}

/* ---------- Topbar / área de trabajo ---------- */

body.light .topbar,
body.light .viewer-topbar {
    background: rgba(255, 255, 255, .98) !important;
    border-color: #d9dce7 !important;
    box-shadow: 0 2px 12px rgba(30, 28, 45, .045) !important;
}

body.light .main-wrapper,
body.light .main-content,
body.light .page-content,
body.light .content-wrapper,
body.light .dashboard-workspace {
    color: #171521;
}

/* ---------- Texto principal/secundario ---------- */

body.light .page-title,
body.light .panel-title,
body.light .card-title,
body.light .section-title,
body.light .widget-title,
body.light .summary-value,
body.light .field-label,
body.light label {
    color: #171521 !important;
}

body.light .page-description,
body.light .panel-subtitle,
body.light .section-description,
body.light .field-help,
body.light .helper-text,
body.light .form-help,
body.light .small-text,
body.light .user-role,
body.light .user-subtext,
body.light .summary-label,
body.light .empty-text,
body.light .connection-id,
body.light .config-note,
body.light .config-card-description,
body.light .config-section-description {
    color: #555061 !important;
}

/* Textos que originalmente estaban en 9/10 px se vuelven más legibles */
body.light .brand-description {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
}

body.light .menu-label {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
}

body.light .menu-text {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
}

body.light .page-description,
body.light .panel-subtitle,
body.light .section-description,
body.light .field-help,
body.light .helper-text,
body.light .form-help,
body.light .small-text,
body.light .user-role,
body.light .user-subtext,
body.light .summary-label,
body.light .empty-text,
body.light .connection-id,
body.light .config-note,
body.light .config-card-description,
body.light .config-section-description {
    font-size: max(11px, 0.72rem) !important;
    line-height: 1.45 !important;
}

/* ---------- Tarjetas / paneles ---------- */

body.light .card,
body.light .panel,
body.light .data-panel,
body.light .summary-card,
body.light .config-card,
body.light .users-table-card,
body.light .role-card,
body.light .dashboard-card,
body.light .builder-card,
body.light .source-card,
body.light .preview-card,
body.light .content-card {
    background: #ffffff !important;
    border-color: #d9dce7 !important;
    box-shadow: 0 2px 10px rgba(30, 28, 45, .045) !important;
}

body.light .panel-header,
body.light .card-header,
body.light .section-header {
    border-color: #d9dce7 !important;
}

/* ---------- Formularios ---------- */

body.light input:not([type="checkbox"]):not([type="radio"]),
body.light textarea,
body.light select,
body.light .form-control,
body.light .search-input,
body.light .billing-select,
body.light .dashboard-filter-control {
    color: #211e2b !important;
    background-color: #ffffff !important;
    border-color: #cfd3df !important;
}

body.light input::placeholder,
body.light textarea::placeholder,
body.light .form-control::placeholder {
    color: #6a6574 !important;
    opacity: 1 !important;
}

body.light input:focus,
body.light textarea:focus,
body.light select:focus,
body.light .form-control:focus {
    border-color: #7666e8 !important;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, .12) !important;
}

/* ---------- Tablas ---------- */

body.light table,
body.light .data-table,
body.light .users-table,
body.light .excel-preview-table {
    color: #211e2b !important;
}

body.light .data-table th,
body.light .users-table th,
body.light .excel-preview-table th,
body.light table th {
    color: #373242 !important;
    background: #f0f1f6 !important;
    border-color: #d9dce7 !important;
    font-weight: 700 !important;
}

body.light .data-table td,
body.light .users-table td,
body.light .excel-preview-table td,
body.light table td {
    color: #2b2734 !important;
    border-color: #e0e2ea !important;
}

body.light .data-row:hover,
body.light tbody tr:hover {
    background-color: #f5f3ff !important;
}

/* ---------- Botones secundarios / iconos ---------- */

body.light .icon-button,
body.light .action-button,
body.light .user-action,
body.light .btn-secondary {
    color: #3e3949 !important;
    background: #ffffff !important;
    border-color: #cfd3df !important;
}

body.light .icon-button:hover,
body.light .action-button:hover,
body.light .user-action:hover,
body.light .btn-secondary:hover {
    color: #211e2b !important;
    background: #f1efff !important;
    border-color: #afa7ea !important;
}

/* ---------- Constructores: legibilidad de campos ---------- */

body.light .field-name,
body.light .field-meta,
body.light .object-name,
body.light .object-meta,
body.light .model-field,
body.light .column-name,
body.light .join-label,
body.light .filter-label {
    color: #292532 !important;
}

body.light .field-meta,
body.light .object-meta {
    color: #5a5565 !important;
}

/* ---------- Dashboard ---------- */

body.light .dashboard-filter-panel {
    background: #ffffff !important;
    border-color: #d5d8e3 !important;
}

body.light .dashboard-filter-label {
    color: #373242 !important;
    font-weight: 700 !important;
}

body.light select.dashboard-filter-control option {
    background: #ffffff !important;
    color: #211e2b !important;
}

/* ---------- Accesibilidad genérica para texto gris heredado ---------- */

body.light [style*="color:#777"],
body.light [style*="color: #777"],
body.light [style*="color:#888"],
body.light [style*="color: #888"],
body.light [style*="color:#999"],
body.light [style*="color: #999"] {
    color: #56515f !important;
}