/* =========================================================================
   noevi — marco.css: el armazón y el patrón de pantalla.

   Sale de la maqueta del PMS de Lydent (static/design/apps/pms.css, commit
   ce9ee6802), con sus mismos nombres `pms-*` para que una pantalla de la
   maqueta se traiga tal cual. Lo que añade noevi va en §8.

   Pensado para un portátil de 14" (1366×768) que escala hacia arriba. Una
   barra, sin títulos visibles y todo el ancho para el trabajo. En móvil no se
   optimiza, pero nada se rompe: la barra envuelve y lo fijo deja de serlo.

   Se carga después de fonts, tokens, brand, base y components. Sin literales
   de color, tamaño ni espaciado: todo de tokens.css. Ver docs/ui_diseno.md.
   ========================================================================= */

/* ---------- 1. RAÍZ ---------------------------------------------------- */

html, body { margin: 0; }
body.pms { --pms-barra: var(--s-10); --pms-lado: calc(var(--s-11) * 3.75); min-height: 100vh; background: var(--n-0); font-size: var(--fs-sm); }

/* ---------- 2. LA BARRA ------------------------------------------------ */

.pms-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--pms-barra); padding: 0 var(--s-5) 0 var(--s-4);
  background: var(--accent-nav); color: var(--n-900);
  border-bottom: var(--bd);
}
.pms-top a { color: inherit; text-decoration: none; }
.pms-top a:hover { text-decoration: none; }
.pms-top__marca { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.pms-top__marca img { width: var(--s-8); height: var(--s-8); }
.pms-top__ruta { color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pms-top__buscar { margin-left: auto; flex: 0 1 calc(var(--s-11) * 5); }
.pms-top__buscar .ds-input { width: 100%; }
/* Apagado hasta que haya pacientes, pero con la cara del buscador de la maqueta. */
.pms-top__buscar .ds-input:disabled { background: var(--n-0); border-color: var(--n-200); color: var(--n-800); opacity: 1; cursor: not-allowed; }
.pms-top__buscar .ds-input:disabled::placeholder { color: var(--n-400); }

.pms-menu { display: flex; align-self: stretch; }
.pms-menu__grupo { position: relative; display: flex; }
.pms-menu__sec {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-5); border: 0; background: none; color: inherit;
  font: inherit; white-space: nowrap; cursor: pointer;
}
.pms-menu__sec:hover, .pms-menu__grupo:hover > .pms-menu__sec,
.pms-menu__grupo:focus-within > .pms-menu__sec { background: var(--n-100); }
.pms-menu__sec[aria-current] { color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

.pms-menu__lista {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: calc(var(--s-11) * 5);
  padding: var(--s-2) 0;
  background: var(--n-0); box-shadow: var(--sh-overlay);
}
.pms-menu__grupo:hover .pms-menu__lista, .pms-menu__grupo:focus-within .pms-menu__lista { display: block; }
.pms-menu__lista a, .pms-menu__lista button {
  display: block; width: 100%; padding: var(--s-2) var(--s-5);
  border: 0; background: none; color: var(--n-800);
  font: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.pms-menu__lista a:hover, .pms-menu__lista button:hover { background: var(--n-50); }
.pms-menu__lista a[aria-current] { font-weight: 600; color: var(--accent-600); }
.pms-menu__lista form { margin: 0; }
.pms-menu__lista hr { margin: var(--s-2) 0; border: 0; border-top: var(--bd); }
.pms-menu__nota { padding: var(--s-2) var(--s-5); color: var(--n-500); font-size: var(--fs-xs); white-space: nowrap; }

/* Quién ha entrado: el último grupo de la barra, con su lista a la derecha. */
.pms-quien { margin-left: auto; align-self: stretch; }
.pms-top__buscar ~ .pms-quien { margin-left: 0; }
.pms-quien .pms-menu__lista { left: auto; right: 0; min-width: calc(var(--s-11) * 4); }
.pms-quien__nombre { max-width: calc(var(--s-11) * 4); overflow: hidden; text-overflow: ellipsis; }

.pms-pendiente { opacity: .55; }

/* ---------- 3. CUERPO Y COLUMNA VERTICAL --------------------------------- */

/* La columna aparece cuando la pantalla la pone: sin marca de servidor. */
.pms-cuerpo:has(> .pms-lado) { display: grid; grid-template-columns: var(--pms-lado) minmax(0, 1fr); }
.pms-main { min-width: 0; padding-bottom: var(--s-10); }

.pms-lado {
  position: sticky; top: var(--pms-barra); align-self: start;
  height: calc(100vh - var(--pms-barra)); overflow-y: auto;
  padding: var(--s-4);
  background: var(--n-25); border-right: var(--bd);
}
.pms-lado__nombre { margin: 0; font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.pms-lado__meta { margin-top: var(--s-1); color: var(--n-500); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.pms-lado__foto { display: block; width: calc(var(--s-11) * 1.5); height: calc(var(--s-11) * 1.5); object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--s-4); }
.pms-lado__grupo { margin: var(--s-6) var(--s-4) var(--s-2); font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-500); }
.pms-ficha__tabs { display: grid; margin-top: var(--s-4); }
.pms-ficha__tabs a, .pms-ficha__tabs span { padding: var(--s-1) var(--s-4); border-radius: var(--r-sm); color: var(--n-800); text-decoration: none; }
.pms-ficha__tabs a:hover { background: var(--n-100); text-decoration: none; }
.pms-ficha__tabs a[aria-current] { background: var(--accent); color: var(--on-accent); }
.pms-ficha__tabs span { color: var(--n-400); }

/* ---------- 4. EL PATRÓN: FILTROS EN UNA LÍNEA + TABLA A SANGRE --------- */

.pms-linea { margin: 0; padding: var(--s-3) var(--s-5); color: var(--n-600); }

.pms-filtros {
  position: sticky; top: var(--pms-barra); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  min-height: var(--s-10);
  padding: var(--s-3) var(--s-5);
  background: var(--n-25); border-bottom: var(--bd);
}
.pms-filtros .ds-input, .pms-filtros .ds-select { width: calc(var(--s-11) * 3); }
.pms-filtros .ds-input.pms-filtros__ancho { width: calc(var(--s-11) * 6); }
.pms-filtros__fin { margin-left: auto; }
.pms-filtros__nota { color: var(--n-500); }
/* Un filtro con su rótulo delante, en la misma línea: el select «Todas» solo no dice de qué. */
.pms-filtro { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.pms-filtro__rot { color: var(--n-600); }
.pms-filtros .pms-filtro .ds-input, .pms-filtros .pms-filtro .ds-select { width: calc(var(--s-11) * 3); }
.pms-filtros .pms-filtro--ancho .ds-input { width: calc(var(--s-11) * 5); }
.pms-filtros .pms-filtro input[type="date"].ds-input { width: calc(var(--s-11) * 2.75); }
.pms-mas { position: static; }

.pms .ds-table thead th { position: sticky; top: var(--pms-barra); z-index: 5; background: var(--n-25); white-space: nowrap; }
.pms .ds-table th, .pms .ds-table td { padding-block: var(--s-2); }
.pms .pms-filtros ~ .ds-table thead th,
.pms .pms-filtros ~ * .ds-table thead th { top: calc(var(--pms-barra) + var(--s-10)); }
.pms .ds-table td { vertical-align: middle; }
.pms .ds-table td .ds-input { min-width: calc(var(--s-11) * 2); min-height: calc(var(--ctl-h) - var(--s-2)); padding-block: 0; }
.pms .ds-table td .ds-input--num { width: calc(var(--s-11) * 2.5); }
.pms .ds-table td form { margin: 0; }
.pms-celda-acc { width: 1%; white-space: nowrap; }

/* Filtros plegables: el panel flota sobre la tabla, así que abrirlo no descoloca
   la cabecera fija ni quita sitio cuando está cerrado. */
.pms-mas > summary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: var(--ctl-h); padding: 0 var(--s-4);
  border: var(--bd-strong); border-radius: var(--r-sm); background: var(--n-0);
  cursor: pointer; list-style: none; white-space: nowrap;
}
.pms-mas > summary::-webkit-details-marker { display: none; }
/* El embudo de la maqueta (Font Awesome 6.5.1, CC BY 4.0), en casa y del color del texto. */
.pms-mas > summary::before {
  content: ""; width: var(--s-4); height: var(--s-4); background: currentColor;
  -webkit-mask: url('iconos/filtro.svg') center / contain no-repeat; mask: url('iconos/filtro.svg') center / contain no-repeat;
}
.pms-mas[open] > summary { background: var(--n-100); }
.pms-mas__panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 15;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-11) * 4), 1fr)); gap: var(--s-4) var(--s-5);
  padding: var(--s-5);
  background: var(--n-0); border-bottom: var(--bd-strong);
  box-shadow: var(--sh-overlay);
}
.pms-mas__panel .ds-input, .pms-mas__panel .ds-select { width: 100%; }
.pms-mas__acciones { grid-column: 1 / -1; display: flex; gap: var(--s-4); }

/* Paginación: una línea al pie de la tabla. */
.pms-paginas { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); border-top: var(--bd); color: var(--n-600); }
.pms-paginas__fin { margin-left: auto; display: flex; gap: var(--s-3); }

/* ---------- 5. BLOQUES Y FORMULARIOS DENSOS ------------------------------ */

/* Un bloque es una parte de la pantalla a sangre, separada por un pelo. Su
   rótulo es una micro-etiqueta, no un título: dónde estás lo dice la barra. */
.pms-bloque { border-bottom: var(--bd); scroll-margin-top: var(--pms-barra); }
.pms-bloque__tit {
  display: flex; align-items: center; gap: var(--s-4);
  margin: 0; padding: var(--s-5) var(--s-5) 0;
  font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-500);
}
.pms-bloque__tit + .ds-table, .pms-bloque > .pms-ayuda + .ds-table { margin-top: var(--s-3); }
.pms-bloque--peligro .pms-bloque__tit { color: var(--risk-ink); }
.pms-ayuda { margin: 0; padding: var(--s-2) var(--s-5) 0; max-width: 100ch; font-size: var(--fs-xs); color: var(--n-500); }

.pms-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-11) * 5), 1fr)); gap: var(--s-4) var(--s-5); padding: var(--s-4) var(--s-5); align-items: start; }
.pms-form .ds-input, .pms-form .ds-select, .pms-form .ds-textarea { width: 100%; }
.pms-form__ancho { grid-column: span 2; }
.pms-form__todo { grid-column: 1 / -1; }
.pms-form__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.pms-form .ds-field { min-width: 0; }

.pms-avisos { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) 0; }
.pms-avisos .ds-note { margin: 0; }
.pms-form > .ds-note, .pms-form > .pms-avisos { grid-column: 1 / -1; padding-inline: 0; }
.pms-casilla { display: flex; gap: var(--s-3); align-items: flex-start; }

/* Casillas en rejilla: una lista larga de tratamientos o disciplinas. */
.pms-opciones { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-11) * 5), 1fr)); gap: var(--s-2) var(--s-5); }
.pms-opciones legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--s-3); font-family: var(--font-cond); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--n-500); }
.pms-opcion { display: flex; gap: var(--s-3); align-items: center; font-size: var(--fs-sm); }

/* ---------- 6. DATOS EN LECTURA ----------------------------------------- */

.pms-datos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-11) * 3.5), 1fr));
  gap: var(--s-4) var(--s-5);
  margin: 0; padding: var(--s-5);
}
.pms-datos dt { color: var(--n-500); font-size: var(--fs-micro); }
.pms-datos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- 7. ACCESO: LA MISMA ESTÉTICA, SIN MENÚ ----------------------- */

.pms-acceso { display: grid; justify-items: center; align-content: start; padding: var(--s-11) var(--s-5); background: var(--n-25); min-height: calc(100vh - var(--pms-barra)); }
.pms-acceso__caja { width: 100%; max-width: calc(var(--s-11) * 8); background: var(--n-0); border: var(--bd-strong); border-radius: var(--r-md); }
.pms-acceso__tit { margin: 0; padding: var(--s-6) var(--s-6) 0; font-size: var(--fs-md); font-weight: 600; }
.pms-acceso .pms-form { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-6) var(--s-6); }
.pms-acceso .pms-avisos { padding: var(--s-4) var(--s-6) 0; }
.pms-acceso__texto { margin: 0; padding: var(--s-4) var(--s-6) 0; color: var(--n-600); }
.pms-acceso__pie { margin: 0; padding: 0 var(--s-6) var(--s-6); font-size: var(--fs-xs); }
.pms-secreto { display: block; margin: var(--s-4) var(--s-6) 0; padding: var(--s-4); background: var(--n-50); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-sm); word-break: break-all; }

/* ---------- 8. PROPIO DE NOEVI ------------------------------------------ */

/* El color de un profesional en la agenda. */
.ds-input--color, .pms-form .ds-input--color { width: calc(var(--s-11) * 1.5); padding: var(--s-1); }
.pms-muestra { width: var(--s-8); height: var(--s-6); padding: 0; border: var(--bd); border-radius: var(--r-sm); background: none; vertical-align: middle; }
.pms-foto { display: block; width: calc(var(--s-11) * 2.5); height: calc(var(--s-11) * 2.5); object-fit: cover; border-radius: var(--r-md); border: var(--bd-strong); }
.pms-valores { margin: var(--s-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; word-break: break-word; }
.pms-mapa__entradas { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
/* El texto crudo que leyó el importador de baremos, junto a la fila que se revisa. */
.pms-crudo { margin: var(--s-2) var(--s-5) 0; padding: var(--s-3); background: var(--n-50); border-radius: var(--r-sm); }

/* ---------- 9. PANTALLA ESTRECHA: QUE NADA SE ROMPA ---------------------- */

@media (max-width: 1024px) {
  .pms-top { flex-wrap: wrap; height: auto; padding-block: var(--s-2); position: static; }
  .pms-menu { flex-wrap: wrap; }
  .pms-menu__sec { min-height: var(--s-10); }
  .pms-top__buscar { order: 9; flex-basis: 100%; }
  .pms-filtros, .pms-lado, .pms .ds-table thead th { position: static; }
  .pms-cuerpo:has(> .pms-lado) { display: block; }
  .pms-lado { height: auto; border-right: 0; border-bottom: var(--bd); }
  .pms-main { overflow-x: auto; }
  .pms-acceso { min-height: 0; }
  /* El rótulo `ds-sr-only` (absoluto) de una columna de acciones se queda dentro de la
     columna que se desplaza, y no ensancha la página. */
  .pms-main { position: relative; }
}