/* Light Theme (core blanco, acentos suaves) */

:root {
    /* Base / superficies */
    --blazor-load-background-color: #ffffff;
    --index-background-color: #f9fafb; /* fondo principal: color fijo para tema claro */
    --surface: #ffffff;
    --background-tint-color: #fbfdff; /* ligero tinte para secciones */

    /* Tipografía */
    --app-text-color: #000000; /* texto principal: negro */
    --app-text-muted: #6b7280;

    /* Paleta de acentos (claros y sutiles) */
    --primary: #93c5fd; /* azul claro */
    --primary-700: #60a5fa; /* azul moderado para hover/acentos */
    --secondary: #bbf7d0; /* menta clara */
    --accent: #ffd9b6; /* melocotón claro */
    --accent-700: #ffb68a;

    /* Topbar / footer (mantienen el core blanco pero con borde/acento) */
    --top-bar-background-color: #ffffff;
    --top-bar-text-color: var(--app-text-color);
    --top-bar-border-color: rgba(99,102,241,0.08);

    /* Navegación */
    --navmenu-container-background: #f6fbff; /* sutil azul claro */
    --navbar-background-color: #f6fbff;
    --navbar-text-color: var(--app-text-color);
    --navbar-sub_item-menu_name-hover-color: var(--primary-700);
    --navlink-hover-background-color: rgba(99,102,241,0.06);
    --navlink-hover-text-color: var(--primary-700);
    --navlink-active-background-color: rgba(147,197,253,0.12);
    --navlink-active-text-color: var(--primary-700);

    /* Botones */
    --button-background-color: #eef6ff; /* fondo muy claro para botones */
    --button-text-color: var(--app-text-color);
    --button-hover-background-color: #e0f2ff;
    --button-hover-text-color: var(--app-text-color);
    --button-outline-color: rgba(99,102,241,0.12);

    /* Tablas */
    --table-border-color: #eef4fb;
    --table-text-color: var(--app-text-color);
    /* Usar color sólido para encabezados de tabla (sin gradiente) */
    --table-hover-background-color: #fbfeff;
    --table-edit-icon: var(--primary-700);

    /* Dialogs y contenedores */
    --dialog-background-color: #ffffff;
    --dialog-text-color: var(--app-text-color);
    --paper-container-background: #ffffff;
    --paper-container-border: #f0f6fb;

    --navigation-panel-background: #ffffff;
    --navigation-panel-border: #f0f6fb;

    --boton-activo-background: rgba(99,102,241,0.06);
    --boton-inactivo-background: #fbfdff;
    --boton-hover-background: rgb(177 177 177 / 60%);

    --content-section-background: #ffffff;
    --content-section-border: #f3f7fb;
    --content-section-text: var(--app-text-color);

    /* Sombras suaves y radios */
    --card-shadow: 0 6px 18px rgba(15,23,42,0.04);
    --card-radius: 12px;
    --card-bg-color: #ffffff; /* tarjetas blancas en tema claro */
    --card-text-color: black;
}

/* Reglas globales para mantener el core blanco y acentos suaves */
html, body {
    height: 100%;
    background: var(--index-background-color);
    color: var(--app-text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Enlaces */
a { color: var(--primary-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Botones suaves */
.btn {
    background: var(--button-background-color);
    color: var(--button-text-color);
    border: 1px solid transparent;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(99,102,241,0.04);
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--button-hover-background-color); transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1px solid var(--button-outline-color); }

/* Tarjetas */
.card { background: var(--paper-container-background); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 14px; border: 1px solid var(--paper-container-border); }

/* Tablas */
table { width:100%; border-collapse: collapse; color: var(--table-text-color); }
thead th { background: var(--table-header-background-color); color: var(--app-text-color); padding: 10px 12px; text-align: left; }
tbody tr { border-bottom: 1px solid var(--table-border-color); }
tbody tr:hover { background: var(--table-hover-background-color); }

/* Inputs */
input, select, textarea { background: #fff; border: 1px solid #eef6ff; padding: 8px 10px; border-radius: 6px; color: var(--app-text-color); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,0.06); border-color: var(--primary-700); }

/* Pequeños toques */
.badge { background: var(--accent); color: #000000; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.muted { color: var(--app-text-muted); }

/* Transiciones */
* { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }


/* Forzar color negro en header, navegación y footer por legibilidad */
header, .top-bar, .topbar, .navbar, nav, .mud-appbar, .mud-navmenu, .mud-drawer, footer, .footer {
    color: #000000 !important;
}

header a, .top-bar a, .navbar a, nav a, footer a, .footer a {
    color: #000000 !important;
}

/* Forzar negro en footer y en la "plate" del footer para el tema claro.
   Se usan selectores específicos y !important para sobreescribir estilos locales. */
.footerbar-plate {
    color: #000000 !important;
    border-color: rgba(0,0,0,0.08) !important;
    background: transparent !important;
    border: 1px solid rgb(0 0 0 / 95%) !important;
}

.footerbar-plate .footerbar-label,
.footerbar-plate .footerbar-icon {
    color: #000000 !important;
}
.mud-tabs-tabbar {
    background-color: var(--paper-container-background) !important;
}
.uo-filterbar button,
.uo-filterbar button:hover,
.uo-dialog .save-button,
.uo-dialog .save-button:hover {
    background-color: #594ae2 !important;
    color: white !important;
}