:root {

  --p-tinta:              #14213D;
  --p-grafito:            #5A6472;
  --p-papel:              #FFFFFF;
  --p-archivo:            #F5F6F4;
  --p-tenue:              #F2F4F2;
  --p-hairline:           #EDEFED;

  --p-sello:              #0F7B6C;
  --p-sello-suave:        #E9F3F1;

  --p-verificado:         #2F7A3D;
  --p-verificado-suave:   #E7F1E9;

  --p-bronce:             #A9701E;
  --p-bronce-suave:       #FBF5EA;

  --p-lacre:              #A32C2C;
  --p-lacre-suave:        #F7EAEA;

  --superficie-base:          var(--p-archivo);
  --superficie-elevada:       var(--p-papel);
  --superficie-hundida:       var(--p-tenue);
  --superficie-activa:        var(--p-sello-suave);

  --texto-principal:          var(--p-tinta);
  --texto-secundario:         var(--p-grafito);
  --texto-sobre-accion:       var(--p-papel);
  --texto-accion:             var(--p-sello);

  --borde-sutil:              var(--p-hairline);
  --borde-definido:           #E3E6E3;
  --borde-enfasis:            var(--p-sello);

  --accion-primaria:          var(--p-sello);
  --accion-primaria-hover:    #0C6A5C;
  --accion-primaria-activa:   #0A5A4E;

  --confirmacion:             var(--p-verificado);
  --confirmacion-fondo:       var(--p-verificado-suave);
  --atencion:                 var(--p-bronce);
  --atencion-fondo:           var(--p-bronce-suave);
  --riesgo:                   var(--p-lacre);
  --riesgo-fondo:             var(--p-lacre-suave);

  --foco-anillo:              0 0 0 3px rgba(15, 123, 108, 0.28);

  --familia-interfaz:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --familia-datos:      'IBM Plex Mono', ui-monospace, monospace;
  --familia-normativa:  'Spectral', Georgia, serif;

  --radio-xs:        4px;
  --radio-sm:        5px;
  --radio-md:        7px;
  --radio-lg:       10px;
  --radio-xl:       12px;
  --radio-2xl:      16px;
  --radio-completo: 999px;

  --borde-hairline:  1px;
  --borde-grueso:    2px;

  --opacidad-deshabilitado: 0.4;
  --opacidad-atenuado:      0.65;

  --motion-instantaneo: 120ms;
  --motion-panel:       180ms;
  --motion-transicion:  200ms;
  --motion-flujo:       240ms;
  --motion-curva:       cubic-bezier(0.4, 0, 0.2, 1);
  /* Para lo que se mueve en el espacio —elevaciones, deslizamientos, el
     subrayado de una pestaña—. Sale rápido y frena largo, que es como se
     comporta algo con masa. La curva de arriba sigue sirviendo para los
     cambios de color, donde ese frenado se percibe como lentitud. */
  --motion-salida:      cubic-bezier(0.32, 0.72, 0, 1);
  /* Cuánto tarda el cambio de tema. Va aparte porque afecta a muchas
     superficies a la vez y conviene poder ajustarlo en un solo sitio. */
  --motion-tema:        220ms;

  --capa-base:     0;
  --capa-rail:    10;
  --capa-barra:   20;
  --capa-panel:   30;
  --capa-overlay: 40;
  --capa-dialogo: 50;
  --capa-aviso:   60;

  --elevacion-reposo:  none;
  --elevacion-tarjeta: 0 1px 2px rgba(20,33,61,0.04),
                       0 8px 20px -6px rgba(20,33,61,0.07);
  --elevacion-panel:   0 2px 4px rgba(20,33,61,0.05),
                       0 16px 32px -10px rgba(20,33,61,0.10);
  --elevacion-dialogo: 0 4px 8px rgba(20,33,61,0.06),
                       0 20px 48px -12px rgba(20,33,61,0.10);
  --elevacion-accion:  0 2px 6px -1px rgba(15,123,108,0.22);

  --velo-color:        rgba(20, 33, 61, 0.28);
}

/* =============================================================================
   MODO OSCURO
   -----------------------------------------------------------------------------
   Solo se redefine COLOR. Tamaños, radios, tipografía y movimiento son los
   mismos en los dos modos: si algo cambia de sitio al cambiar de tema, es un
   error.

   Ningún color es nuevo. El fondo se deriva de la tinta #14213D —desaturada y
   bajada de luminosidad, para que siga siendo azul marino y no gris— y el verde
   sello #0F7B6C se sube lo justo para conservar el contraste. Los semánticos
   (verificado, bronce, lacre) mantienen su matiz y ganan luz: sobre fondo
   oscuro, un bronce al 40 % de luminosidad no se distingue del texto.

   Las superficies invierten su lógica: en claro lo elevado es más blanco que el
   fondo; en oscuro es más CLARO que el fondo. Y las sombras casi no se ven, así
   que quien separa una superficie de otra es el borde.
   ========================================================================== */

:root[data-tema="oscuro"] {
  --superficie-base:          #0E1522;
  --superficie-elevada:       #151D2C;
  --superficie-hundida:       #1E2637;
  --superficie-activa:        rgba(69, 192, 169, 0.13);

  --texto-principal:          #E7EBF3;
  --texto-secundario:         #96A2B6;
  --texto-sobre-accion:       #FFFFFF;
  --texto-accion:             #45C0A9;

  --borde-sutil:              #212B3D;
  --borde-definido:           #2E3A4F;
  --borde-enfasis:            #45C0A9;

  /* El relleno del botón NO se aclara. Es contraintuitivo, pero quien tiene que
     leerse es el texto blanco de encima: sobre #12907F el contraste cae a 3,95
     y no llega al 4,5 que exige AA. Con el verde sello de siempre queda en
     5,16, y el hover en 4,67. El acento que sí hay que subir es el de TEXTO
     —enlaces, módulo activo—, que va aparte en --texto-accion. */
  --accion-primaria:          #0F7B6C;
  --accion-primaria-hover:    #10836F;
  --accion-primaria-activa:   #0E7365;

  --confirmacion:             #5FBE72;
  --confirmacion-fondo:       rgba(95, 190, 114, 0.14);
  --atencion:                 #D9A441;
  --atencion-fondo:           rgba(217, 164, 65, 0.14);
  --riesgo:                   #E07070;
  --riesgo-fondo:             rgba(224, 112, 112, 0.14);

  --foco-anillo:              0 0 0 3px rgba(69, 192, 169, 0.34);

  --elevacion-tarjeta: 0 1px 2px rgba(0,0,0,0.34),
                       0 8px 20px -8px rgba(0,0,0,0.44);
  --elevacion-panel:   0 2px 6px rgba(0,0,0,0.38),
                       0 18px 36px -12px rgba(0,0,0,0.55);
  --elevacion-dialogo: 0 6px 14px rgba(0,0,0,0.42),
                       0 28px 56px -16px rgba(0,0,0,0.62);
  --elevacion-accion:  0 2px 8px -2px rgba(18, 144, 127, 0.55);

  --velo-color:        rgba(4, 8, 15, 0.62);

  /* Las imágenes y capturas dentro de la aplicación se ven quemadas sobre
     fondo oscuro; una bajada mínima de brillo las asienta sin desvirtuarlas. */
  color-scheme: dark;
}

:root[data-tema="oscuro"] img:not([src*=".svg"]) { filter: brightness(0.94); }

[data-densidad="operacion"] {
  --espaciado-unidad: 4px;
  --espaciado-xs:     4px;
  --espaciado-sm:     8px;
  --espaciado-md:    12px;
  --espaciado-lg:    16px;
  --espaciado-xl:    24px;
  --espaciado-2xl:   32px;

  --alto-fila:       36px;
  --alto-control:    32px;
  --objetivo-tactil: 32px;

  --tipo-cuerpo:     15px;
  --tipo-interfaz:   13px;
  --tipo-etiqueta:   11px;
}

[data-densidad="personal"] {
  --espaciado-unidad: 8px;
  --espaciado-xs:     8px;
  --espaciado-sm:    12px;
  --espaciado-md:    16px;
  --espaciado-lg:    24px;
  --espaciado-xl:    32px;
  --espaciado-2xl:   40px;

  --alto-fila:       52px;
  --alto-control:    44px;
  --objetivo-tactil: 44px;

  --tipo-cuerpo:     16px;
  --tipo-interfaz:   15px;
  --tipo-etiqueta:   12px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--superficie-base);
  color: var(--texto-principal);
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-cuerpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El cambio de tema se acompaña en las superficies grandes. Sin esto es un
   parpadeo brusco de pantalla entera.

   Se aplica SOLO mientras dura el cambio, con una marca en el documento: si la
   transición viviera siempre en estas reglas, cada hover de fila arrastraría
   220 ms de fundido y la interfaz se sentiría pastosa. */
:root[data-cambiando-tema] body,
:root[data-cambiando-tema] .marco,
:root[data-cambiando-tema] .barra-contexto,
:root[data-cambiando-tema] .rail,
:root[data-cambiando-tema] .tarjeta,
:root[data-cambiando-tema] .contador,
:root[data-cambiando-tema] .panel,
:root[data-cambiando-tema] .dialogo,
:root[data-cambiando-tema] .campo__control,
:root[data-cambiando-tema] .etiqueta,
:root[data-cambiando-tema] .barra-estado,
:root[data-cambiando-tema] .tabla thead th,
:root[data-cambiando-tema] .tabla tbody td {
  transition: background-color var(--motion-tema) var(--motion-curva),
              border-color     var(--motion-tema) var(--motion-curva),
              color            var(--motion-tema) var(--motion-curva),
              box-shadow       var(--motion-tema) var(--motion-curva);
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--foco-anillo);
  border-radius: var(--radio-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.t-titulo-pagina {
  font-family: var(--familia-interfaz);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.7px;
  line-height: 1.2;
  margin: 0;
}

.t-titulo-seccion {
  font-family: var(--familia-interfaz);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin: 0;
}

.t-subtitulo {
  font-family: var(--familia-interfaz);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.4;
  margin: 0;
}

.t-cuerpo {
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-cuerpo);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}

.t-interfaz {
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-interfaz);
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.45;
}

.t-interfaz-enfasis {
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-interfaz);
  font-weight: 500;
  letter-spacing: -0.1px;
  line-height: 1.45;
}

.t-etiqueta {
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-etiqueta);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto-secundario);
}

.t-micro {
  font-family: var(--familia-interfaz);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.t-importe,
.t-importe-destacado,
.t-temporal,
.t-identificador {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.t-importe {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.t-importe-destacado {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.t-temporal {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.t-identificador {
  font-size: 11px;
  font-weight: 500;
  color: var(--texto-secundario);
}

.t-normativa {
  font-family: var(--familia-normativa);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;

}

.t-secundario   { color: var(--texto-secundario); }
.t-accion       { color: var(--texto-accion); }
.t-confirmacion { color: var(--confirmacion); }
.t-atencion     { color: var(--atencion); }
.t-riesgo       { color: var(--riesgo); }

.solo-lectura-pantalla {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.marco {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "barra  barra     barra"
    "rail   contenido panel";
  min-height: 100vh;
  background: var(--superficie-base);
}

.marco__barra     { grid-area: barra;     z-index: var(--capa-barra); }
.marco__rail      { grid-area: rail;      z-index: var(--capa-rail); }
.marco__contenido { grid-area: contenido; min-width: 0; }
.marco__panel     { grid-area: panel;     z-index: var(--capa-panel); }

.marco[data-temporalidad="historico"] {
  box-shadow: inset 0 3px 0 0 var(--atencion);
}

.contenido {
  /* Más aire lateral que vertical: la lectura se apoya en el margen izquierdo
     y 32 px pegaba el contenido al rail. */
  padding: var(--espaciado-2xl) 40px;
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xl);
  max-width: 1600px;
}

.contenido--estrecho { max-width: 760px; }
.contenido--completo { max-width: none; }

.rejilla {
  display: grid;
  gap: var(--espaciado-lg);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

.pila       { display: flex; flex-direction: column; gap: var(--espaciado-md); }
.pila--xs   { gap: var(--espaciado-xs); }
.pila--sm   { gap: var(--espaciado-sm); }
.pila--lg   { gap: var(--espaciado-lg); }
.pila--xl   { gap: var(--espaciado-xl); }

.grupo      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaciado-sm); }
.grupo--xs  { gap: var(--espaciado-xs); }
.grupo--md  { gap: var(--espaciado-md); }
.grupo--lg  { gap: var(--espaciado-lg); }

.extremos   { display: flex; align-items: center; justify-content: space-between; gap: var(--espaciado-md); }

.empuje     { margin-left: auto; }

.centrado   { display: flex; align-items: center; justify-content: center; }

@media (max-width: 1279px) {

  .rejilla { grid-template-columns: repeat(8, minmax(0, 1fr)); }

  .col-9, .col-12 { grid-column: span 8; }
  .col-6, .col-8  { grid-column: span 8; }
  .col-4, .col-5  { grid-column: span 4; }

  .marco {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "barra barra"
      "rail  contenido";
  }

  .marco__panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 380px;
    transform: translateX(100%);
    transition: transform var(--motion-panel) var(--motion-curva);
  }
  .marco__panel[data-abierto="true"] { transform: translateX(0); }

  .contenido { padding: var(--espaciado-lg) var(--espaciado-xl); }
}

@media (max-width: 767px) {

  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .col-2, .col-3, .col-4, .col-5,
  .col-6, .col-8, .col-9, .col-12 { grid-column: span 4; }

  .marco {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "barra"
      "contenido"
      "rail";
  }

  .contenido {
    padding: var(--espaciado-md) var(--espaciado-md);
    gap: var(--espaciado-lg);
  }

  .marco__panel { width: 100%; }
}

@media (min-width: 1920px) {
  .rejilla   { gap: var(--espaciado-xl); }
  .contenido { max-width: 1760px; }
}

.solo-escritorio { display: initial; }
.solo-movil      { display: none; }

@media (max-width: 767px) {
  .solo-escritorio { display: none !important; }
  .solo-movil      { display: initial; }
  /* Se usaba en la barra superior del portal —nombre de empresa, divisor— sin
     estar definida nunca: en el teléfono esos elementos seguían ocupando su
     espacio y empujaban los controles de la derecha. */
  .oculto-movil    { display: none !important; }
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaciado-sm);
  min-height: var(--alto-control);
  padding: 0 var(--espaciado-lg);
  border: var(--borde-hairline) solid transparent;
  border-radius: var(--radio-md);
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-interfaz);
  font-weight: 500;
  letter-spacing: -0.1px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* Antes solo se animaban fondo y borde. La sombra y el desplazamiento del
     pulsado son lo que hace que el botón se sienta pulsado, y no solo que
     cambie de color. */
  transition: background var(--motion-instantaneo) var(--motion-curva),
              border-color var(--motion-instantaneo) var(--motion-curva),
              box-shadow var(--motion-transicion) var(--motion-salida),
              transform 80ms var(--motion-curva);
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--accion-primaria);
  color: var(--texto-sobre-accion);
  box-shadow: var(--elevacion-accion);
}
.boton--primario:hover  { background: var(--accion-primaria-hover); }
.boton--primario:active { background: var(--accion-primaria-activa); }

.boton--secundario {
  background: var(--superficie-elevada);
  color: var(--texto-principal);
  border-color: var(--borde-definido);
}
.boton--secundario:hover { background: var(--superficie-hundida); }

.boton--sutil {
  background: transparent;
  color: var(--texto-secundario);
}
.boton--sutil:hover {
  background: var(--superficie-hundida);
  color: var(--texto-principal);
}

.boton--destructivo {
  background: var(--superficie-elevada);
  color: var(--riesgo);
  border-color: var(--riesgo);
}
.boton--destructivo:hover { background: var(--riesgo-fondo); }

.boton--solo-icono {
  padding: 0;
  width: var(--alto-control);
  min-width: var(--alto-control);
}

.boton[disabled],
.boton[aria-disabled="true"] {
  opacity: var(--opacidad-deshabilitado);
  cursor: not-allowed;
  box-shadow: none;
}

.boton[data-cargando="true"] { pointer-events: none; }
.boton[data-cargando="true"]::before {
  content: '';
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radio-completo);
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.campo { display: flex; flex-direction: column; gap: var(--espaciado-xs); }

.campo__etiqueta {
  font-size: var(--tipo-etiqueta);
  font-weight: 500;
  color: var(--texto-principal);
}

.campo__control {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  min-height: var(--alto-control);
  padding: 0 var(--espaciado-md);
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-definido);
  border-radius: var(--radio-md);
  transition: border-color var(--motion-instantaneo) var(--motion-curva);
}
.campo__control:focus-within {
  border-color: var(--borde-enfasis);
  box-shadow: var(--foco-anillo);
}

.campo__entrada {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--tipo-interfaz);
}
.campo__entrada::placeholder { color: var(--texto-secundario); }

.campo__afijo {
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
  flex-shrink: 0;
}

.campo__entrada--monetario {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.campo[data-estado="error"] .campo__control { border-color: var(--atencion); }
.campo__mensaje {
  font-size: var(--tipo-etiqueta);
  color: var(--atencion);
}

.campo[data-estado="solo-lectura"] .campo__control {
  background: var(--superficie-hundida);
  border-color: transparent;
}

.selector { position: relative; }
.selector__control { cursor: pointer; }
.selector__flecha { color: var(--texto-secundario); flex-shrink: 0; }

.opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--espaciado-sm);
  min-height: var(--objetivo-tactil);
  cursor: pointer;
  font-size: var(--tipo-interfaz);
}
.opcion__marca {
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--borde-definido);
  background: var(--superficie-elevada);
  border-radius: var(--radio-xs);
}
.opcion--radio .opcion__marca { border-radius: var(--radio-completo); }
.opcion[data-marcado="true"] .opcion__marca {
  background: var(--accion-primaria);
  border-color: var(--accion-primaria);
}

.interruptor {
  width: 36px; height: 20px;
  flex-shrink: 0;
  padding: 2px;
  background: var(--borde-definido);
  border: 0;
  border-radius: var(--radio-completo);
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva);
}
.interruptor__perilla {
  display: block;
  width: 16px; height: 16px;
  background: var(--superficie-elevada);
  border-radius: var(--radio-completo);
  transition: transform var(--motion-instantaneo) var(--motion-curva);
}
.interruptor[data-activo="true"] { background: var(--accion-primaria); }
.interruptor[data-activo="true"] .interruptor__perilla { transform: translateX(16px); }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espaciado-xs);
  padding: 3px var(--espaciado-sm);
  border-radius: var(--radio-sm);
  background: var(--superficie-hundida);
  color: var(--texto-secundario);
  font-size: var(--tipo-etiqueta);
  font-weight: 500;
  white-space: nowrap;
}
.etiqueta--confirmacion { background: var(--confirmacion-fondo); color: var(--confirmacion); }
.etiqueta--atencion     { background: var(--atencion-fondo);     color: var(--atencion); }
.etiqueta--riesgo       { background: var(--riesgo-fondo);       color: var(--riesgo); }
.etiqueta--accion       { background: var(--superficie-activa);  color: var(--texto-accion); }

.etiqueta__punto {
  width: 5px; height: 5px;
  border-radius: var(--radio-completo);
  background: currentColor;
  flex-shrink: 0;
}

.insignia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  color: var(--atencion);
  font-size: 10.5px;
  font-weight: 600;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--radio-completo);
  background: var(--texto-principal);
  color: var(--texto-sobre-accion);
  font-size: 11px;
  font-weight: 600;
}

.barra-contexto {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  height: 52px;
  padding: 0 var(--espaciado-lg);
  background: var(--superficie-elevada);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  text-decoration: none;
  color: inherit;
}
.marca__simbolo {
  width: 20px; height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.marca__nombre { font-size: 13px; font-weight: 600; letter-spacing: -0.1px; }

.divisor-vertical {
  width: 1px; height: 14px;
  background: var(--borde-sutil);
  flex-shrink: 0;
}

.migas { display: flex; align-items: center; gap: var(--espaciado-xs); }
.migas__enlace {
  font-size: 12.5px;
  color: var(--texto-secundario);
  text-decoration: none;
}
.migas__enlace:hover { color: var(--texto-principal); }
.migas__separador { color: var(--borde-definido); font-size: 12.5px; }
.migas__actual { font-size: 12.5px; color: var(--texto-principal); font-weight: 500; }

.cursor-fecha {
  display: inline-flex;
  align-items: center;
  gap: var(--espaciado-sm);
  padding: 5px var(--espaciado-md);
  border: var(--borde-hairline) solid transparent;
  border-radius: var(--radio-md);
  background: var(--superficie-hundida);
  cursor: pointer;
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.cursor-fecha[data-temporalidad="historico"] {
  background: var(--atencion-fondo);
  border-color: var(--atencion);
  color: var(--atencion);
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 212px;
  padding: var(--espaciado-md) var(--espaciado-sm);
  background: var(--superficie-elevada);
  border-right: var(--borde-hairline) solid var(--borde-sutil);
}
.rail[data-colapsado="true"] { width: 56px; }
.rail[data-colapsado="true"] .rail__texto,
.rail[data-colapsado="true"] .rail__seccion { display: none; }

.rail__seccion {
  padding: var(--espaciado-md) var(--espaciado-sm) var(--espaciado-xs);
}

.rail__elemento {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  min-height: var(--objetivo-tactil);
  padding: 0 var(--espaciado-md);
  border-radius: var(--radio-md);
  color: var(--texto-principal);
  font-size: var(--tipo-interfaz);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva),
              color var(--motion-instantaneo) var(--motion-curva);
}
.rail__elemento:hover { background: var(--superficie-hundida); }
.rail__elemento[aria-current="page"] {
  background: var(--superficie-activa);
  color: var(--texto-accion);
  font-weight: 500;
}
/* Marca del módulo activo: crece en vertical al cambiar de sección. Sin ella,
   con el fondo suave del estado activo cuesta ver dónde está uno de reojo. */
.rail__elemento::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: var(--radio-completo);
  background: var(--accion-primaria);
  transform: translateY(-50%);
  transition: height var(--motion-transicion) var(--motion-salida);
}
.rail__elemento[aria-current="page"]::before { height: 18px; }
.rail__elemento[data-permitido="false"] {
  opacity: var(--opacidad-deshabilitado);
  cursor: not-allowed;
  pointer-events: none;
}
.rail__icono { width: 16px; height: 16px; flex-shrink: 0; }
.rail__texto { flex: 1; }

.pestanas {
  display: flex;
  gap: var(--espaciado-xs);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}
.pestana {
  position: relative;
  padding: var(--espaciado-sm) var(--espaciado-md) 10px;
  border: 0;
  /* El borde transparente se conserva para que la pestaña reserve su altura;
     la marca visible es el pseudoelemento, que sí se puede animar. */
  border-bottom: var(--borde-grueso) solid transparent;
  background: transparent;
  color: var(--texto-secundario);
  font-size: var(--tipo-interfaz);
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: color var(--motion-instantaneo) var(--motion-curva);
}
/* Crece desde el centro en vez de aparecer de golpe. */
.pestana::after {
  content: '';
  position: absolute;
  left: var(--espaciado-md);
  right: var(--espaciado-md);
  bottom: calc(var(--borde-grueso) * -1);
  height: var(--borde-grueso);
  border-radius: var(--radio-completo);
  background: var(--accion-primaria);
  transform: scaleX(0);
  transition: transform var(--motion-transicion) var(--motion-salida);
}
.pestana:hover { color: var(--texto-principal); }
.pestana[aria-selected="true"] {
  color: var(--texto-principal);
  font-weight: 500;
}
.pestana[aria-selected="true"]::after { transform: scaleX(1); }

.tarjeta {
  background: var(--superficie-elevada);
  /* Filo además de sombra. En claro afina el contorno; en oscuro es lo único
     que separa la tarjeta del fondo, porque ahí las sombras no se ven. */
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: var(--radio-xl);
  box-shadow: var(--elevacion-tarjeta);
  overflow: hidden;
}
.tarjeta__cabecera {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  padding: var(--espaciado-lg) var(--espaciado-xl);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}
.tarjeta__cuerpo { padding: var(--espaciado-lg) var(--espaciado-xl); }
.tarjeta__pie {
  padding: var(--espaciado-md) var(--espaciado-xl);
  border-top: var(--borde-hairline) solid var(--borde-sutil);
  background: var(--superficie-base);
}

.tabla { width: 100%; border-collapse: collapse; }
.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--espaciado-sm) var(--espaciado-md);
  background: var(--superficie-elevada);
  border-bottom: var(--borde-hairline) solid var(--borde-definido);
  text-align: left;
  font-size: var(--tipo-etiqueta);
  font-weight: 500;
  color: var(--texto-secundario);
  white-space: nowrap;
}
.tabla tbody td {
  height: var(--alto-fila);
  padding: var(--espaciado-sm) var(--espaciado-md);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
  font-size: var(--tipo-interfaz);
  vertical-align: middle;
}
.tabla tbody tr:hover td { background: var(--superficie-hundida); }
.tabla tbody tr[aria-selected="true"] td { background: var(--superficie-activa); }

.tabla .celda-importe,
.tabla .celda-temporal {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.tabla .celda-importe { font-weight: 600; letter-spacing: -0.3px; }
.tabla th.celda-importe, .tabla th.celda-temporal { text-align: right; }

.fila__acciones { opacity: 0; transition: opacity var(--motion-instantaneo); }
.tabla tbody tr:hover .fila__acciones,
.tabla tbody tr:focus-within .fila__acciones { opacity: 1; }

.barra-herramientas {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-md) var(--espaciado-xl);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}
.barra-acciones {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  flex-wrap: wrap;
}

.velo {
  position: fixed;
  inset: 0;
  z-index: var(--capa-overlay);
  background: var(--velo-color);
  display: none;
}
.velo[data-abierto="true"] { display: block; }

.dialogo {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--capa-dialogo);
  width: min(480px, calc(100vw - 32px));
  background: var(--superficie-elevada);
  border-radius: var(--radio-2xl);
  box-shadow: var(--elevacion-dialogo);
  display: none;
}
.dialogo[data-abierto="true"] { display: block; }
.dialogo__cuerpo { padding: var(--espaciado-xl); }
.dialogo__pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-md) var(--espaciado-xl) var(--espaciado-xl);
}

.dialogo[data-tipo="irreversible"] .dialogo__cuerpo {
  border-top: var(--borde-grueso) solid var(--atencion);
  border-radius: var(--radio-2xl) var(--radio-2xl) 0 0;
}

.panel {
  display: flex;
  flex-direction: column;
  width: 372px;
  background: var(--superficie-elevada);
  border-left: var(--borde-hairline) solid var(--borde-sutil);
}
.panel__cabecera {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-lg) var(--espaciado-xl);
}
.panel__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--espaciado-xl) var(--espaciado-xl);
}

.aviso-emergente {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  padding: var(--espaciado-md) var(--espaciado-lg);
  background: var(--texto-principal);
  color: var(--texto-sobre-accion);
  border-radius: var(--radio-lg);
  box-shadow: var(--elevacion-dialogo);
  font-size: var(--tipo-interfaz);
}

.info-contextual {
  padding: 6px var(--espaciado-sm);
  background: var(--texto-principal);
  color: var(--texto-sobre-accion);
  border-radius: var(--radio-sm);
  font-size: var(--tipo-etiqueta);
}

.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaciado-md);
  padding: var(--espaciado-2xl);
  text-align: center;
}
.estado__titulo { font-size: var(--tipo-cuerpo); font-weight: 500; }
.estado__detalle { font-size: var(--tipo-interfaz); color: var(--texto-secundario); max-width: 42ch; }

.estado--vacio .estado__titulo { color: var(--texto-principal); }

.barra-estado {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-sm) var(--espaciado-md);
  border-radius: var(--radio-md);
  font-size: var(--tipo-etiqueta);
}
.barra-estado--atencion     { background: var(--atencion-fondo);     color: var(--atencion); }
.barra-estado--riesgo       { background: var(--riesgo-fondo);       color: var(--riesgo); }
.barra-estado--confirmacion { background: var(--confirmacion-fondo); color: var(--confirmacion); }
.barra-estado--informacion  { background: var(--superficie-activa);  color: var(--texto-accion); }

.esqueleto {
  background: linear-gradient(90deg,
    var(--superficie-hundida) 25%,
    var(--borde-sutil) 37%,
    var(--superficie-hundida) 63%);
  background-size: 400% 100%;
  border-radius: var(--radio-sm);
  animation: esqueleto-pulso 1400ms ease infinite;
}
@keyframes esqueleto-pulso { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.esqueleto--linea   { height: 12px; }
.esqueleto--titulo  { height: 20px; width: 40%; }
.esqueleto--bloque  { height: 72px; }

.estado--sin-conexion { color: var(--atencion); }

.banda-cerrado {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-sm) var(--espaciado-lg);
  background: var(--superficie-hundida);
  border-left: var(--borde-grueso) solid var(--texto-secundario);
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
}

.encabezado-colaborador { display: flex; flex-direction: column; gap: var(--espaciado-md); }

.encabezado-colaborador__identidad {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  flex-wrap: wrap;
}

.encabezado-colaborador__atributos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--espaciado-xs) var(--espaciado-lg);
  align-items: baseline;
}
.encabezado-colaborador__clave {
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
}
.encabezado-colaborador__valor { font-size: var(--tipo-interfaz); }

.encabezado-colaborador__valor--plaza { font-weight: 500; }

.modalidad-vinculo {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-md);
  background: var(--superficie-hundida);
  border-radius: var(--radio-lg);
}
.modalidad-vinculo__fila { display: flex; align-items: center; gap: var(--espaciado-sm); }
.modalidad-vinculo__clave {
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
  min-width: 132px;
}

.fundamento { display: flex; flex-direction: column; gap: var(--espaciado-lg); }

.fundamento__regla {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xs);
  padding-left: var(--espaciado-md);
  border-left: var(--borde-grueso) solid var(--accion-primaria);
}
.fundamento__identificador {
  font-family: var(--familia-datos);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.fundamento__codigo {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--espaciado-sm);
  border-radius: var(--radio-sm);
  background: var(--superficie-activa);
  color: var(--texto-accion);
  font-family: var(--familia-datos);
  font-size: 11px;
  font-weight: 500;
}

.fundamento__traza { display: flex; flex-direction: column; }
.fundamento__paso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaciado-md);
  padding: var(--espaciado-sm) 0;
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}
.fundamento__paso:last-child { border-bottom: 0; }
.fundamento__paso-clave { font-size: 12px; color: var(--texto-secundario); }
.fundamento__paso-valor {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: -0.2px;
}
.fundamento__paso--resultado .fundamento__paso-valor {
  font-weight: 600;
  color: var(--texto-accion);
}

.fundamento__ampliacion { display: none; }
.fundamento__ampliacion[data-advisor="activo"] { display: block; }

.flujo { display: flex; flex-direction: column; gap: var(--espaciado-md); }

.flujo__pasos {
  display: flex;
  align-items: center;
  gap: var(--espaciado-xs);
  flex-wrap: wrap;
}
.flujo__paso {
  display: flex;
  align-items: center;
  gap: var(--espaciado-xs);
  padding: 4px var(--espaciado-sm);
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  color: var(--texto-secundario);
  font-size: var(--tipo-etiqueta);
  white-space: nowrap;
}
.flujo__paso[data-estado="completado"] {
  background: var(--confirmacion-fondo);
  color: var(--confirmacion);
}
.flujo__paso[data-estado="actual"] {
  background: var(--superficie-activa);
  color: var(--texto-accion);
  font-weight: 600;
}
.flujo__conector { width: 12px; height: 1px; background: var(--borde-definido); }

.cronologia { display: flex; flex-direction: column; }
.cronologia__hito {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--espaciado-md);
  padding-bottom: var(--espaciado-lg);
}
.cronologia__marca {
  position: relative;
  display: flex;
  justify-content: center;
}
.cronologia__punto {
  width: 9px; height: 9px;
  margin-top: 5px;
  border-radius: var(--radio-completo);
  background: var(--accion-primaria);
  z-index: 1;
}
.cronologia__linea {
  position: absolute;
  top: 14px; bottom: -12px;
  width: 1px;
  background: var(--borde-definido);
}
.cronologia__hito:last-child .cronologia__linea { display: none; }

.aviso-permiso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaciado-md);
  padding: var(--espaciado-md) var(--espaciado-lg);
  background: var(--superficie-hundida);
  border-radius: var(--radio-lg);
  font-size: var(--tipo-interfaz);
  color: var(--texto-secundario);
}

.consentimiento {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md);
  padding: var(--espaciado-lg);
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-definido);
  border-radius: var(--radio-xl);
}
.consentimiento__registro {
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
}

.fila-marca {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  padding: var(--espaciado-md) var(--espaciado-lg);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}
.fila-marca:last-child { border-bottom: 0; }
.fila-marca__punto {
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: var(--radio-completo);
  background: var(--accion-primaria);
}
.fila-marca__detalle { flex: 1; min-width: 0; }
.fila-marca__hora {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.workspace__saludo {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xs);
}

.contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--espaciado-md);
}

.contador {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-lg);
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: var(--radio-xl);
  box-shadow: var(--elevacion-tarjeta);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--motion-transicion) var(--motion-curva),
              box-shadow var(--motion-transicion) var(--motion-salida),
              transform var(--motion-transicion) var(--motion-salida);
}
.contador:hover {
  border-color: var(--borde-definido);
  box-shadow: var(--elevacion-panel);
  transform: translateY(-2px);
}

.contador__encabezado {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  color: var(--texto-secundario);
}

.contador__cifra {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1;
}

.contador__accion {
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
}

.contador[data-urgencia="atencion"] .contador__cifra { color: var(--atencion); }
.contador[data-urgencia="riesgo"]   .contador__cifra { color: var(--riesgo); }

.pendiente {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  padding: var(--espaciado-md) var(--espaciado-xl);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva);
}
.pendiente:last-child { border-bottom: 0; }
.pendiente:hover { background: var(--superficie-hundida); }

.pendiente__marca {
  width: 3px;
  align-self: stretch;
  border-radius: var(--radio-completo);
  background: var(--accion-primaria);
  flex-shrink: 0;
}
.pendiente__marca--atencion { background: var(--atencion); }

.pendiente__detalle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pendiente__titulo  { font-size: var(--tipo-interfaz); font-weight: 500; }
.pendiente__contexto{ font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }
.pendiente__meta    { display: flex; align-items: center; gap: var(--espaciado-sm); flex-shrink: 0; }

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaciado-md);
  padding: var(--espaciado-md) var(--espaciado-xl);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}
.aviso:last-child { border-bottom: 0; }
.aviso__detalle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aviso__titulo  { font-size: var(--tipo-interfaz); font-weight: 500; }
.aviso__origen  { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }

.actividad {
  display: flex;
  gap: var(--espaciado-md);
  padding: var(--espaciado-md) var(--espaciado-xl);
}
.actividad__detalle { flex: 1; min-width: 0; }
.actividad__texto   { font-size: var(--tipo-interfaz); }
.actividad__meta    { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }

.accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--espaciado-sm);
}

.acceso {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  min-height: var(--objetivo-tactil);
  padding: var(--espaciado-md);
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-definido);
  border-radius: var(--radio-lg);
  color: inherit;
  text-decoration: none;
  font-size: var(--tipo-interfaz);
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva);
}
.acceso:hover { background: var(--superficie-hundida); }
.acceso__icono { color: var(--texto-secundario); flex-shrink: 0; }

.workspace__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--espaciado-xl);
  align-items: start;
}

@media (max-width: 1279px) {
  .workspace__columnas { grid-template-columns: minmax(0, 1fr); }
}

.pendiente-especificacion {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-xl);
  background: var(--superficie-hundida);
  border: 1px dashed var(--borde-definido);
  border-radius: var(--radio-xl);
  color: var(--texto-secundario);
}
.pendiente-especificacion__referencia {
  font-family: var(--familia-datos);
  font-size: var(--tipo-etiqueta);
}

.organigrama {
  padding: var(--espaciado-lg);
  overflow-x: auto;
}
.organigrama__rama {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.organigrama__nodo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  min-width: 168px;
  padding: var(--espaciado-md);
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: var(--radio-md);
  position: relative;
}
.organigrama__nodo[data-estado="vacante"] {
  border-style: dashed;
  opacity: .75;
}
.organigrama__hijos {
  display: flex;
  gap: var(--espaciado-md);
  margin-top: var(--espaciado-lg);
  position: relative;
}

.organigrama__hijos::before {
  content: "";
  position: absolute;
  top: calc(var(--espaciado-lg) * -1);
  left: 50%;
  width: var(--borde-hairline);
  height: var(--espaciado-lg);
  background: var(--borde-sutil);
}
.organigrama__hijos > .organigrama__rama::before {
  content: "";
  position: absolute;
  top: calc(var(--espaciado-md) * -1);
  width: var(--borde-hairline);
  height: var(--espaciado-md);
  background: var(--borde-sutil);
}
.organigrama__hijos > .organigrama__rama {
  position: relative;
}

.rail__grupo { display: block; }
.rail__grupo > summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.rail__grupo > summary::-webkit-details-marker { display: none; }
.rail__grupo > summary::marker { content: ""; }
.rail__resumen { position: relative; }
.rail__resumen::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.4px solid var(--texto-secundario);
  border-bottom: 1.4px solid var(--texto-secundario);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--motion-instantaneo) var(--motion-curva);
  pointer-events: none;
}
.rail__grupo[open] > .rail__resumen::after {
  transform: translateY(-30%) rotate(-135deg);
}
.rail__subenlace {
  padding: 6px 10px;
  border-radius: var(--radio-sm, 4px);
  font-size: 13px;
  color: var(--texto-secundario);
}
.rail__subenlace:hover { background: var(--superficie-hundida); color: var(--texto-principal); }
.rail__subenlace[aria-current="page"] {
  color: var(--texto-accion);
  background: var(--superficie-hundida);
  font-weight: 500;
}


/* --- Matriz de horarios · hoja de cálculo ---------------------------------
   Dos columnas por día (inicio y fin). La primera columna queda fija: con una
   quincena son treinta columnas de datos y al desplazarse se pierde de vista
   de quién es cada fila. */
.matriz__contenedor-maximo {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  background: var(--superficie-base);
  padding: var(--espaciado-md);
  -webkit-overflow-scrolling: touch;
}

.tabla-excel-horarios {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* Ancho por contenido, no fijo: con table-layout fixed las columnas se
     comprimen hasta ocultar los campos cuando el rango es largo. */
  min-width: max-content;
}

.tabla-excel-horarios th,
.tabla-excel-horarios td {
  /* Compacto a propósito: cada día ocupa el mínimo espacio legible para que
     quepan varios sin desplazarse. Un formulario normal usa el espaciado
     estándar; una hoja de cálculo necesita densidad, no aire. */
  padding: 6px 4px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--borde-definido, #e0e0dd);
  border-right: 1px solid var(--borde-definido, #e0e0dd);
  white-space: nowrap;
}

.tabla-excel-horarios thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--accion-primaria);
  color: var(--texto-sobre-accion);
  font-weight: 600;
  font-size: 13px;
}

.tabla-excel-horarios thead th.matriz__sub-header {
  top: 38px;
  background: var(--accion-primaria-hover);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--espaciado-xs);
}

.tabla-excel-horarios thead th.matriz__descanso-cab {
  background: var(--accion-primaria-activa);
}

.columna-fija-excel {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 180px;
  min-width: 180px;
  background: var(--superficie-elevada, #fff) !important;
  text-align: left !important;
  box-shadow: 2px 0 4px rgba(0, 0, 0, .04);
}

.tabla-excel-horarios thead .columna-fija-excel {
  z-index: 3;
  background: var(--accion-primaria-hover) !important;
  color: var(--texto-sobre-accion);
}

.tabla-excel-horarios tbody tr:hover td:not(.columna-fija-excel) {
  background: var(--superficie-hundida, #f5f6f4);
}

.input-excel-tiempo {
  width: 100%;
  max-width: 68px;
  height: 32px;
  font-size: 13px;
  padding: 0 2px;
  text-align: center;
  border: 1px solid var(--borde-definido, #e0e0dd);
  border-radius: var(--radio-sm, 4px);
  background: var(--superficie-elevada, #fff);
  font-family: var(--familia-datos, inherit);
  color: inherit;
}

.input-excel-tiempo:focus {
  border-color: var(--borde-enfasis);
  outline: none;
  box-shadow: var(--foco-anillo, 0 0 0 3px rgba(15, 123, 108, .18));
}

/* Un turno a medias se marca: guardar sólo una de las dos horas deja el día
   sin jornada calculable. */
.input-excel-tiempo--incompleto {
  border-color: var(--atencion, #b45309);
  background: var(--atencion-fondo);
}

.celda-totales-excel {
  background: var(--superficie-hundida, #f5f6f4);
  font-family: var(--familia-datos, inherit);
  font-weight: 600;
  font-size: 13px;
}

.matriz__dia-descanso { background: var(--superficie-hundida, #f5f6f4); }

/* Casilla "Libre" dentro de la matriz de horarios: centrada y del tamaño
   del resto de la fila, sin el ancho fijo de un input de hora. */
.tabla-excel-horarios td input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accion-primaria);
}

/* =============================================================================
   CONMUTADOR DE TEMA
   -----------------------------------------------------------------------------
   Segmentado en vez de interruptor: dice en qué modo está sin obligar a
   interpretar un icono solitario. La pastilla se desliza entre las dos mitades,
   así que el cambio se lee como un movimiento y no como un parpadeo.
   ========================================================================== */

.conmutador-tema {
  position: relative;
  display: flex;
  flex-shrink: 0;
  padding: 2px;
  background: var(--superficie-hundida);
  border-radius: var(--radio-completo);
}

.conmutador-tema__pastilla {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 24px;
  border-radius: var(--radio-completo);
  background: var(--superficie-elevada);
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.10);
  transition: transform var(--motion-transicion) var(--motion-salida);
}
:root[data-tema="oscuro"] .conmutador-tema__pastilla { transform: translateX(28px); }

.conmutador-tema__opcion {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: color var(--motion-instantaneo) var(--motion-curva);
}
.conmutador-tema__opcion:hover { color: var(--texto-principal); }
.conmutador-tema__opcion[aria-pressed="true"] { color: var(--texto-accion); }

/* En pantallas estrechas la barra ya va justa de sitio; el conmutador cabe,
   pero conviene que no compita con la marca. */
@media (max-width: 480px) {
  .conmutador-tema { margin-left: auto; }
}

/* =============================================================================
   REDISEÑO DE CONFIGURACIÓN Y ESTADÍSTICAS
   -----------------------------------------------------------------------------
   Todo lo de aquí usa los tokens de arriba: no hay un solo color nuevo, y por
   eso el modo oscuro funciona sin escribir una regla más.

   Tres decisiones de fondo:

     · Menos cajas. Una sección es una lámina con filetes dentro, no tarjetas
       anidadas. La jerarquía la da el espacio, no el marco.
     · El segmentado sustituye a las pestañas subrayadas donde las opciones son
       VISTAS del mismo objeto. Una pestaña sugiere navegación; un segmentado,
       un filtro sobre lo mismo.
     · Las cifras pesan por tamaño y por tipografía tabular, no por tener un
       recuadro alrededor.
   ========================================================================== */

/* --- Segmentado ------------------------------------------------------------
   La pastilla se desliza con la anchura de la opción activa, que el JS calcula
   MIDIENDO el botón. Medirlo es más fiable que llevar una tabla de anchos: el
   texto cambia con el número de elementos que muestre cada rótulo. */
.segmentado {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  background: var(--superficie-hundida);
  border-radius: var(--radio-lg);
}

.segmentado__pastilla {
  position: absolute;
  top: 3px; left: 3px;
  height: 34px;
  border-radius: var(--radio-md);
  background: var(--superficie-elevada);
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.10);
  transition: transform var(--motion-transicion) var(--motion-salida),
              width     var(--motion-transicion) var(--motion-salida);
}

.segmentado__opcion {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--espaciado-sm);
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radio-md);
  background: transparent;
  color: var(--texto-secundario);
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-interfaz);
  font-weight: 500;
  letter-spacing: -0.1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-instantaneo) var(--motion-curva);
}
.segmentado__opcion:hover { color: var(--texto-principal); }
.segmentado__opcion[aria-selected="true"] { color: var(--texto-principal); }

.conteo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radio-completo);
  background: var(--superficie-elevada);
  color: var(--texto-secundario);
  font-family: var(--familia-datos);
  font-size: 11px;
  font-weight: 500;
}
.segmentado__opcion[aria-selected="true"] .conteo {
  background: var(--superficie-activa);
  color: var(--texto-accion);
}

/* --- Lámina · sección sin tarjetas anidadas -------------------------------- */
.lamina {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 14px;
  box-shadow: var(--elevacion-tarjeta);
  overflow: hidden;
}

.lamina__barra {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
  padding: 14px var(--espaciado-xl);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
  flex-shrink: 0;
}
.lamina__titulo { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
.lamina__nota   { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }
.lamina__cuerpo { flex: 1; overflow-y: auto; min-height: 0; }

/* --- Cifras sin caja -------------------------------------------------------
   Reemplaza a `.contadores` en las pantallas de análisis. Los del panel siguen
   existiendo: allí son ENLACES y la caja marca que se pueden pulsar. Aquí no
   llevan a ningún lado. */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 14px;
  box-shadow: var(--elevacion-tarjeta);
  overflow: hidden;
}

.cifra {
  padding: var(--espaciado-lg) var(--espaciado-xl);
  border-left: var(--borde-hairline) solid var(--borde-sutil);
}
.cifra:first-child { border-left: 0; }

.cifra__rotulo {
  font-size: var(--tipo-etiqueta);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.cifra__valor {
  display: block;
  margin-top: 10px;
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1;
}
.cifra__nota {
  display: block;
  margin-top: var(--espaciado-sm);
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
}
.cifra[data-urgencia="atencion"] .cifra__valor { color: var(--atencion); }
.cifra[data-urgencia="riesgo"]   .cifra__valor { color: var(--riesgo); }

/* --- Barras proporcionales -------------------------------------------------
   El ancho comunica la diferencia antes de que se lea la cifra. Sustituye a la
   columna de montos sola cuando lo que importa es el reparto. */
.barra-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--espaciado-lg);
  align-items: center;
  padding: 10px var(--espaciado-xl);
  transition: background var(--motion-instantaneo) var(--motion-curva);
}
.barra-fila:hover { background: var(--superficie-hundida); }
.barra-fila__nombre { font-size: var(--tipo-interfaz); }
.barra-fila__valor {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: var(--tipo-interfaz);
  font-weight: 600;
  letter-spacing: -0.3px;
}
.barra-fila__pista {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  overflow: hidden;
}
.barra-fila__relleno {
  display: block;
  height: 100%;
  border-radius: var(--radio-completo);
  background: var(--accion-primaria);
  transition: width var(--motion-flujo) var(--motion-salida);
}

/* --- Parámetros legales ----------------------------------------------------
   Diecisiete reglas en lista plana no se recorren. Se agrupan por materia con
   un encabezado que es texto, no otra tarjeta. */
.familia {
  padding: var(--espaciado-lg) var(--espaciado-xl) var(--espaciado-sm);
  border-top: var(--borde-hairline) solid var(--borde-sutil);
  font-size: var(--tipo-etiqueta);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.familia:first-child { border-top: 0; }

.regla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 128px 96px;
  align-items: center;
  gap: 4px var(--espaciado-lg);
  padding: 14px var(--espaciado-xl);
  border-top: var(--borde-hairline) solid var(--borde-sutil);
  transition: background var(--motion-instantaneo) var(--motion-curva);
}
.regla:hover { background: var(--superficie-hundida); }

.regla__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.regla__nombre { font-size: 14px; font-weight: 500; }
.regla__fundamento { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }
.regla__valor {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
  text-align: right;
  white-space: nowrap;
}
.regla__desde {
  font-size: var(--tipo-etiqueta);
  color: var(--texto-secundario);
  text-align: right;
  white-space: nowrap;
}
.regla__accion { text-align: right; opacity: 0; transition: opacity var(--motion-instantaneo); }
.regla:hover .regla__accion,
.regla:focus-within .regla__accion { opacity: 1; }

.regla[data-editando="true"] { background: var(--superficie-hundida); }
.regla[data-editando="true"] .regla__accion { opacity: 1; }
.regla[data-editando="true"] .regla__valor { color: var(--texto-secundario); text-decoration: line-through; }

/* El valor nuevo y la fecha desde la que rige van JUNTOS. Separarlos deja
   cambiar un número sin decir cuándo empieza a valer, que es el error que
   rompe el cálculo de una planilla anterior. */
.edicion {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--espaciado-md);
}
.edicion__campos { display: flex; align-items: flex-end; gap: var(--espaciado-md); flex-wrap: wrap; }
.edicion__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaciado-sm);
  margin: 0;
  padding: 10px var(--espaciado-md);
  border-radius: var(--radio-md);
  background: var(--atencion-fondo);
  color: var(--atencion);
  font-size: 12px;
  line-height: 1.45;
}
.edicion__aviso svg { flex-shrink: 0; margin-top: 1px; }

.campo-inline { display: flex; flex-direction: column; gap: 5px; }
.campo-inline__rotulo { font-size: var(--tipo-etiqueta); font-weight: 500; color: var(--texto-secundario); }

/* La cesantía no es un número: es una escala. Se muestra como tal. */
.escala {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 1px;
  margin-top: var(--espaciado-md);
  border-radius: var(--radio-md);
  background: var(--borde-sutil);
  overflow: hidden;
}
.escala__tramo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--superficie-elevada);
}
.escala__anio { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }
.escala__dias {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

/* --- Formulario largo con pie fijo ----------------------------------------
   Sin acción a la vista hay que bajar hasta el final para saber si queda algo
   por guardar. El pie no se mueve. */
.forma__pie {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  padding: var(--espaciado-md) var(--espaciado-xl);
  border-top: var(--borde-hairline) solid var(--borde-sutil);
  background: var(--superficie-elevada);
  flex-shrink: 0;
}
.forma__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaciado-sm);
  font-size: 12.5px;
  color: var(--texto-secundario);
}

/* Rótulo a la izquierda, controles a la derecha: el patrón de ajustes que se
   recorre en vertical sin releer. */
.grupo-ajuste {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--espaciado-lg) 40px;
  padding: 22px var(--espaciado-xl);
  border-bottom: var(--borde-hairline) solid var(--borde-sutil);
}
.grupo-ajuste:last-child { border-bottom: 0; }
.grupo-ajuste__rotulo { font-size: var(--tipo-interfaz); font-weight: 500; }
.grupo-ajuste__ayuda {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--texto-secundario);
}
.grupo-ajuste__campos { display: flex; flex-direction: column; gap: var(--espaciado-md); min-width: 0; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaciado-md); }

/* Vista previa de un dato que va a un archivo posicional: el largo es parte
   del dato y se ve al escribir, no al declarar. */
.previa {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--espaciado-md) 14px;
  border-radius: var(--radio-lg);
  background: var(--superficie-hundida);
}
.previa__rotulo {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.previa__linea {
  font-family: var(--familia-datos);
  font-size: 12px;
  letter-spacing: -0.2px;
  word-break: break-all;
}
.previa__medida { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }

@media (max-width: 900px) {
  .grupo-ajuste { grid-template-columns: 1fr; gap: var(--espaciado-md); }
  .trio { grid-template-columns: 1fr; }
  .regla { grid-template-columns: minmax(0, 1fr) auto; }
  .regla__desde { grid-column: 2; }
  .regla__accion { grid-column: 2; opacity: 1; }
}

/* =============================================================================
   PORTAL DE COLABORADORES · MÓVIL PRIMERO
   -----------------------------------------------------------------------------
   El portal se abre desde un teléfono: se marca de pie, se revisa la colilla en
   el bus. Hasta ahora no se podía usar ahí.

   EL FALLO QUE ESTO CORRIGE
   El marco mueve el rail a la fila de abajo en móvil —lo dice
   `grid-template-areas: "barra" "contenido" "rail"`— pero NADIE escribió la
   regla que lo convierta en barra. `.rail` seguía siendo
   `flex-direction: column; width: 212px`, así que en un teléfono aparecía una
   columna de 212 px apilada al pie. Es la primera regla de este bloque.

   Todo usa los tokens de arriba: ni un color nuevo, y el modo oscuro funciona
   sin escribir nada más.
   ========================================================================== */

/* --- Barra inferior y hoja «Más» · ocultas en escritorio -------------------- */
.nav-inferior,
.hoja-mas,
.hoja-velo { display: none; }

@media (max-width: 767px) {

  /* El rail lateral no existe en un teléfono: lo reemplaza la barra de abajo. */
  .rail { display: none; }

  /* La barra va FIJA al borde inferior, no en el flujo. En el flujo quedaba
     por debajo del contenido y había que hacer scroll hasta el final para
     navegar; en el Marcador ya caía fuera de la pantalla. */
  .nav-inferior {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--capa-barra);
    align-items: stretch;
    background: var(--superficie-elevada);
    border-top: var(--borde-hairline) solid var(--borde-sutil);
    /* Zona segura del iPhone. Con el valor crudo, no con reserva de `env()`:
       en Android y escritorio la zona segura ES cero —no está ausente— y una
       reserva nunca se aplicaría. */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .nav-inferior__celda {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 2px 6px;
    position: relative;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--texto-secundario);
    font-family: var(--familia-interfaz);
    font-size: 10.5px;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-inferior__celda[aria-current="page"] { color: var(--texto-accion); }

  /* La marca del destino activo: un filete corto arriba de la celda. En una
     barra horizontal, un filete lateral no se lee como «estoy aquí». */
  .nav-inferior__celda::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--texto-accion);
    transform: translateX(-50%);
    transition: width var(--motion-transicion) var(--motion-salida);
  }
  .nav-inferior__celda[aria-current="page"]::before { width: 22px; }

  .nav-inferior__icono { width: 22px; height: 22px; flex-shrink: 0; }
  .nav-inferior__texto {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* El contenido reserva el alto de la barra para que nada quede debajo. */
  .marco__contenido { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* --- Hoja «Más» ---------------------------------------------------------- */
  .hoja-velo--visible {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--capa-dialogo);
    background: var(--velo-color);
    animation: velo-entra var(--motion-panel) var(--motion-curva);
  }

  .hoja-mas--abierta {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--capa-aviso);
    background: var(--superficie-elevada);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 6px 12px calc(14px + env(safe-area-inset-bottom));
    box-shadow: var(--elevacion-dialogo);
    animation: hoja-sube var(--motion-panel) var(--motion-salida);
  }
  .hoja-mas__asa {
    width: 40px; height: 4px;
    border-radius: var(--radio-completo);
    background: var(--borde-definido);
    margin: 4px auto 8px;
  }
  .hoja-mas__grupo { display: flex; flex-direction: column; }
  .hoja-mas__rotulo {
    font-size: var(--tipo-etiqueta);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--texto-secundario);
    padding: 8px 12px 2px;
  }
  .hoja-mas__enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--texto-principal);
    font-family: var(--familia-interfaz);
    font-size: 15px;
    text-decoration: none;
  }
  .hoja-mas__enlace:active { background: var(--superficie-hundida); }
  .hoja-mas__enlace[aria-current="page"] { color: var(--texto-accion); font-weight: 600; }
  .hoja-mas__icono { width: 20px; height: 20px; flex-shrink: 0; color: var(--texto-secundario); }
  .hoja-mas__enlace[aria-current="page"] .hoja-mas__icono { color: var(--texto-accion); }
  .hoja-mas__vineta {
    width: 6px; height: 6px;
    margin: 0 7px;
    border-radius: var(--radio-completo);
    background: var(--borde-definido);
    flex-shrink: 0;
  }
}

@keyframes hoja-sube { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }

/* --- Acción principal de una pantalla táctil --------------------------------
   64 px de alto y ancho completo. Es lo que la gente abre la aplicación para
   hacer, y se pulsa con el pulgar, de pie, a veces con prisa. */
.accion-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 0 24px;
  border: 0;
  border-radius: 18px;
  background: var(--accion-primaria);
  color: var(--texto-sobre-accion);
  box-shadow: var(--elevacion-accion);
  font-family: var(--familia-interfaz);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: transform 90ms var(--motion-curva),
              box-shadow var(--motion-transicion) var(--motion-salida),
              background var(--motion-instantaneo) var(--motion-curva);
}
.accion-grande:hover  { background: var(--accion-primaria-hover); }
.accion-grande:active { transform: scale(0.985); }
.accion-grande[disabled] {
  opacity: var(--opacidad-deshabilitado);
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Estado de la jornada ---------------------------------------------------
   Lo primero que alguien quiere saber al abrir el portal: si está dentro y
   desde cuándo. La hora es el elemento dominante de la pantalla. */
.estado-jornada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px 24px;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 20px;
  box-shadow: var(--elevacion-tarjeta);
}
.estado-jornada__reloj {
  margin-top: 6px;
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -2.6px;
  line-height: 1;
}
.estado-jornada__pie { font-size: 13px; color: var(--texto-secundario); text-align: center; }

.pastilla-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  color: var(--texto-secundario);
  font-size: 12.5px;
  font-weight: 500;
}
.pastilla-estado--dentro { background: var(--confirmacion-fondo); color: var(--confirmacion); }
.pastilla-estado--fuera  { background: var(--superficie-hundida);  color: var(--texto-secundario); }
.pastilla-estado__punto {
  width: 6px; height: 6px;
  border-radius: var(--radio-completo);
  background: currentColor;
  flex-shrink: 0;
}

/* --- Fichas de filtro -------------------------------------------------------
   En un teléfono un desplegable esconde el estado actual. Estas dicen a la vez
   qué hay y qué se está viendo, y se pulsan con el pulgar. */
.fichas {
  display: flex;
  gap: var(--espaciado-sm);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 15px;
  border: var(--borde-hairline) solid var(--borde-definido);
  border-radius: var(--radio-completo);
  background: var(--superficie-elevada);
  color: var(--texto-secundario);
  font-family: var(--familia-interfaz);
  font-size: var(--tipo-interfaz);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva),
              color var(--motion-instantaneo) var(--motion-curva),
              border-color var(--motion-instantaneo) var(--motion-curva);
}
.ficha[aria-pressed="true"] {
  background: var(--superficie-activa);
  color: var(--texto-accion);
  border-color: transparent;
}

/* --- Un día por tarjeta -----------------------------------------------------
   La tabla de seis columnas —fecha, entrada, almuerzo, regreso, salida, horas—
   no cabe en 390 px. Arriba el día y su total; abajo las cuatro marcas. */
.dia {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md);
  padding: 14px 16px;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 16px;
  box-shadow: var(--elevacion-tarjeta);
}
.dia__cima { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dia__fecha { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.dia__horas {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.tiempos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espaciado-sm); }
.tiempo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: var(--radio-lg);
  background: var(--superficie-hundida);
}
.tiempo__que {
  font-size: 9.5px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--texto-secundario);
  text-align: center;
}
.tiempo__hora {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
/* Una marca que falta se ve dentro de su propia casilla: así se sabe de un
   vistazo cuál falta y de qué día, sin leer la fila entera. */
.tiempo--falta { background: var(--atencion-fondo); }
.tiempo--falta .tiempo__que,
.tiempo--falta .tiempo__hora { color: var(--atencion); }

/* --- Dato de perfil ---------------------------------------------------------
   Etiqueta arriba y valor abajo, no en dos columnas: en 390 px una etiqueta
   larga como «Cuenta IBAN» empuja el valor y lo parte a la mitad. */
.dato {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  min-height: 64px;
  padding: 13px 18px;
  border-top: var(--borde-hairline) solid var(--borde-sutil);
}
.dato:first-child { border-top: 0; }
.dato__rotulo { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }
.dato__valor  { font-size: 15px; }
.dato__valor--mono {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.dato__valor--vacio { color: var(--texto-secundario); }

/* --- Tarjeta pulsable de lista ---------------------------------------------
   Toda la tarjeta es el objetivo táctil, no un enlace de 14 px al final. */
.tarjeta-toque {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 16px;
  box-shadow: var(--elevacion-tarjeta);
  color: inherit;
  font-family: var(--familia-interfaz);
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva);
}
.tarjeta-toque:active { background: var(--superficie-hundida); }
.tarjeta-toque__cima { display: flex; align-items: center; gap: 10px; }
.tarjeta-toque__titulo { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.tarjeta-toque__pie {
  padding-top: 10px;
  border-top: var(--borde-hairline) solid var(--borde-sutil);
  font-size: 12.5px;
  color: var(--texto-secundario);
}

/* --- Identidad del perfil --------------------------------------------------- */
.identidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.avatar-grande {
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-completo);
  background: var(--superficie-activa);
  color: var(--texto-accion);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.identidad__nombre { font-size: 21px; font-weight: 600; letter-spacing: -0.5px; text-align: center; }
.identidad__puesto { font-size: 13.5px; color: var(--texto-secundario); text-align: center; }
.identidad__codigo {
  padding: 3px 10px;
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  color: var(--texto-secundario);
  font-family: var(--familia-datos);
  font-size: var(--tipo-etiqueta);
  letter-spacing: -0.2px;
}

/* --- Totales de un rango ---------------------------------------------------- */
.totales-rango {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 18px;
  box-shadow: var(--elevacion-tarjeta);
  overflow: hidden;
}
.total-rango {
  padding: 16px 12px;
  border-left: var(--borde-hairline) solid var(--borde-sutil);
  text-align: center;
}
.total-rango:first-child { border-left: 0; }
.total-rango__rotulo {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.total-rango__valor {
  display: block;
  margin-top: var(--espaciado-sm);
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
}
.total-rango--atencion .total-rango__valor { color: var(--atencion); }

/* En escritorio hay ancho de sobra: el estado de la jornada y las marcas del
   día caben lado a lado en vez de uno debajo del otro. */
@media (min-width: 768px) {
  .portal-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaciado-xl);
    align-items: start;
  }
}

/* --- Los cuatro hitos del día ----------------------------------------------
   Se dibujan SIEMPRE los cuatro, los pendientes en gris. Ver la jornada
   completa desde el principio dice cuánto queda; una lista que solo crece a
   medida que se marca, no. */
.marca-hito {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: var(--borde-hairline) solid var(--borde-sutil);
}
.marca-hito:first-child { border-top: 0; }

.marca-hito__punto {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-completo);
  background: var(--superficie-activa);
  color: var(--texto-accion);
}
.marca-hito__punto--pendiente {
  background: var(--superficie-hundida);
  color: var(--texto-secundario);
}

.marca-hito__hora {
  font-family: var(--familia-datos);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.marca-hito__hora--pendiente { color: var(--texto-secundario); font-weight: 400; }

/* --- Solicitudes y pagos del portal ----------------------------------------
   La tarjeta pulsable ya define el marco; aquí solo lo que estas dos pantallas
   agregan encima: el estado como pastilla de color y un pie con acciones. */
.pastilla-estado--atencion     { background: var(--atencion-fondo);     color: var(--atencion); }
.pastilla-estado--confirmacion { background: var(--confirmacion-fondo); color: var(--confirmacion); }

.tarjeta-toque__cima .pastilla-estado { margin-left: auto; }

/* El contador de pendientes viaja dentro de la ficha, no al lado del rótulo. */
.ficha__cuenta {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radio-completo);
  background: var(--atencion-fondo);
  color: var(--texto-principal);
  font-family: var(--familia-datos);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.ficha[aria-pressed="true"] .ficha__cuenta {
  background: var(--superficie-elevada);
  color: var(--texto-accion);
}

.tarjeta-toque__acciones {
  display: flex;
  gap: var(--espaciado-sm);
  padding-top: 12px;
  border-top: var(--borde-hairline) solid var(--borde-sutil);
}
.tarjeta-toque__acciones .boton { flex: 1; min-height: 44px; }

.tarjeta-toque__importe {
  margin-left: auto;
  font-family: var(--familia-datos);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

/* El listado del portal respira: son tarjetas sueltas, no filas de una tabla. */
.lista-toque { display: flex; flex-direction: column; gap: var(--espaciado-sm); }

/* En móvil la acción principal se ancla sobre la barra inferior en vez de
   quedar arriba a la derecha, donde el pulgar no llega. */
@media (max-width: 767px) {
  .accion-flotante {
    position: fixed;
    right: 16px;
    bottom: calc(72px + max(8px, env(safe-area-inset-bottom)));
    z-index: 40;
    min-height: 52px;
    padding: 0 22px;
    border-radius: var(--radio-completo);
    box-shadow: var(--elevacion-dialogo);
  }
}

/* =============================================================================
   MÓDULO «MI EQUIPO» · las cuatro pantallas de una jefatura
   -----------------------------------------------------------------------------
   Panel, Directorio, Asistencia y Horarios. Todo con los tokens que ya existen:
   ni un color nuevo, y por eso el modo oscuro funciona sin escribir una regla
   más. Se apoya en piezas que ya estaban —`.fichas`, `.lista-toque`,
   `.pastilla-estado`, `.totales-rango`, `.dia`, `.tiempos`— y solo agrega lo
   que ninguna de ellas cubría.
   ========================================================================== */

/* --- Avatar de lista --------------------------------------------------------
   Entre el `.avatar` de 28 px de la barra y el `.avatar-grande` de 76 px del
   perfil faltaba el tamaño de una fila de lista. */
.avatar-medio {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radio-completo);
  background: var(--superficie-activa);
  color: var(--texto-accion);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

/* --- Fila de persona con su estado (Panel) ---------------------------------- */
.persona-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 16px;
  box-shadow: var(--elevacion-tarjeta);
}
.persona-fila__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.persona-fila__nombre {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.persona-fila__rol {
  font-size: 12.5px;
  color: var(--texto-secundario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La pastilla no se encoge: el estado es el dato de la fila. */
.persona-fila .pastilla-estado { flex-shrink: 0; }

/* --- Tarjeta del directorio ------------------------------------------------- */
.persona-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 16px;
  box-shadow: var(--elevacion-tarjeta);
}
.persona-tarjeta__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.persona-tarjeta__nombre { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.persona-tarjeta__rol { font-size: 13px; color: var(--texto-secundario); }
.persona-tarjeta__codigo {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--radio-completo);
  background: var(--superficie-hundida);
  color: var(--texto-secundario);
  font-family: var(--familia-datos);
  font-size: var(--tipo-etiqueta);
}

/* --- Acceso a otro módulo (Panel → Solicitudes) ----------------------------- */
.acceso-modulo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 16px;
  box-shadow: var(--elevacion-tarjeta);
  color: inherit;
  text-decoration: none;
}
.acceso-modulo:hover { background: var(--superficie-hundida); }
.acceso-modulo__icono {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radio-lg);
  background: var(--atencion-fondo);
  color: var(--atencion);
}
.acceso-modulo__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acceso-modulo__titulo { font-size: 14.5px; font-weight: 600; }
.acceso-modulo__detalle {
  font-size: 12.5px;
  color: var(--texto-secundario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acceso-modulo__chevron { flex-shrink: 0; color: var(--texto-secundario); display: flex; }

/* --- Cifras del panel: dos tonos que `.totales-rango` no tenía --------------- */
.total-rango--confirmacion .total-rango__valor { color: var(--confirmacion); }

/* --- La tarjeta de jornada, reutilizada para el equipo ----------------------
   `.dia` ya existía para «Mi jornada». Aquí lleva encima el nombre de la
   persona en vez de la fecha, y un pie con la acción de corregir. */
.dia--atencion { border-color: var(--atencion); }
.dia__persona { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.dia__meta { font-family: var(--familia-datos); font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }
.dia__pie {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--borde-hairline) solid var(--borde-sutil);
}
.dia__accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-accion);
  font-size: 13px;
  font-weight: 500;
}
.dia__accion span { display: flex; }
/* Una marca fuera del turno programado se señala sin sacarla de su casilla. */
.tiempo--alerta .tiempo__hora { color: var(--atencion); }

/* --- Horarios: la tira de días y el turno de cada persona -------------------- */
.tira-dias {
  display: flex;
  gap: var(--espaciado-sm);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.chip-dia {
  flex: none;
  width: 54px;
  padding: 9px 0;
  border: var(--borde-hairline) solid var(--borde-definido);
  border-radius: var(--radio-xl);
  background: var(--superficie-elevada);
  color: var(--texto-principal);
  font-family: var(--familia-interfaz);
  text-align: center;
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva),
              border-color var(--motion-instantaneo) var(--motion-curva);
}
.chip-dia__dia { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--texto-secundario); }
.chip-dia__numero { display: block; margin-top: 2px; font-family: var(--familia-datos); font-size: 16px; font-weight: 600; }
.chip-dia--descanso { background: var(--superficie-hundida); }
.chip-dia[aria-pressed="true"] {
  background: var(--accion-primaria);
  border-color: transparent;
}
.chip-dia[aria-pressed="true"] .chip-dia__dia,
.chip-dia[aria-pressed="true"] .chip-dia__numero { color: var(--texto-sobre-accion); }

.turno-fila {
  padding: 14px;
  background: var(--superficie-elevada);
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: 16px;
  box-shadow: var(--elevacion-tarjeta);
}
.turno-fila--libre { background: var(--superficie-hundida); box-shadow: none; }
.turno-fila__cima { display: flex; align-items: center; gap: 12px; }
.turno-fila__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.turno-fila__nombre {
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turno-fila__rol {
  font-size: 12.5px; color: var(--texto-secundario);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turno-fila__libre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 4px;
  color: var(--texto-secundario);
  font-size: 12.5px;
  cursor: pointer;
}
.turno-fila__horas { display: flex; align-items: flex-end; gap: var(--espaciado-sm); margin-top: 12px; }
.turno-fila--libre .turno-fila__horas { opacity: var(--opacidad-atenuado); }
.turno-hora { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.turno-hora__rotulo { font-size: var(--tipo-etiqueta); color: var(--texto-secundario); }
.turno-hora__guion { padding-bottom: 12px; color: var(--texto-secundario); }
.campo__entrada--hora { font-family: var(--familia-datos); text-align: center; }
/* Una hora a medias —inicio sin fin— no se puede guardar: se dice al escribir. */
.campo__entrada--incompleto { border-color: var(--atencion); }

/* La casilla se usaba en la matriz de horarios sin tener estilo propio: salía
   con el tamaño por defecto del navegador, de unos 13 px. */
.campo__casilla {
  width: 20px; height: 20px;
  flex-shrink: 0;
  accent-color: var(--accion-primaria);
  cursor: pointer;
}

/* --- En el teléfono, un diálogo es una hoja que sube ------------------------
   `capaDialogo` centra una caja, que en 375 px queda flotando con los bordes
   pegados. La misma capa, anclada abajo, se alcanza con el pulgar. */
@media (max-width: 767px) {
  .dialogo {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    border-radius: 20px 20px 0 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  /* `display:flex` reemplaza al `block` de la regla base, así que hay que
     repetir el estado cerrado o el diálogo quedaría siempre visible. */
  .dialogo:not([data-abierto="true"]) { display: none; }
  /* Un formulario de cinco campos no cabe en 88vh: se desplaza por dentro y el
     pie con los botones se queda anclado abajo. */
  .dialogo__cuerpo { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .dialogo__pie { flex-shrink: 0; }
}

/* =============================================================================
   PERFIL DE LA CONSOLA · foto y cabecera de cuenta
   -----------------------------------------------------------------------------
   Con los tokens que ya existen: ni un color nuevo, y el modo oscuro funciona
   sin escribir una regla más.
   ========================================================================== */

/* La foto ocupa exactamente el mismo espacio que el avatar de iniciales, así la
   lista no salta cuando alguien sube la suya. */
.avatar-foto {
  flex-shrink: 0;
  border-radius: var(--radio-completo);
  object-fit: cover;
  background: var(--superficie-hundida);
  /* El aro separa una foto clara del fondo claro sin recurrir a una sombra. */
  box-shadow: 0 0 0 1px var(--borde-sutil);
}

.perfil-cabecera {
  display: flex;
  align-items: center;
  gap: var(--espaciado-lg);
  padding: var(--espaciado-xl);
}

/* El botón de cambiar la foto va SOBRE ella, en la esquina: separado como un
   enlace debajo, nadie lo relaciona con la imagen. */
.perfil-foto { position: relative; flex-shrink: 0; line-height: 0; }

.perfil-foto__accion {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: var(--borde-hairline) solid var(--borde-sutil);
  border-radius: var(--radio-completo);
  background: var(--superficie-elevada);
  color: var(--texto-secundario);
  box-shadow: var(--elevacion-tarjeta);
  cursor: pointer;
  transition: background var(--motion-instantaneo) var(--motion-curva),
              color var(--motion-instantaneo) var(--motion-curva);
}
.perfil-foto__accion:hover {
  background: var(--superficie-activa);
  color: var(--texto-accion);
}
.perfil-foto__accion:disabled {
  opacity: var(--opacidad-deshabilitado);
  cursor: default;
}
.perfil-foto__accion span { display: flex; }

.perfil-nombre {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.perfil-correo {
  font-family: var(--familia-datos);
  font-size: var(--tipo-interfaz);
  color: var(--texto-secundario);
}

/* Un administrador revocado sigue en la lista —queda constancia— pero se lee
   como lo que es: alguien que ya no entra. */
.persona-fila--inactiva { opacity: var(--opacidad-atenuado); }

@media (max-width: 767px) {
  .perfil-cabecera {
    flex-direction: column;
    text-align: center;
    padding: var(--espaciado-lg);
  }
  .perfil-cabecera .boton { width: 100%; }
}