/* =====================================================================================
   Legibilidad – TicasERP (feedback de cliente, CutManager, 2026-09)
   "Todo se ve muy uniforme; después de varias horas cuesta distinguir los apartados."

   - Encabezados de sección con barra de color (derivada del color del tema) y título en MAYÚSCULAS.
   - Etiquetas de campo en negritas, tono más oscuro y un poco más grandes.
   - Campos NO editables (disabled) sin recuadro: se muestran como texto informativo.
   - Menú de pestañas del módulo en MAYÚSCULAS / negritas / gris oscuro.
   - KPIs con cifras más grandes; cabeceras de tabla con tono del tema.

   ALCANCE: todas las reglas cuelgan de ".tm-readable". Hoy esa clase está en #wrapper
   (Layout/MainLayout.razor) = todo el sistema. Para limitarlo solo a CutManager, quitarla de
   MainLayout y ponerla en el <div class="t-page"> de CutManagerShell.razor.

   COLORES: todo sale de las variables del tema (--theme-primary*), que branding-boot.js
   sobrescribe con los colores personalizados del usuario → la personalización sigue mandando.
   Carga DESPUÉS de theme-tokens.css (ver index.html).
   ===================================================================================== */

:root {
    /* Color del tema mezclado con blanco para que la barra no sea tan intensa. Subir/bajar el %
       (100% = color puro). Se mezcla con color-mix y no con opacity para no aclarar el texto. */
    --tm-section-strength: 78%;
    --tm-section-base: var(--theme-primary-hover, #2e59d9);
    --tm-section-bg: color-mix(in srgb, var(--tm-section-base) var(--tm-section-strength), #ffffff);
    --tm-section-text: #ffffff;
    --tm-label-text: #1f2937;
    --tm-static-text: #111827;
    --tm-nav-text: #374151;
    --tm-thead-bg: var(--theme-primary-soft-bg, #eef2fd);
    --tm-thead-text: #1f2937;
}
body.dark-mode {
    /* En oscuro se mezcla hacia el fondo oscuro (no hacia blanco) para que no deslumbre */
    --tm-section-bg: color-mix(in srgb, var(--tm-section-base) 65%, #1a1d24);
    --tm-label-text: #e5e7eb;
    --tm-static-text: #f9fafb;
    --tm-nav-text: #d1d5db;
    --tm-thead-bg: rgba(255, 255, 255, 0.06);
    --tm-thead-text: #e5e7eb;
}

/* =====================================================================================
   1) Encabezados de sección (SectionCard / CutSection / .t-card-header y .card-header)
   ===================================================================================== */
html body .tm-readable .t-card > .t-card-header,
html body .tm-readable .card > .card-header {
    background: var(--tm-section-bg) !important;
    background-image: none !important;
    border-bottom-color: transparent !important;
    color: var(--tm-section-text) !important;
}
html body .tm-readable .t-card > .t-card-header .t-card-title,
html body .tm-readable .t-card > .t-card-header .t-card-title-danger,
html body .tm-readable .t-card > .t-card-header .t-card-title-success,
html body .tm-readable .card > .card-header h1, html body .tm-readable .card > .card-header h2,
html body .tm-readable .card > .card-header h3, html body .tm-readable .card > .card-header h4,
html body .tm-readable .card > .card-header h5, html body .tm-readable .card > .card-header h6 {
    color: var(--tm-section-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700 !important;
}
/* Íconos, textos y enlaces sueltos dentro de la barra: blancos para que se lean sobre el color */
html body .tm-readable .t-card > .t-card-header > i,
html body .tm-readable .t-card > .t-card-header > .fas,
html body .tm-readable .t-card > .t-card-header .text-muted,
html body .tm-readable .t-card > .t-card-header .text-primary,
html body .tm-readable .card > .card-header > i,
html body .tm-readable .card > .card-header .text-muted,
html body .tm-readable .card > .card-header .text-primary,
html body .tm-readable .card > .card-header > a:not(.btn) {
    color: var(--tm-section-text) !important;
}
/* Enlaces dentro del título (p. ej. el nombre del módulo colapsable en "Permisos de acceso", que
   trae text-gray-800) y etiquetas de checkbox de la barra: antes quedaban gris oscuro sobre el color. */
html body .tm-readable .t-card > .t-card-header :is(h1, h2, h3, h4, h5, h6) a:not(.t-btn),
html body .tm-readable .t-card > .t-card-header .t-form-check-label,
html body .tm-readable .card > .card-header :is(h1, h2, h3, h4, h5, h6) a:not(.btn),
html body .tm-readable .card > .card-header .form-check-label {
    color: var(--tm-section-text) !important;
    font-weight: 600;
}
/* Botones neutros dentro de la barra (secondary, outline-*, light o sin variante): TODOS con el mismo
   estilo "claro" — fondo blanco, texto/ícono del color del tema y borde blanco — para que se lean sobre
   el color y se vean homologados entre sí. Antes solo se forzaba el fondo blanco y t-btn-secondary
   conservaba su texto blanco: "Exportar" y el cambio de vista quedaban blanco sobre blanco.
   Los botones de acción con color propio (primary, success, danger, warning, info) no se tocan. */
html body .tm-readable .t-card > .t-card-header .t-btn:not(.t-btn-primary):not(.t-btn-success):not(.t-btn-danger):not(.t-btn-warning):not(.t-btn-info),
html body .tm-readable .card > .card-header .btn:is([class*="btn-outline-"], .btn-light, .btn-secondary) {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--tm-hdr-btn-text, var(--theme-primary, #4e73df)) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}
/* Los outline con significado conservan su color de texto (un "Eliminar" sigue rojo): la regla de
   arriba lee el color de --tm-hdr-btn-text, así que basta con fijar la variable por variante. */
html body .tm-readable .t-card > .t-card-header .t-btn-outline-danger { --tm-hdr-btn-text: #d92d20; }
html body .tm-readable .t-card > .t-card-header .t-btn-outline-success { --tm-hdr-btn-text: #039855; }
html body .tm-readable .t-card > .t-card-header .t-btn-outline-warning { --tm-hdr-btn-text: #dc6803; }
html body .tm-readable .t-card > .t-card-header .t-btn-outline-info { --tm-hdr-btn-text: #0891b2; }
html body .tm-readable .t-card > .t-card-header .t-btn:not(.t-btn-primary):not(.t-btn-success):not(.t-btn-danger):not(.t-btn-warning):not(.t-btn-info) :is(i, span, svg),
html body .tm-readable .card > .card-header .btn:is([class*="btn-outline-"], .btn-light, .btn-secondary) :is(i, span, svg) {
    color: inherit !important;
}
html body .tm-readable .t-card > .t-card-header .t-btn:not(.t-btn-primary):not(.t-btn-success):not(.t-btn-danger):not(.t-btn-warning):not(.t-btn-info):hover:not(:disabled),
html body .tm-readable .card > .card-header .btn:is([class*="btn-outline-"], .btn-light, .btn-secondary):hover:not(:disabled) {
    background-color: var(--theme-primary, #4e73df) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
html body .tm-readable .t-card > .t-card-header .t-btn:not(.t-btn-primary):not(.t-btn-success):not(.t-btn-danger):not(.t-btn-warning):not(.t-btn-info):disabled {
    opacity: 0.7;
}
/* Oscuro: la barra es oscura, así que el botón neutro es translúcido con texto blanco. */
html body.dark-mode .tm-readable .t-card > .t-card-header .t-btn:not(.t-btn-primary):not(.t-btn-success):not(.t-btn-danger):not(.t-btn-warning):not(.t-btn-info),
html body.dark-mode .tm-readable .card > .card-header .btn:is([class*="btn-outline-"], .btn-light, .btn-secondary) {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: none;
}
html body.dark-mode .tm-readable .t-card > .t-card-header .t-btn:not(.t-btn-primary):not(.t-btn-success):not(.t-btn-danger):not(.t-btn-warning):not(.t-btn-info):hover:not(:disabled),
html body.dark-mode .tm-readable .card > .card-header .btn:is([class*="btn-outline-"], .btn-light, .btn-secondary):hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.24) !important;
}
/* Buscadores/selects dentro de la barra: mismo alto visual que los botones y texto oscuro legible. */
html body .tm-readable .t-card > .t-card-header :is(input.t-form-control, select.t-form-control) {
    color: #1f2937;
    background-color: #ffffff;
    border-color: #ffffff;
}

/* =====================================================================================
   2) Etiquetas de campo
   ===================================================================================== */
html body .tm-readable .t-form-label,
html body .tm-readable label.form-label,
html body .tm-readable .form-group > label {
    color: var(--tm-label-text) !important;
    font-weight: 700 !important;
    font-size: 0.9rem;
}

/* =====================================================================================
   3) Campos no editables → texto informativo (sin recuadro)
   Solo :disabled (no [readonly]: algunos datepickers usan readonly y sí son interactivos).
   ===================================================================================== */
html body .tm-readable .t-form-control:disabled,
html body .tm-readable .form-control:disabled {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--tm-static-text) !important;
    -webkit-text-fill-color: var(--tm-static-text);
    font-weight: 700;
    font-size: 0.95rem;
    opacity: 1 !important;
    cursor: default !important;
    resize: none;
}
/* Campos con icono absoluto a la izquierda (.relative + pl-9): conservar el hueco del icono */
html body .tm-readable .relative > .t-form-control.pl-9:disabled {
    padding-left: 2.25rem !important;
}
html body .tm-readable select.t-form-control:disabled,
html body .tm-readable select.form-control:disabled {
    -webkit-appearance: none;
    appearance: none;
    background-image: none !important;
}
html body .tm-readable input.t-form-control:disabled::-webkit-calendar-picker-indicator,
html body .tm-readable input.form-control:disabled::-webkit-calendar-picker-indicator {
    display: none;
}
html body .tm-readable .t-combobox-trigger:disabled .t-combobox-chevron { display: none !important; }
html body .tm-readable .t-combobox-trigger:disabled .truncate { white-space: normal; }

/* =====================================================================================
   4) Pestañas / menú superior de módulo
   Solo las de primer nivel (no los ítems de los submenús desplegables, que van en .t-card).
   ===================================================================================== */
html body .tm-readable .t-nav-tabs .t-nav-link:not(.t-card .t-nav-link) {
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
html body .tm-readable .t-nav-tabs .t-nav-link:not(.t-nav-link-active):not(:hover) {
    color: var(--tm-nav-text) !important;
}
html body .tm-readable .t-nav-tabs .t-card .t-nav-link:not(:hover) {
    color: var(--tm-nav-text) !important;
    font-weight: 600 !important;
}

/* =====================================================================================
   5) KPIs (KpiCard / .t-stat-*): etiqueta en negritas y cifra más grande
   ===================================================================================== */
html body .tm-readable .t-stat-label { font-weight: 700 !important; font-size: 0.8rem; }
html body .tm-readable .t-stat-value { font-size: 1.6rem !important; font-weight: 800 !important; line-height: 1.2; }
html body .tm-readable .t-stat-card-danger { background-color: #fef3f2 !important; border-left-width: 6px !important; }
html body .tm-readable .t-stat-card-danger .t-stat-value { color: #d92d20 !important; }
html body .tm-readable .t-stat-card-danger .text-3xl { color: #f97066 !important; }
body.dark-mode .tm-readable .t-stat-card-danger { background-color: rgba(240, 68, 56, 0.12) !important; }
body.dark-mode .tm-readable .t-stat-card-danger .t-stat-value { color: #f97066 !important; }

/* =====================================================================================
   6) Botones de acción en tablas: Ver = verde, Editar = amarillo, Eliminar = rojo.
   Un .t-btn-icon sin variante queda gris (antes salía casi invisible: blanco sin fondo).
   ===================================================================================== */
html body .tm-readable .t-btn-icon:not([class*="bg-"]):not([class*="t-btn-icon-"]) { background-color: #667085; }
html body .tm-readable .t-btn-icon-view { background-color: #12b76a !important; }
html body .tm-readable .t-btn-icon-edit { background-color: #f79009 !important; }
html body .tm-readable .t-btn-icon-delete { background-color: #f04438 !important; }

/* =====================================================================================
   7) Cabeceras de tabla con tono del tema y texto fuerte
   ===================================================================================== */
html body .tm-readable .t-table thead th,
html body .tm-readable .table thead th {
    background-color: var(--tm-thead-bg) !important;
    color: var(--tm-thead-text) !important;
    font-weight: 700 !important;
}