/* ==========================================================================
   WorkE UI — Sistema visual (Fase 1)
   ==========================================================================

   Esta hoja se carga DESPUÉS de style.css y no modifica ni un byte de aquella.
   Todo el sistema visual nuevo se activa o desactiva comentando una sola línea
   en app/views/layouts/main.php:

       <link rel="stylesheet" href=".../assets/css/worke-ui.css">

   Sin ese <link>, la aplicación vuelve exactamente al aspecto anterior.

   Alcance de la Fase 1 (aprobado): tokens y paleta, tipografía, botones,
   formularios, tablas, tarjetas, badges, alertas y accesibilidad.
   NO se toca la estructura de las vistas ni la navegación.

   Índice
     1. Tokens y paleta
     2. Tipografía
     3. Base y superficies
     4. Botones
     5. Formularios
     6. Tablas
     7. Tarjetas, paneles y métricas
     8. Badges
     9. Alertas
    10. Accesibilidad y movimiento
    11. Chrome de aplicación (Fase 2)
    12. Parches de transición (se retiran en fases posteriores)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS Y PALETA
   ==========================================================================
   Se redefinen las variables que ya existen en style.css. Como esta hoja
   carga después, TODAS las reglas de style.css que usan var(--...) adoptan
   los valores nuevos sin duplicar una sola regla. Es el cambio de mayor
   alcance del proyecto y el de menor riesgo.

   Se unifica en un único azul primario y un único rojo de peligro,
   eliminando la convivencia con las paletas de Bootstrap y Material.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Escala neutra (slate) --------------------------------------- */
    --wk-neutral-0:   #ffffff;
    --wk-neutral-25:  #fcfcfd;
    --wk-neutral-50:  #f8fafc;
    --wk-neutral-100: #f1f5f9;
    --wk-neutral-200: #e6ebf2;
    --wk-neutral-300: #cfd8e3;
    --wk-neutral-400: #94a3b8;
    --wk-neutral-500: #64748b;
    --wk-neutral-600: #475569;
    --wk-neutral-700: #334155;
    --wk-neutral-800: #1e293b;
    --wk-neutral-900: #0f172a;

    /* --- Azul primario (único en todo el producto) -------------------- */
    --wk-primary-50:  #eff6ff;
    --wk-primary-100: #dbeafe;
    --wk-primary-200: #bfdbfe;
    --wk-primary-500: #3b82f6;
    --wk-primary-600: #2563eb;
    --wk-primary-700: #1d4ed8;
    --wk-primary-800: #1e40af;

    /* --- Semánticos --------------------------------------------------- */
    --wk-success-50:  #f0fdf4;
    --wk-success-200: #bbf7d0;
    --wk-success-600: #16a34a;
    --wk-success-800: #166534;

    --wk-warning-50:  #fffbeb;
    --wk-warning-200: #fde68a;
    --wk-warning-600: #d97706;
    --wk-warning-800: #92400e;

    --wk-danger-50:   #fef2f2;
    --wk-danger-200:  #fecaca;
    --wk-danger-600:  #dc2626;
    --wk-danger-700:  #b91c1c;
    --wk-danger-800:  #991b1b;

    /* --- Tipografía ---------------------------------------------------
       Stack de sistema: usa la fuente de interfaz nativa de cada SO
       (Segoe UI en Windows, SF Pro en macOS, Roboto en Android).
       Sustituir Arial es el cambio tipográfico de mayor impacto y coste cero.

       Para pasar a una fuente propia auto-alojada (Inter), basta con dejar
       el .woff2 en assets/fonts/, declarar su @font-face y anteponerla aquí.
       La CSP (default-src 'self', sin font-src) impide servirla desde un CDN. */
    --wk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
                    "Segoe UI", Inter, Roboto, "Helvetica Neue", "Noto Sans",
                    Arial, sans-serif;

    --wk-text-xs:   12px;
    --wk-text-sm:   13px;
    --wk-text-base: 14px;
    --wk-text-md:   16px;
    --wk-text-lg:   19px;
    --wk-text-xl:   23px;
    --wk-text-2xl:  28px;

    /* --- Sombras: neutras y sutiles, nunca teñidas de color ------------ */
    --wk-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --wk-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --wk-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
    --wk-shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.09), 0 4px 8px rgba(15, 23, 42, 0.04);

    --wk-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.32);

    /* ==================================================================
       Redefinición de los tokens heredados de style.css.
       A partir de aquí, todo lo que ya usaba var(--primary), var(--border),
       var(--shadow-sm)… adopta la paleta nueva automáticamente.
       ================================================================== */

    --bg:            var(--wk-neutral-50);
    --surface:       var(--wk-neutral-0);
    --surface-soft:  var(--wk-neutral-50);
    --surface-muted: var(--wk-neutral-100);
    --surface-dark:  var(--wk-neutral-900);

    --text:        var(--wk-neutral-700);
    --text-soft:   var(--wk-neutral-500);
    --text-strong: var(--wk-neutral-900);

    --border:        var(--wk-neutral-200);
    --border-strong: var(--wk-neutral-300);

    --primary:         var(--wk-primary-600);
    --primary-hover:   var(--wk-primary-700);
    --secondary:       var(--wk-neutral-500);
    --secondary-hover: var(--wk-neutral-600);
    --danger:          var(--wk-danger-600);
    --danger-hover:    var(--wk-danger-700);

    --success-bg:     var(--wk-success-50);
    --success-text:   var(--wk-success-800);
    --success-border: var(--wk-success-200);
    --warning-bg:     var(--wk-warning-50);
    --warning-text:   var(--wk-warning-800);
    --warning-border: var(--wk-warning-200);
    --error-bg:       var(--wk-danger-50);
    --error-text:     var(--wk-danger-800);
    --error-border:   var(--wk-danger-200);
    --info-bg:        var(--wk-primary-50);
    --info-text:      var(--wk-primary-800);
    --info-border:    var(--wk-primary-200);

    --shadow-xs: var(--wk-shadow-xs);
    --shadow-sm: var(--wk-shadow-sm);
    --shadow-md: var(--wk-shadow-md);
    --shadow-lg: var(--wk-shadow-lg);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
}


/* ==========================================================================
   2. TIPOGRAFÍA
   ==========================================================================
   Arial/Helvetica es la señal individual más fuerte de software antiguo y
   afecta al 100 % del texto. Los controles de formulario no heredan la
   fuente del body, así que hay que declararla también en ellos.
   ========================================================================== */

body {
    font-family: var(--wk-font-sans);
    font-size: var(--wk-text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea,
.button,
.button-danger {
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--text-strong);
}

h2 { font-size: var(--wk-text-2xl); line-height: 1.25; }
h3 { font-size: var(--wk-text-lg);  line-height: 1.3;  }
h4 { font-size: var(--wk-text-md);  line-height: 1.35; }

small,
.text-muted {
    color: var(--text-soft);
}

/* Cifras tabulares: las columnas de horas y minutos quedan alineadas en
   vertical y se pueden comparar de un vistazo, que es el uso real de estas
   tablas (jornadas, saldos, rankings). */
.table td,
.table th,
.metric-value,
time,
.badge {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   3. BASE Y SUPERFICIES
   ==========================================================================
   El fondo actual apila dos gradientes radiales y uno lineal, y el contenedor
   principal flota con radio 24px, sombra grande y desenfoque. La interfaz
   compite con su propio contenido. Se sustituye por un fondo liso y una
   superficie sobria: la jerarquía la marcan el espaciado y la tipografía,
   no la decoración.
   ========================================================================== */

body {
    background: var(--wk-neutral-50);
    color: var(--text);
}

main {
    background: var(--wk-neutral-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--wk-shadow-sm);
    backdrop-filter: none;
}

hr {
    height: 1px;
    background: var(--border);
    border: none;
}

a {
    color: var(--primary);
    text-underline-offset: 2px;
}


/* ==========================================================================
   4. BOTONES
   ==========================================================================
   Los botones actuales usan gradiente diagonal + negrita + sombra teñida de
   color: el lenguaje visual de 2014-2016. Se aplanan y se les da una
   jerarquía real.

   Cambio estructural importante: se elimina el `margin-bottom: 15px` que
   style.css mete DENTRO del componente. Ese margen es la causa del hueco
   muerto que aparece cuando una barra de botones salta de línea y hace que
   el salto parezca un error de maquetación. La separación pasa a ser
   responsabilidad de los contenedores (.actions, .form-actions… ya tienen
   `gap`), que es donde corresponde.
   ========================================================================== */

.button,
.button-danger,
button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--wk-text-base);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 0;
    box-shadow: var(--wk-shadow-xs);
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease;
}

/* Se elimina el desplazamiento vertical al pasar el ratón: en barras densas
   producía saltos y no aporta información. El cambio de color ya es señal
   suficiente de interactividad. */
.button:hover,
.button-danger:hover,
.button:active,
.button-danger:active {
    transform: none;
}

/* --- Primario: una sola acción principal por pantalla ------------------ */
.button {
    background: var(--wk-primary-600);
    color: #ffffff;
}

.button:hover {
    background: var(--wk-primary-700);
    color: #ffffff;
    box-shadow: var(--wk-shadow-sm);
}

.button:active {
    background: var(--wk-primary-800);
}

/* --- Secundario: superficie neutra con borde --------------------------
   Antes era un gradiente gris que pesaba casi tanto como el primario, así
   que la acción principal no destacaba. Ahora hay contraste real entre
   "la acción" y "las demás opciones", que es lo que permite que una barra
   con muchos elementos siga siendo legible. */
.button.button-secondary {
    background: var(--wk-neutral-0);
    color: var(--wk-neutral-700);
    border-color: var(--border-strong);
    box-shadow: var(--wk-shadow-xs);
}

.button.button-secondary:hover {
    background: var(--wk-neutral-50);
    color: var(--wk-neutral-900);
    border-color: var(--wk-neutral-400);
    box-shadow: var(--wk-shadow-sm);
}

.button.button-secondary:active {
    background: var(--wk-neutral-100);
}

/* --- Aviso ------------------------------------------------------------ */
.button.button-warning {
    background: var(--wk-warning-600);
    color: #ffffff;
    border-color: transparent;
}

.button.button-warning:hover {
    background: var(--wk-warning-800);
    color: #ffffff;
}

/* --- Peligro ---------------------------------------------------------- */
.button-danger {
    background: var(--wk-danger-600);
    color: #ffffff;
}

.button-danger:hover {
    background: var(--wk-danger-700);
    color: #ffffff;
    box-shadow: var(--wk-shadow-sm);
}

.button-danger:active {
    background: var(--wk-danger-800);
}

.button[disabled],
.button-danger[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Diana táctil de 44px en dispositivos sin ratón (WCAG 2.5.5). */
@media (pointer: coarse) {
    .button,
    .button-danger,
    button.button {
        min-height: 44px;
    }
}

/* Enlaces de acción dentro de listados */
.action-link {
    font-weight: 600;
}


/* ==========================================================================
   5. FORMULARIOS
   ========================================================================== */

.form {
    background: var(--wk-neutral-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--wk-shadow-xs);
    padding: 24px;
}

.form-group label {
    font-size: var(--wk-text-sm);
    font-weight: 600;
    color: var(--wk-neutral-700);
    letter-spacing: 0.01em;
}

.form-group input,
.form-group select,
.form-group textarea,
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form input[type="number"],
.form input[type="time"],
.form input[type="search"],
.form select,
.form textarea {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--wk-neutral-0);
    color: var(--text);
    font-size: var(--wk-text-base);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.form input::placeholder,
.form textarea::placeholder {
    color: var(--wk-neutral-400);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.form input:hover,
.form select:hover,
.form textarea:hover {
    border-color: var(--wk-neutral-400);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="password"]:focus,
.form input[type="date"]:focus,
.form input[type="number"]:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--wk-primary-600);
    box-shadow: var(--wk-focus-ring);
}

.form-group input:disabled,
.form select:disabled,
.form textarea:disabled {
    background: var(--wk-neutral-100);
    color: var(--wk-neutral-500);
    cursor: not-allowed;
}


/* ==========================================================================
   6. TABLAS
   ==========================================================================
   Las tablas son el contenido principal del producto (fichajes, empleados,
   ausencias, informes). Se les quita el gradiente de cabecera y se prioriza
   la legibilidad de la retícula.
   ========================================================================== */

.table {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--wk-shadow-xs);
    margin-top: 16px;
}

.table th {
    background: var(--wk-neutral-50);
    color: var(--wk-neutral-500);
    font-size: var(--wk-text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: 12px 14px;
    font-size: var(--wk-text-base);
    color: var(--text);
    border-bottom: 1px solid var(--wk-neutral-100);
}

.table tbody tr {
    transition: background-color 0.12s ease;
}

.table tbody tr:hover td {
    background-color: var(--wk-neutral-50);
}

/* Filas de estado: se sustituye el relleno de color a toda la fila por una
   marca lateral. El estado sigue siendo evidente pero el texto conserva
   su contraste y la tabla no se vuelve un semáforo. */
.table tbody tr.row-expiring-soon td {
    background-color: var(--wk-warning-50);
    border-top: none;
    border-bottom: 1px solid var(--wk-neutral-100);
}

.table tbody tr.row-expiring-soon td:first-child {
    border-left: 3px solid var(--wk-warning-600);
}

.table tbody tr.row-expiring-soon:hover td {
    background-color: #fef6e0;
}

.table tbody tr.row-expired td {
    background-color: var(--wk-danger-50);
    border-top: none;
    border-bottom: 1px solid var(--wk-neutral-100);
}

.table tbody tr.row-expired td:first-child {
    border-left: 3px solid var(--wk-danger-600);
}

.table tbody tr.row-expired:hover td {
    background-color: #fde8e8;
}


/* ==========================================================================
   7. TARJETAS, PANELES Y MÉTRICAS
   ==========================================================================
   Se retiran los gradientes verticales de las superficies. Una tarjeta es un
   contenedor: no debe atraer la mirada más que el dato que contiene.
   ========================================================================== */

.card,
.panel,
.info-card,
.section-panel {
    background: var(--wk-neutral-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--wk-shadow-xs);
    padding: 20px;
}

.section-panel {
    padding: 22px;
}

.metric-card {
    background: var(--wk-neutral-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--wk-shadow-xs);
    padding: 18px 20px;
}

/* La barra inferior pasa de gradiente de 4px a una línea sólida de 3px. */
.metric-card::after {
    height: 3px;
    background: var(--wk-primary-600);
}

.metric-card h3,
.info-card h3,
.card h3,
.panel h3 {
    font-size: var(--wk-text-sm);
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.metric-value {
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.metric-label {
    font-size: var(--wk-text-sm);
    color: var(--text-soft);
}

.dashboard-hero {
    background: var(--wk-primary-50);
    border: 1px solid var(--wk-primary-100);
    border-radius: var(--radius-xl);
    box-shadow: none;
    padding: 24px;
}

.dashboard-hero p {
    color: var(--wk-neutral-600);
}


/* ==========================================================================
   8. BADGES
   ========================================================================== */

.badge {
    padding: 3px 9px;
    border-radius: 6px;
    font-size: var(--wk-text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--wk-neutral-100);
    color: var(--wk-neutral-600);
    border: 1px solid var(--border);
}

.badge-success {
    background: var(--wk-success-50);
    color: var(--wk-success-800);
    border-color: var(--wk-success-200);
}

.badge-danger {
    background: var(--wk-danger-50);
    color: var(--wk-danger-800);
    border-color: var(--wk-danger-200);
}

.badge-warning {
    background: var(--wk-warning-50);
    color: var(--wk-warning-800);
    border-color: var(--wk-warning-200);
}

.badge-info {
    background: var(--wk-primary-50);
    color: var(--wk-primary-800);
    border-color: var(--wk-primary-200);
}


/* ==========================================================================
   9. ALERTAS
   ==========================================================================
   Se añade una marca lateral de color: el tipo de mensaje se identifica por
   posición y no solo por el tono del fondo, que es más accesible para
   usuarios con dificultades de percepción del color.
   ========================================================================== */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    border-left-width: 3px;
    box-shadow: none;
    font-size: var(--wk-text-base);
    margin-bottom: 18px;
}

.alert-success {
    background-color: var(--wk-success-50);
    color: var(--wk-success-800);
    border-color: var(--wk-success-200);
    border-left-color: var(--wk-success-600);
}

.alert-warning {
    background-color: var(--wk-warning-50);
    color: var(--wk-warning-800);
    border-color: var(--wk-warning-200);
    border-left-color: var(--wk-warning-600);
}

.alert-info {
    background-color: var(--wk-primary-50);
    color: var(--wk-primary-800);
    border-color: var(--wk-primary-200);
    border-left-color: var(--wk-primary-600);
}

/* style.css declara .alert-error y .alert-danger como reglas idénticas y las
   vistas usan una u otra indistintamente. Se unifican aquí para que ambas
   produzcan exactamente el mismo resultado. La deduplicación en style.css
   corresponde a la fase de limpieza. */
.alert-error,
.alert-danger {
    background-color: var(--wk-danger-50);
    color: var(--wk-danger-800);
    border-color: var(--wk-danger-200);
    border-left-color: var(--wk-danger-600);
}


/* ==========================================================================
   10. ACCESIBILIDAD Y MOVIMIENTO
   ==========================================================================
   style.css solo define :focus en campos de formulario: los botones y
   enlaces no tenían indicación de foco, lo que hace la navegación por
   teclado prácticamente inviable. Además de ser lo correcto, es un
   argumento comercial ante clientes con requisitos de accesibilidad.
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--wk-primary-600);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.button:focus-visible,
.button-danger:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--wk-primary-600);
    outline-offset: 2px;
}

/* Sobre la cabecera oscura, el azul no contrasta lo suficiente. */
header a:focus-visible,
header button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Respeta la preferencia del sistema de reducir el movimiento. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   11. CHROME DE APLICACIÓN (Fase 2)
   ==========================================================================
   Barra y pie compactos para las pantallas con sesión iniciada. Sustituyen a
   una cabecera de ~177 px (~247 px cuando se mostraba la insignia de rol) por
   una franja de 56 px: se recuperan entre 120 y 190 px de contenido útil en
   todas las pantallas del producto.

   Solo se aplican cuando layouts/main.php añade la clase .wk-app al body,
   es decir, cuando $useAppChrome es verdadero. Las pantallas públicas
   conservan la cabecera anterior sin que estas reglas les afecten.
   ========================================================================== */

/* La cabecera antigua es un <header> a secas y style.css la estiliza por
   etiqueta. Al ser .wk-appbar un <header> también, hay que neutralizar esa
   herencia de forma explícita. */
.wk-app header.wk-appbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: block;
    padding: 0;
    text-align: left;
    background: var(--wk-neutral-0);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    color: var(--text);
}

.wk-appbar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Marca ------------------------------------------------------------ */
.wk-appbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--text-strong);
}

.wk-appbar__brand:hover {
    color: var(--text-strong);
}

/* Sin transform: el logo ocupa en el flujo exactamente lo que se ve.
   El original es de 1080x1054 px, así que a 32 px sobra resolución
   incluso en pantallas de alta densidad. */
.wk-appbar__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.wk-appbar__brandname {
    font-size: var(--wk-text-md);
    font-weight: 650;
    letter-spacing: -0.015em;
}

/* --- Contexto: de qué empresa o de quién es esta sesión ---------------- */
.wk-appbar__context {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
}

.wk-appbar__entity {
    font-size: var(--wk-text-base);
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Acciones --------------------------------------------------------- */
.wk-appbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Se conservan los colores de rol que ya usaba la insignia anterior
   (azul trabajador, verde azulado empresa): el usuario ya los asocia. */
.wk-appbar__role {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: var(--wk-text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.wk-appbar__role--company {
    background: #e6f4f1;
    color: #0f766e;
    border: 1px solid #bfe3dd;
}

.wk-appbar__role--employee {
    background: var(--wk-primary-50);
    color: var(--wk-primary-800);
    border: 1px solid var(--wk-primary-200);
}

.wk-appbar__logoutform {
    margin: 0;
    display: inline-flex;
}

.wk-appbar__logout {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--wk-neutral-0);
    color: var(--wk-neutral-700);
    font-size: var(--wk-text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wk-appbar__logout:hover {
    background: var(--wk-neutral-50);
    border-color: var(--wk-neutral-400);
    color: var(--wk-neutral-900);
}

/* Sobre fondo claro el anillo de foco vuelve a ser el azul del sistema.
   (worke-ui.css lo pone blanco para `header`, pensando en la cabecera oscura). */
.wk-app header.wk-appbar a:focus-visible,
.wk-app header.wk-appbar button:focus-visible {
    outline: 2px solid var(--wk-primary-600);
    outline-offset: 2px;
}

/* El contenedor pierde el margen superior: la barra ya separa del borde. */
.wk-app main {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .wk-appbar__inner {
        gap: 10px;
        padding: 0 14px;
    }

    /* En móvil manda saber DÓNDE estás, no la marca. */
    .wk-appbar__brandname,
    .wk-appbar__role {
        display: none;
    }

    .wk-appbar__context {
        padding-left: 10px;
    }

    .wk-appbar__entity {
        font-size: var(--wk-text-sm);
    }
}

/* --- Pie de aplicación ------------------------------------------------ */
.wk-app footer.wk-appfooter {
    padding: 0;
    color: var(--text-soft);
    text-align: left;
}

.wk-appfooter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 16px 24px 24px 24px;
    border-top: 1px solid var(--border);
    font-size: var(--wk-text-xs);
}

.wk-appfooter__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.wk-appfooter__inner a {
    color: var(--text-soft);
    text-decoration: none;
}

.wk-appfooter__inner a:hover {
    color: var(--primary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .wk-appfooter__inner {
        justify-content: flex-start;
        padding: 14px 14px 20px 14px;
    }
}


/* ==========================================================================
   12. PARCHES DE TRANSICIÓN
   ==========================================================================
   Bloque acotado y temporal. Corrige incoherencias que hoy viven en estilos
   inline o en bloques <style> dentro de las vistas, sin modificar las vistas
   (fuera del alcance de esta fase).

   Estos parches DESAPARECEN en la Fase 5, cuando esos estilos inline se
   retiren en origen. Se pueden borrar en bloque sin afectar al resto.
   ========================================================================== */

/* --- .tab-button / paginación de companies/view.php -------------------
   Definidos en un <style> dentro del <body>, por lo que ganan por orden de
   documento a igualdad de especificidad: hace falta el prefijo `body`.
   Usaban #007bff (azul de Bootstrap), distinto del azul del producto. */
body .tab-button {
    font-family: var(--wk-font-sans);
    border-color: var(--border-strong);
    color: var(--wk-neutral-700);
    box-shadow: var(--wk-shadow-xs);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body .tab-button:hover {
    background: var(--wk-neutral-50);
    border-color: var(--wk-neutral-400);
}

body .tab-button.active {
    background: var(--wk-primary-600);
    border-color: var(--wk-primary-600);
    color: #ffffff;
    box-shadow: var(--wk-shadow-xs);
}

/* --- Restos de la paleta de Bootstrap y Material en estilos inline -----
   Tres usos de #007bff y cinco de #c62828 en archivos canónicos. */
[style*="background:#007bff"],
[style*="background: #007bff"] {
    background: var(--wk-primary-600) !important;
    box-shadow: var(--wk-shadow-xs) !important;
}

[style*="color:#c62828"],
[style*="color: #c62828"] {
    color: var(--wk-danger-600) !important;
}

[style*="background:#c62828"],
[style*="background: #c62828"] {
    background: var(--wk-danger-600) !important;
}