/* ============================================================================
   rh.css - dialecto de Persona Central sobre el design system de design_base.

   Se carga DESPUES de ds/components.css. Todo se construye con variables
   semanticas --ds-*; aqui no hay colores, radios ni sombras literales.
   Las clases propias llevan el prefijo rh- (producto: Recursos Humanos).
   ========================================================================= */

/* ------------------------------------------------------------- 1. Cascaron */

.rh-main {
  display: block;
  max-inline-size: 80rem;
  margin: 0 auto;
  padding: var(--ds-space-24) var(--ds-space-16) var(--ds-space-48);
}


.rh-mensajes { margin-block-end: var(--ds-space-24); }

.rh-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-space-8);
  max-inline-size: 80rem;
  margin: 0 auto;
  padding: var(--ds-space-16);
  border-block-start: 1px solid var(--ds-border-subtle);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-body-sm-size);
}

/* El isotipo de la empresa, en lugar del monograma .ds-topbar__mark. Se
   escala por la altura, para que un logo que no sea cuadrado no se deforme. */
.rh-topbar__logo {
  display: block;
  flex: none;
  block-size: 1.75rem;
  inline-size: auto;
}

/* Menu de la barra superior: el de la izquierda se alinea a su boton. */
.rh-menu--inicio { inset-inline-start: 0; inset-inline-end: auto; }
.rh-menu__meta {
  margin: 0;
  padding: var(--ds-space-4) var(--ds-space-8);
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-body-sm-size);
}
.rh-menu__form { margin: 0; }
/* .ds-menu__item no quita el subrayado del navegador en un <a>. */
.rh-menu__enlace { text-decoration: none; }

/* --------------------------------------------------- 2. Encabezado de pagina */

.rh-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-16);
  margin-block-end: var(--ds-space-24);
}
.rh-pagina__titulo { margin: 0; }
.rh-pagina__sub {
  margin: var(--ds-space-4) 0 0;
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-body-sm-size);
}
.rh-pagina__acciones { flex: none; }

.rh-seccion { margin-block-start: var(--ds-space-32); }
.rh-seccion__titulo { margin: 0 0 var(--ds-space-12); }

.rh-bloque + .rh-bloque { margin-block-start: var(--ds-space-16); }

/* --------------------------------------------------------- 3. Rejillas */

/* Variantes del ancho minimo de columna de .ds-grid. */
.rh-grid--xs { --ds-grid-min: 9rem; }
.rh-grid--sm { --ds-grid-min: 13rem; }
.rh-grid--md { --ds-grid-min: 18rem; }

/* Dos columnas desiguales: detalle a la izquierda, lista a la derecha. */
.rh-dos-columnas {
  display: grid;
  gap: var(--ds-space-16);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .rh-dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .rh-dos-columnas--iguales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Al reves: el trabajo a la izquierda y el panel de consulta a la derecha. */
  .rh-dos-columnas--panel-derecha { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* --------------------------------------------- 4. Formularios y filtros */

.rh-form { max-inline-size: 42rem; }

.rh-filtros {
  display: grid;
  gap: var(--ds-space-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end;
}
.rh-filtros__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-8);
}

/* Campo que elige de un catalogo, con el atajo para administrarlo a su derecha.
   Es solo maquetacion: el boton es un .ds-btn--icon de siempre. No se usa
   .ds-input-group porque ese grupo esta hecho para .ds-input -le quita borde y
   fondo al control- y aqui el control es un .ds-select. */
.rh-campo-atajo {
  display: flex;
  /* Arriba y no al centro: con un select de una linea da igual -los dos miden
     lo mismo-, pero junto a una lista alta, como la de turnos, el boton al
     centro parece suelto en lugar de pertenecer al campo. */
  align-items: flex-start;
  gap: var(--ds-space-8);
}
.rh-campo-atajo > .ds-select-wrap,
.rh-campo-atajo > .ds-select,
.rh-campo-atajo > .ds-input {
  flex: 1;
  min-inline-size: 0;
}
.rh-campo-atajo__btn { flex: none; }

.rh-mayusculas { text-transform: uppercase; }

/* Opciones de un CheckboxSelectMultiple / RadioSelect: Django genera el
   <label> sin clase, asi que la estructura de .ds-check se arma aqui. */
.rh-opciones > div { display: flex; flex-wrap: wrap; column-gap: var(--ds-space-24); }
.rh-opciones label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ds-space-8);
  min-block-size: var(--ds-target-min);
  padding-block: calc((var(--ds-target-min) - 1.25rem) / 2);
  cursor: pointer;
  font-size: var(--ds-control-font-size);
  line-height: 1.35;
}

/* input[type=color]: el control nativo no admite el relleno de .ds-input. */
.rh-color {
  padding: var(--ds-space-2);
  inline-size: 4.5rem;
  min-inline-size: 4.5rem;
}

/* --------------------------------------------------- 5. Pares etiqueta/dato */

.rh-datos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ds-space-8) var(--ds-space-16);
  margin: 0;
  font-size: var(--ds-type-body-sm-size);
}
.rh-datos dt { color: var(--ds-text-secondary); }
.rh-datos dd { margin: 0; }

/* ------------------------------------------------------------ 6. Cifras */

.rh-cifra {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}
.rh-cifra__valor {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-type-h1-size);
  line-height: 1.1;
  font-weight: var(--ds-type-h1-weight);
  font-variant-numeric: tabular-nums;
}
.rh-cifra__etiqueta {
  margin: 0;
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-body-sm-size);
}
.rh-cifra--chica .rh-cifra__valor { font-size: var(--ds-type-h3-size); }

a.rh-tarjeta-enlace { text-decoration: none; color: inherit; display: block; }

/* Icono de una tarjeta de acceso del tablero: el dibujo solo, sin placa, en el
   color de texto mas fuerte del tema. Va en el mismo renglon que el titulo, y
   centrado contra el bloque, para que no se descuelgue si el titulo da dos
   renglones. */
.rh-tarjeta__encabezado {
  display: flex;
  align-items: center;
  gap: var(--ds-space-12);
}
.rh-tarjeta__icono {
  display: block;
  color: var(--ds-text-primary);
  --ds-icon-size: 1.75rem;
}

/* ---------------------------------------------------------- 7. Check-in */

.rh-checkin {
  max-inline-size: 30rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-20);
}
.rh-reloj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-24) var(--ds-space-16);
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg);
}
.rh-reloj__hora {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-display-size);
  line-height: 1;
  font-weight: var(--ds-type-display-weight);
  font-variant-numeric: tabular-nums;
}
.rh-reloj__fecha { color: var(--ds-text-secondary); }
.rh-reloj__zona {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-body-sm-size);
}
.rh-marcar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-12);
}
.rh-marcar .ds-btn { min-block-size: 3.5rem; }
.rh-estado:empty { display: none; }
.rh-ubicacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-8);
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-body-sm-size);
}

/* ---------------------------------------------------- 8. Lista de marcas */

.rh-marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rh-marcas > li {
  display: grid;
  grid-template-columns: auto minmax(5rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--ds-space-8) var(--ds-space-12);
  padding: var(--ds-space-12) 0;
  border-block-end: 1px solid var(--ds-border-subtle);
}
.rh-marcas > li:last-child { border-block-end: 0; }
.rh-marcas__vacia { display: block; color: var(--ds-text-secondary); }
.rh-marca__hora {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.rh-marca__tipo { font-weight: 600; }
.rh-marca__detalle {
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-body-sm-size);
}

.rh-dia + .rh-dia { margin-block-start: var(--ds-space-24); }
.rh-dia__titulo {
  margin: 0 0 var(--ds-space-4);
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-label-size);
  font-weight: var(--ds-type-label-weight);
}

/* --------------------------------------------------------- 9. Login */

.rh-login {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: var(--ds-space-24) var(--ds-space-16);
}
.rh-login__caja {
  inline-size: 100%;
  max-inline-size: 24rem;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-20);
}
.rh-login__logo {
  display: block;
  max-inline-size: 13rem;
  block-size: auto;
  margin: 0 auto;
}
.rh-login__pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-8);
  color: var(--ds-text-muted);
  font-size: var(--ds-type-body-sm-size);
}

/* --------------------------------------------------- 10. Detalles menores */

/* Muestra del color identificador de un turno. */
.rh-muestra-color {
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: var(--ds-radius-xs);
  border: 1px solid var(--ds-border-default);
  vertical-align: -0.15em;
}

/* Celda de acciones de una tabla: los botones no se parten. */
.rh-acciones {
  display: flex;
  gap: var(--ds-space-4);
  justify-content: flex-end;
  white-space: nowrap;
}

.rh-ayuda {
  margin: 0;
  color: var(--ds-text-secondary);
  font-size: var(--ds-type-body-sm-size);
}
ul.rh-ayuda { padding-inline-start: var(--ds-space-20); }
ul.rh-ayuda > li + li { margin-block-start: var(--ds-space-4); }

/* Señales de una marca a revisar: lista corta dentro de una celda. */
.rh-senales {
  margin: 0;
  padding-inline-start: var(--ds-space-16);
  font-size: var(--ds-type-body-sm-size);
}

.rh-salto { margin-block-start: var(--ds-space-16); }

/* Barra de porcentaje dentro de una celda: ancho acotado para que la columna
   no se coma la tabla. */
.rh-barra { min-inline-size: 6rem; max-inline-size: 10rem; }

/* Turnos de un empleado: lista sin viñetas, un turno por renglón. */
.rh-turnos { list-style: none; margin: 0; padding: 0; }
.rh-turno + .rh-turno { margin-block-start: var(--ds-space-8); }

/* Bitácora corta: cada entrada en su renglón, separada por una línea. */
.rh-bitacora { list-style: none; margin: 0; padding: 0; }
.rh-bitacora > li {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding-block: var(--ds-space-8);
  border-block-end: 1px solid var(--ds-border-subtle);
  font-size: var(--ds-type-body-sm-size);
}
.rh-bitacora > li:last-child { border-block-end: 0; }

/* Comando para copiar: se parte si no cabe. */
.rh-comando { margin: var(--ds-space-4) 0 0; overflow-wrap: anywhere; }

/* Turnos abreviados en el listado de personas: uno por renglon, en letra
   chica, para que la columna no se lleve el ancho de la tabla. Es otra cosa
   que .rh-turnos, que es la lista completa de la ficha del usuario. */
.rh-turnos-breves { white-space: nowrap; }
.rh-turnos-breves__uno {
  display: block;
  font-size: var(--ds-type-body-sm-size);
}
.rh-turnos-breves__uno + .rh-turnos-breves__uno { margin-block-start: var(--ds-space-2); }

/* Punto de estatus antes del nombre en el listado de personas. Verde si la
   persona sigue activa, gris si esta dada de baja. Es decorativo: el estado
   tambien va en texto para quien no distingue los colores. */
.rh-punto {
  display: inline-block;
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: 50%;
  margin-inline-end: var(--ds-space-8);
  vertical-align: baseline;
}
.rh-punto--activo { background: var(--ds-feedback-success-text); }
/* El inactivo no se distingue por tono sino por peso: relleno casi del color
   del fondo y un aro fino. Al verde lleno le queda 4.2 de contraste, contra el
   1.0 que habia cuando los dos puntos eran discos oscuros (--ds-border-strong,
   5.4 contra los 5.6 del verde) y el 1.6 de --ds-border-default. El aro es lo
   que evita que el punto desaparezca: sin el, un relleno tan claro deja un
   hueco y ya no se lee como punto. Entre subtle -1.3- y disabled-text -3.1- no
   hay ningun neutro del tema, asi que la via para aclararlo mas era esta. */
.rh-punto--inactivo {
  background: var(--ds-border-subtle);
  border: 1px solid var(--ds-border-default);
}