/* ===== TEMA CLARO WCAG ===== */

/* ===== VARIABLES CSS PARA TEMA CLARO - ESTÁNDARES WCAG ===== */
:root {
  --color-scheme: light;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #E9ECEF;
  --text-primary: #212529;
  --text-secondary: #6C757D;
  --text-disabled: #ADB5BD;
  --border-color: #DEE2E6;
  --modal-bg: #FFFFFF;
  --modal-border: #DEE2E6;
  --input-bg: #FFFFFF;
  --input-border: #CED4DA;
  --button-bg: #F8F9FA;
  --button-border: #DEE2E6;
  --button-hover: #E9ECEF;
  --primary-color: #0D6EFD;
  --success-color: #198754;
  --warning-color: #FFC107;
  --danger-color: #DC3545;
}

/* ===== FORZAR TEMA CLARO - SOBRESCRIBIR SISTEMA ===== */
* {
  color-scheme: light !important;
}

html {
  color-scheme: light !important;
  background-color: #FFFFFF !important;
}

body {
  color-scheme: light !important;
  background-color: #FFFFFF !important;
  color: #212529 !important;
}

/* Forzar colores en elementos específicos que pueden ser afectados por el sistema */
.has-background-black-bis {
  background-color: #FFFFFF !important;
  color: #212529 !important;
}

.navbar.is-dark {
  background-color: #F8F9FA !important;
  color: #212529 !important;
}

.navbar.is-dark .navbar-item {
  color: #212529 !important;
}

.navbar.is-dark .navbar-link {
  color: #212529 !important;
}

/* ===== ESTILOS WEB (DESKTOP) - TEMA CLARO ===== */

/* Aplicar variables a elementos */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html {
  background-color: var(--bg-primary) !important;
}

.section {
  background-color: var(--bg-primary) !important;
}

main, .main-content {
  background-color: var(--bg-primary) !important;
}

/* Modales con variables CSS */
.modal-background {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal-card {
  background-color: var(--modal-bg) !important;
  border: 1px solid var(--modal-border) !important;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02) !important;
}

.modal-card-head {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.modal-card-body {
  background-color: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

.modal-card-foot {
  background-color: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
}

/* Inputs con variables CSS */
.input, .textarea, .select select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Bloque de información del desarrollador */
.developer-info-block {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-left: 4px solid var(--primary-color) !important;
}

.developer-info-block h5 {
  color: var(--text-primary) !important;
}

.developer-info-block strong {
  color: var(--text-primary) !important;
}

.developer-info-block .help {
  color: var(--text-primary) !important;
}

.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.125em rgba(13, 110, 253, 0.25) !important;
}

.input::placeholder, .textarea::placeholder {
  color: var(--text-secondary) !important;
}

/* Botones con variables CSS */
.button {
  background-color: var(--button-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button:hover {
  background-color: var(--button-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.button.is-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.button.is-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: #ffffff !important;
}

.button.is-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: #000000 !important;
}

.button.is-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: #ffffff !important;
}

.button.is-link {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--primary-color) !important;
}

.button.is-link:hover {
  background-color: var(--button-hover) !important;
  color: var(--text-primary) !important;
}

.button.is-info {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  color: #ffffff !important;
}

.button.is-light {
  background-color: var(--button-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--text-primary) !important;
}

.button.is-light:hover {
  background-color: var(--button-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.button.is-ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
}

.button.is-ghost:hover {
  background-color: var(--button-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Títulos y texto */
.title, .subtitle, .label {
  color: var(--text-primary) !important;
}

.title.is-1, .title.is-2, .title.is-3, .title.is-4, .title.is-5, .title.is-6 {
  color: var(--text-primary) !important;
}

.subtitle.is-1, .subtitle.is-2, .subtitle.is-3, .subtitle.is-4, .subtitle.is-5, .subtitle.is-6 {
  color: var(--text-secondary) !important;
}

.label {
  color: var(--text-primary) !important;
}

/* Elementos de archivo */
.file-label {
  color: var(--text-primary) !important;
}

.file-cta {
  background-color: var(--button-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--text-primary) !important;
}

.file-cta:hover {
  background-color: var(--button-hover) !important;
  border-color: var(--border-color) !important;
}

/* Navegación y menús */
.navbar-item, .navbar-link {
  color: var(--text-primary) !important;
}

.navbar-item:hover, .navbar-link:hover {
  background-color: var(--button-hover) !important;
  color: var(--text-primary) !important;
}

.navbar-dropdown {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

.navbar-divider {
  background-color: var(--border-color) !important;
}

/* Contenido y texto general */
.content {
  color: var(--text-primary) !important;
}

.content p, .content li, .content td, .content th {
  color: var(--text-primary) !important;
}

.content strong {
  color: var(--text-primary) !important;
}

/* Tablas */
.table {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.table th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.table tbody tr:hover {
  background-color: var(--bg-secondary) !important;
}

/* Boxes y contenedores */
.box {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Elementos con clases específicas de Bulma */
.has-text-white {
  color: var(--text-primary) !important;
}

.has-text-grey-light {
  color: var(--text-secondary) !important;
}

.has-text-grey {
  color: var(--text-secondary) !important;
}

.has-background-black-ter {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.has-background-black-bis {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Selects y dropdowns */
.select select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--text-primary) !important;
}

/* Checkboxes y radio buttons */
.checkbox {
  color: var(--text-primary) !important;
}

.checkbox input[type="checkbox"] + span {
  color: var(--text-primary) !important;
}

/* Etiquetas (tags) */
.tag {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.tag.is-light {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.tag.is-info {
  background-color: #17a2b8 !important;
  color: #ffffff !important;
}

.tag.is-success {
  background-color: var(--success-color) !important;
  color: #ffffff !important;
}

.tag.is-warning {
  background-color: var(--warning-color) !important;
  color: #000000 !important;
}

.tag.is-danger {
  background-color: var(--danger-color) !important;
  color: #ffffff !important;
}

/* Notificaciones */
.notification {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.notification.is-light {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.notification.is-warning {
  background-color: #fff3cd !important;
  color: #856404 !important;
  border-color: #ffeaa7 !important;
}

.notification.is-info {
  background-color: #d1ecf1 !important;
  color: #0c5460 !important;
  border-color: #bee5eb !important;
}

.notification.is-success {
  background-color: #d4edda !important;
  color: #155724 !important;
  border-color: #c3e6cb !important;
}

.notification.is-danger {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border-color: #f5c6cb !important;
}

/* Botón de cambio de tema */
.theme-toggle {
  background-color: var(--button-bg) !important;
  border: 1px solid var(--button-border) !important;
  color: var(--text-primary) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.theme-toggle:hover {
  background-color: var(--button-hover) !important;
  border-color: var(--border-color) !important;
}

.theme-toggle .icon {
  font-size: 1.2rem !important;
}

/* Estilos específicos para tema claro */
.has-text-white {
  color: var(--text-primary) !important;
}

.title.has-text-white {
  color: var(--text-primary) !important;
}

.subtitle.has-text-white {
  color: var(--text-primary) !important;
}

.label.has-text-white {
  color: var(--text-primary) !important;
}

.help.has-text-white {
  color: var(--text-primary) !important;
}

/* Tablas en tema claro */
.table {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.table th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.table td {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.table tbody tr:hover {
  background-color: var(--bg-secondary) !important;
}

/* Boxes en tema claro */
.box {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02) !important;
}

/* Navbar en tema claro */
.navbar {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.navbar-item {
  color: var(--text-primary) !important;
}

.navbar-item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Nombre de usuario en navbar - tema claro */
.navbar-link {
  color: var(--text-primary) !important;
}

.navbar-link .user-name {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

.navbar-link .custom-arrow {
  color: var(--text-primary) !important;
}

.navbar-link:hover {
  background-color: var(--bg-tertiary) !important;
}

.navbar-link:hover .user-name {
  color: var(--text-primary) !important;
}

.navbar-link:hover .custom-arrow {
  color: var(--text-primary) !important;
}

/* Dropdown en tema claro */
.dropdown-menu {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background-color: var(--bg-secondary) !important;
}

/* Navbar dropdown en tema claro - REGLAS MÁS ESPECÍFICAS */
.navbar.is-dark .navbar-dropdown {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.navbar.is-dark .navbar-dropdown .navbar-item {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

.navbar.is-dark .navbar-dropdown .navbar-item:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.navbar.is-dark .navbar-dropdown .navbar-divider {
  background-color: var(--border-color) !important;
}

/* Reglas adicionales para asegurar que se apliquen */
.navbar-dropdown {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.navbar-dropdown .navbar-item {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

.navbar-dropdown .navbar-item:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.navbar-dropdown .navbar-divider {
  background-color: var(--border-color) !important;
}

/* ===== ESTILOS ESPECÍFICOS PARA EMPRESAS ===== */
/* Tabla de empresas en tema claro */
.table.empresa-table {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.table.empresa-table th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.table.empresa-table td {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.table.empresa-table tbody tr:hover {
  background-color: var(--bg-secondary) !important;
}

/* RUC en tema claro */
.empresa-ruc {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  font-family: monospace !important;
}

/* Texto de ayuda en tema claro */
.help {
  color: var(--text-primary) !important;
}

.help strong {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.help * {
  color: var(--text-primary) !important;
}

/* Checkbox label en tema claro */
.checkbox span {
  color: var(--text-primary) !important;
}

/* Filas de tabla de usuarios en tema claro */
.user-item {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.user-item:hover {
  background-color: var(--bg-secondary) !important;
}

.user-item td {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Tarjetas de usuario en vista móvil */
.user-card {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.user-card:hover {
  background-color: var(--bg-secondary) !important;
}

/* ===== ESTILOS ESPECÍFICOS PARA PERFIL ===== */
/* Avatar y elementos del perfil */
.avatar-circle, .avatar-circle-large {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* Tabla de perfil */
.profile-table {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  table-layout: fixed !important;
  width: 100% !important;
}

.profile-table th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
}

.profile-table td:first-child {
  width: 30% !important;
  min-width: 150px !important;
}

.profile-table td:last-child {
  width: 70% !important;
}

.profile-table td {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  padding: 12px 16px !important;
  vertical-align: top !important;
  word-wrap: break-word !important;
  white-space: normal !important;
}

.profile-table tr {
  background-color: transparent !important;
}

.profile-table tr:hover {
  background-color: var(--bg-secondary) !important;
}

.profile-table .has-text-weight-semibold {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Regla más específica para td con has-text-weight-semibold */
td.has-text-weight-semibold {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  background-color: transparent !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  width: 30% !important;
  min-width: 150px !important;
  max-width: 200px !important;
}

/* Regla universal para has-text-weight-semibold */
.has-text-weight-semibold {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Regla ultra específica para perfil */
.profile-table td.has-text-weight-semibold {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  width: 30% !important;
  min-width: 150px !important;
  max-width: 200px !important;
  display: table-cell !important;
}

/* Tarjeta móvil del perfil */
.profile-mobile-card {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.profile-mobile-card .card-content {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.profile-mobile-card .media-content .title,
.profile-mobile-card .media-content .subtitle {
  color: var(--text-primary) !important;
}

.profile-mobile-card .content p {
  color: var(--text-primary) !important;
}

/* Input estático en perfil */
.input.is-static {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Cards en tema claro */
.card {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02) !important;
}

.card-header {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.card-header-title {
  color: var(--text-primary) !important;
}

.card-content {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Avatar container */
.avatar-container {
  background-color: transparent !important;
}

/* Field horizontal layout */
.field.is-horizontal .field-label .label {
  color: var(--text-primary) !important;
}

.field.is-horizontal .field-body .field .control .input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Tags en tema claro */
.tags .tag {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.tags .tag.is-light {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.tags .tag.is-danger {
  background-color: var(--danger-color) !important;
  color: #ffffff !important;
}

.tags .tag.is-link {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* Modal de editar perfil */
.modal-card {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.modal-card-head {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

.modal-card-title {
  color: var(--text-primary) !important;
}

.modal-card-body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.modal-card-foot {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-top-color: var(--border-color) !important;
}

.modal .delete {
  background-color: var(--text-primary) !important;
}

.modal .delete::before,
.modal .delete::after {
  background-color: var(--text-primary) !important;
}

.modal .delete:hover {
  background-color: var(--bg-tertiary) !important;
}

.modal .delete:focus {
  background-color: var(--bg-tertiary) !important;
}

/* Fecha de empresa en tema claro */
.empresa-fecha {
  color: var(--text-secondary) !important;
  font-size: 0.875rem !important;
}

/* Mensaje vacío en tema claro */
.empresa-empty-message {
  color: var(--text-secondary) !important;
}

/* ===== ESTILOS ESPECÍFICOS PARA USUARIOS ===== */
/* Tabla de usuarios en tema claro */
.table.user-table {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.table.user-table th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.table.user-table td {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.table.user-table tbody tr:hover {
  background-color: var(--bg-secondary) !important;
}

/* Cards de usuarios en tema claro */
.user-card {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.user-card .card-content {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.user-card .title,
.user-card .subtitle {
  color: var(--text-primary) !important;
}

.user-card .content {
  color: var(--text-primary) !important;
}

.user-card .content strong {
  color: var(--text-primary) !important;
}

/* ===== ESTILOS MÓVIL - TEMA CLARO ===== */
/* Los estilos móviles están en mobile-interface.css para evitar conflictos */