/* Punto Medig · «Usuarios y roles» (mod-usuarios.js). Solo tokens de base.css; prefijo «us-». */

.modulo-usuarios { container-type: inline-size; container-name: usuarios; }
.us-herr { justify-content: space-between; }
.us-inactivo { opacity: 0.72; }

/* Profesionales */
.us-pros { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.us-pro { display: grid; gap: 0.65rem; padding: 1rem 1.1rem; }
.us-pro-cab { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
.us-pro-nombre { min-width: 0; }
.us-pro-nombre h3 { font-size: var(--t-md); overflow-wrap: anywhere; }
.us-pro-nombre .tenue { font-size: var(--t-sm); }
.us-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.us-foto-grande { width: 72px; height: 72px; font-size: 1.2rem; }
.us-horario { display: flex; gap: 0.45rem; align-items: flex-start; font-size: var(--t-sm); color: var(--tinta-2); }
.us-horario .ico { width: 18px; height: 18px; color: var(--tenue); margin-top: 2px; }
.us-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
.us-chips .chip { white-space: normal; overflow-wrap: anywhere; }
.us-acc { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

/* Formularios */
.us-form { display: grid; gap: 1rem; }
.us-grid2 { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.us-foto-campo { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.us-foto-acc { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.us-foto-acc .ayuda { width: 100%; font-size: var(--t-xs); color: var(--tenue); }
.us-subir { cursor: pointer; }
.us-fs { border: 1px solid var(--linea); border-radius: var(--r-md); padding: 0.75rem 1rem 1rem; margin: 0; display: grid; gap: 0.75rem; min-width: 0; }
.us-fs legend { font-weight: 700; font-size: var(--t-sm); color: var(--tinta-2); padding: 0 0.35rem; }
.us-fs > .ayuda { font-size: var(--t-xs); color: var(--tenue); }
.us-bloques { display: grid; gap: 0.6rem; }
.us-bloque { display: grid; gap: 0.5rem; padding: 0.7rem; border-radius: var(--r-md); background: var(--superficie-2); }
.us-dias { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.us-dia { position: relative; }
.us-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.us-dia span[aria-hidden] {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--superficie); font-weight: 700; font-size: var(--t-sm); color: var(--tinta-2);
}
.us-dia input:checked + span[aria-hidden] { background: var(--azul); border-color: var(--azul); color: var(--superficie); }
.us-dia input:focus-visible + span[aria-hidden] { box-shadow: var(--foco); }
.us-horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.5rem; align-items: end; }
.us-horas .campo input, .us-horas .campo select { min-height: 42px; }
.us-quitar { align-self: end; }
.us-bloque-info { font-size: var(--t-xs); color: var(--tenue); }
.us-bloque-info.us-mal { color: var(--grave); font-weight: 700; }
.us-resumen { font-size: var(--t-sm); color: var(--tinta-2); }
.us-error { color: var(--grave); background: var(--grave-suave); font-weight: 700; font-size: var(--t-sm); border-radius: var(--r-md); padding: 0.55rem 0.75rem; }
.us-form .casilla small { display: block; font-size: var(--t-xs); }
.us-nota-rol { font-size: var(--t-sm); }
@media (max-width: 520px) {
  .us-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-quitar { justify-self: end; }
}
.us-dl { margin: 0; display: grid; gap: 0.6rem; }
.us-dl dt { font-size: var(--t-xs); font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.06em; }
.us-dl dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.us-dl .clave-temporal { display: block; }

/* Personal */
.us-grupo { display: grid; gap: 0.35rem; }
.us-grupo > .etiqueta { font-size: 0.68rem; }
.us-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--superficie); overflow: hidden; }
.us-persona { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.75rem 1rem; }
.us-persona + .us-persona { border-top: 1px solid var(--linea); }
.us-persona-quien { display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.us-persona-quien .avatar { width: 36px; height: 36px; font-size: 0.75rem; }
.us-persona-dato { display: grid; gap: 0.1rem; font-size: var(--t-sm); min-width: 0; }
.us-persona-dato .dato { font-size: var(--t-xs); overflow-wrap: anywhere; }
.us-persona-dato .tenue { font-size: var(--t-xs); }
.us-solo-dir { font-size: var(--t-xs); }
@container usuarios (min-width: 860px) {
  .us-persona { grid-template-columns: minmax(200px, 1.1fr) minmax(200px, 1.1fr) minmax(160px, 1fr); align-items: center; }
  .us-persona .us-acc { grid-column: 1 / -1; }
}

/* Roles y permisos */
.us-matriz th, .us-matriz td { text-align: center; white-space: nowrap; }
.us-matriz th[scope="row"] { text-align: left; }
.us-matriz thead th { vertical-align: bottom; }
.us-sin-may { text-transform: none; letter-spacing: 0; font-weight: 400; }
.us-col-dir { background: color-mix(in srgb, var(--oro-suave) 55%, transparent); }
.us-check { width: 20px; height: 20px; accent-color: var(--azul); cursor: pointer; }
.us-fila-inicio td, .us-fila-inicio th { background: var(--superficie-2); }
.us-inicio { min-height: 36px; max-width: 150px; border: 1.5px solid var(--linea); border-radius: var(--r-md); background: var(--superficie); color: var(--tinta); padding: 0 0.4rem; font-size: var(--t-xs); }
.us-pie { position: sticky; bottom: 0; padding: 0.75rem 0; background: color-mix(in srgb, var(--fondo) 92%, transparent); }
.us-matriz th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--tinta); background: var(--superficie); font-weight: 700; }
.us-fila-inicio th[scope="row"] { background: var(--superficie-2); }
.us-dia span[aria-hidden] { font-size: var(--t-xs); }
.us-agenda { display: inline-flex; gap: 0.35rem; align-items: flex-start; font-size: var(--t-xs); color: var(--tinta-2); }
.us-agenda .ico { width: 15px; height: 15px; color: var(--tenue); margin-top: 1px; flex: none; }
.us-agenda.us-mal { color: var(--grave); font-weight: 700; }