/* v3.92 · Estética pulida (David, 25-09-2026: «más moderna y minimalista, como
   FANSpower»). Capa que va DESPUÉS de style.css y solo retoca: mismos
   principios que FANSpower (fondo cálido, superficies planas con borde fino,
   negro con transparencias para hover/activo, tipografía del sistema a 14 px,
   cabeceras de tabla sin mayúsculas, pestañas como control segmentado) con el
   teal de iPrevención como único color de marca. */

:root {
  --page-plane: #f9f9f7;
  --surface-1: #ffffff;
  --surface-2: #fcfcfb;
  --ink-hover: rgba(0, 0, 0, 0.04);
  --ink-active: rgba(0, 0, 0, 0.06);
  --row-line: rgba(0, 0, 0, 0.06);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-card: none;
  --shadow-pop: 0 1px 3px rgba(0, 0, 0, .10), 0 1px 2px -1px rgba(0, 0, 0, .10);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

html, body { font-size: 14px; background: var(--page-plane); -webkit-font-smoothing: antialiased; }

/* ---------- Títulos ---------- */
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
.subtitle { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; }

/* ---------- Tarjetas planas ---------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 16px;
}
.card-header { margin-bottom: 10px; }
.card-header h2 { margin: 0; }

/* ---------- Botones: sobrios, el color solo en la acción principal ---------- */
button, .btn {
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  padding: 7px 12px;
  transition: background .12s, border-color .12s, filter .12s;
}
button:hover, .btn:hover { border-color: rgba(0, 0, 0, .18); background: var(--ink-hover); }
button.primary, .btn.primary { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--brand-teal); filter: brightness(.92); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; }
button.ghost:hover, .btn.ghost:hover { background: var(--ink-hover); }
button.danger, .btn.danger { color: var(--status-critical); }
button.danger:hover, .btn.danger:hover { background: color-mix(in srgb, var(--status-critical) 8%, transparent); border-color: color-mix(in srgb, var(--status-critical) 30%, transparent); }
button.small, .btn.small { padding: 4px 9px; font-size: 12.5px; }

/* ---------- Formularios ---------- */
label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
input, select, textarea {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-teal) 70%, #000);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 18%, transparent);
}
/* v4.09 (Ana Belén, Formación, 29-09-2026, N21): style.css da width:100% a todo
   input; en un círculo o casilla dentro de una fila flex eso se comía el ancho del
   campo de texto de al lado (banco del test de ALBAÑILERÍA con opciones ilegibles). */
input[type="checkbox"], input[type="radio"] { box-shadow: none; width: auto; padding: 0; flex: 0 0 auto; }
/* Filas de opción del banco de preguntas: círculo + campo ancho + quitar. */
.bq-opcion { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.bq-opcion input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; }
@media (max-width: 700px) { .bq-opcion input[type="text"] { font-size: 16px; } }
/* v4.09 (N18): lista de cursos de interés de la bolsa, con el nombre entero y su duración. */
.bolsa-cursos-lista { max-height: 240px; overflow-y: auto; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: var(--radius-sm); padding: 4px 8px; margin-top: 6px; }
.bolsa-curso { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 400; color: var(--text-primary); margin: 4px 0; cursor: pointer; }
.bolsa-curso input { margin-top: 3px; }
.bolsa-curso span { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.35; }
.bolsa-cursos-elegidos { margin-top: 4px; }
/* v4.14 (Ana Belén, Formación, 30-09-2026, N18): selector de curso con el nombre ENTERO y su
   duración. El <select> nativo cortaba el texto (campo cerrado y rueda del móvil): aquí salta de línea. */
.sel-largo { position: relative; min-width: 0; }
.sel-largo__actual {
  display: block; width: 100%; min-height: 38px; text-align: left; white-space: normal; overflow-wrap: anywhere;
  line-height: 1.35; font-weight: 400; color: var(--text-primary); background: var(--surface-1, #fff);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 28px 8px 10px; position: relative; cursor: pointer;
}
.sel-largo__actual::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.sel-largo__panel {
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; width: max(100%, min(460px, 92vw)); max-width: 92vw;
  background: var(--surface-1, #fff); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px;
}
.sel-largo--inline .sel-largo__panel { position: static; width: 100%; max-width: none; box-shadow: none; margin-top: 4px; }
.sel-largo__q { margin-bottom: 6px; }
.sel-largo__lista { max-height: min(50vh, 320px); overflow-y: auto; }
.sel-largo__item, .sel-largo__vacio { padding: 7px 8px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; font-size: 13.5px; border-radius: var(--radius-sm); }
.sel-largo__item { cursor: pointer; }
.sel-largo__item:hover, .sel-largo__item.activo { background: var(--brand-teal-wash); }
.sel-largo__vacio { color: var(--text-muted); }
.filtros .field.campo-curso { flex: 1 1 340px; min-width: 260px; max-width: 560px; }
@media (max-width: 700px) {
  .filtros .field.campo-curso { min-width: 0; max-width: none; flex: 1 1 100%; }
  .sel-largo__panel { left: 0; right: 0; width: auto; }
  .sel-largo__q { font-size: 16px; }   /* sin zoom automático en el iPhone */
}

/* ---------- Tablas ---------- */
table { font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, .03);
  white-space: nowrap;
}
thead th:first-child { border-top-left-radius: var(--radius-sm); }
thead th:last-child { border-top-right-radius: var(--radius-sm); }
tbody tr:hover td { background: rgba(0, 0, 0, .02); }
td .mini, td .muted { color: var(--text-muted); }

/* Toda tabla ancha se desplaza dentro de su tarjeta en vez de salirse. */
.card { overflow-x: auto; }
.card:has(.buscador-global__res), .card.sin-scroll { overflow: visible; }

/* ---------- Etiquetas ---------- */
.badge { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* ---------- Pestañas: control segmentado en una sola línea ---------- */
.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px;
  margin-bottom: 18px;
  background: rgba(0, 0, 0, .05);
  border: none;
  border-radius: var(--radius-md);
  scrollbar-width: thin;
}
.tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
  padding: 6px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
}
.tabs button:hover { background: rgba(255, 255, 255, .6); border: none; color: var(--text-primary); }
.tabs button.selected {
  background: #fff;
  color: var(--text-primary);
  box-shadow: var(--shadow-pop);
  border: none;
}

/* ---------- Menú lateral neutro (el color de familia, solo un punto) ---------- */
.sidebar { background: var(--surface-1); }
.sb-fam__btn {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  border-left: none;
  padding: 8px 6px 8px 10px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.sb-fam__btn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fam);
  opacity: .55;
  flex-shrink: 0;
}
.sb-fam__cab:hover .sb-fam__btn, .sb-fam__cab:hover .sb-caret { background: var(--ink-hover); color: var(--text-primary); }
.sb-fam.activa .sb-fam__btn { color: var(--text-primary); font-weight: 600; background: transparent; }
.sb-fam.activa .sb-fam__btn::before { opacity: 1; }
.sb-fam.activa .sb-caret { background: transparent; }
.sb-fam__items { padding: 2px 0 6px 14px; }
.sb-fam__items a, .sb-fam__items .nav-form button {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-secondary);
  border-left: none;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.sb-fam__items a:hover, .sb-fam__items .nav-form button:hover { background: var(--ink-hover); color: var(--text-primary); }
.sb-fam__items a.active { background: var(--ink-active); color: var(--text-primary); font-weight: 600; }
.sb-colapsar:hover { background: var(--ink-hover); color: var(--text-primary); }

/* ---------- Ventanas (modales) ---------- */
.firma-modal__panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); border: 1px solid var(--border); }

/* Menú lateral algo más ancho: «Vigilancia de la salud» y «Agenda de contactos» enteros. */
:root { --sidebar-w: 224px; }

/* =====================================================================
   v3.93 · Vocabulario común de pantalla (fase 2 del diseño). Toda pantalla
   interna sigue el mismo esqueleto:
     <div class="page-head">
       <div><h1>Título <span class="page-count">12</span></h1>
            <p class="page-sub">Una frase de qué es.</p></div>
       <div class="page-actions">…botones (el principal, el último)…</div>
     </div>
     <div class="filtros">…campos pequeños en una fila…</div>
     <div class="card tabla-card"><table>…</table></div>
   ===================================================================== */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.page-head h1 { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.page-head .page-sub, .page-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; max-width: 72ch; }
.page-count { font-size: 15px; font-weight: 400; color: var(--text-muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Barra de filtros: campos compactos en una fila que se parte sola. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin: 0 0 14px;
}
.filtros .field { margin: 0; min-width: 150px; flex: 0 1 auto; }
.filtros input[type="search"], .filtros .buscar { min-width: 240px; }
.filtros label.check:not(.m-0) { margin-right: 12px; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text-secondary); white-space: nowrap; margin: 0 0 9px; }
.filtros label.check input { width: auto; }

/* Tarjeta que solo contiene una tabla: sin relleno, la tabla llega al borde. */
.card.tabla-card { padding: 0; }
.card.tabla-card > table th:first-child, .card.tabla-card > table td:first-child,
.card.tabla-card .chart-scroll table th:first-child, .card.tabla-card .chart-scroll table td:first-child { padding-left: 16px; }
.card.tabla-card > table th:last-child, .card.tabla-card > table td:last-child { padding-right: 16px; }
.card.tabla-card thead th { border-radius: 0; }
.card.tabla-card tbody tr:last-child td { border-bottom: none; }
.card.tabla-card .empty-hint { padding: 20px 16px; margin: 0; }

/* Fichas de datos (como las StatTile de FANSpower). */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 16px; }
.stat { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat__titulo { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.stat__valor { font-size: 24px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat__pie { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
a.stat, button.stat { display: block; text-align: left; color: inherit; text-decoration: none; cursor: pointer; }
a.stat:hover, button.stat:hover { background: rgba(0, 0, 0, .02); }

/* Estado con punto de color (más discreto que una pastilla). */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.estado.ok::before { background: var(--status-good); }
.estado.aviso::before { background: var(--status-warning); }
.estado.mal::before { background: var(--status-critical); }
.estado.info::before { background: var(--series-1); }

/* Ayudas pequeñas para sustituir los style="…" más repetidos. */
.muted { color: var(--text-muted); }
.txt-ok { color: var(--status-good); }
.txt-aviso { color: var(--status-warning); }
.txt-mal { color: var(--status-critical); }
.num, .text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fila-fin { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.crece { flex: 1; min-width: 0; }
.w-auto { width: auto; }
.oculto { display: none; }
.clic { cursor: pointer; }

/* Avisos dentro de una pantalla (en vez de cajas de colores hechas a mano). */
.aviso-caja { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; margin: 0 0 12px; border: 1px solid transparent; }
.aviso-caja.info { background: color-mix(in srgb, var(--series-1) 7%, #fff); border-color: color-mix(in srgb, var(--series-1) 20%, transparent); }
.aviso-caja.ok { background: color-mix(in srgb, var(--status-good) 7%, #fff); border-color: color-mix(in srgb, var(--status-good) 25%, transparent); }
.aviso-caja.aviso { background: color-mix(in srgb, var(--status-warning) 9%, #fff); border-color: color-mix(in srgb, var(--status-warning) 30%, transparent); }
.aviso-caja.mal { background: color-mix(in srgb, var(--status-critical) 7%, #fff); border-color: color-mix(in srgb, var(--status-critical) 25%, transparent); }

@media (max-width: 700px) {
  .page-head { flex-direction: column; }
  .filtros .field, .filtros input[type="search"], .filtros .buscar { min-width: 0; flex: 1 1 100%; }
}

/* v3.93 · Piezas pedidas por la primera tanda de pantallas. */
.txt-serio { color: var(--status-serious); }
.barra { height: 6px; background: rgba(0, 0, 0, .06); border-radius: 999px; overflow: hidden; min-width: 60px; }
.barra__relleno { height: 100%; background: var(--brand-teal); border-radius: 999px; }
.bloque-suave { background: var(--brand-teal-wash); padding: 12px; border-radius: var(--radius-md); margin-top: 10px; }
.dato-fila { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--row-line); font-size: 13.5px; }
.dato-fila:last-child { border-bottom: none; }
.dato-fila__k { flex: 0 0 38%; color: var(--text-muted); }
label.check:not(.m-0) { margin-right: 12px; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text-primary); text-transform: none; }
label.check input { width: auto; margin: 0; }
.field.flex-2 { flex: 2; }
.fila-base { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* v3.93 · Más piezas pedidas por la primera tanda. */
.kpis.compactas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.span-full { grid-column: 1 / -1; }
.fw-normal { font-weight: 400; }
.lista-sangria { margin: 6px 0 0 18px; padding-left: 0; }
.mini { font-size: 12px; }
.ml-1 { margin-left: 4px; } .gap-1 { gap: 4px; }
.alinear-arriba { align-items: flex-start; }
.firma-img { max-width: 300px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; background: #fff; }
.firma-modal__panel.estrecho { max-width: 460px; }
.card.tabla-card > div > table th:first-child, .card.tabla-card > div > table td:first-child { padding-left: 16px; }
.card.tabla-card .chart-scroll table th:last-child, .card.tabla-card .chart-scroll table td:last-child { padding-right: 16px; }
.card.tabla-card > div > table th:last-child, .card.tabla-card > div > table td:last-child { padding-right: 16px; }

/* Parte de visita en el móvil: Guardar / Firmar siempre a mano, pegado abajo. */
@media (max-width: 700px) {
  #acciones-parte {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--page-plane) 92%, transparent);
    backdrop-filter: blur(6px);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* v3.93 · Piezas pedidas por la segunda tanda. */
.separador-sup { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--row-line); }
.nota-titulo { font-weight: 400; font-size: 13px; color: var(--text-muted); }
.atenuada { opacity: .6; }
.caja-scroll { max-height: 140px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; }
.fila-entre { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.col-ancha { max-width: 320px; }

/* v3.93 · Barra superior en el móvil: sin la almohadilla de esquina (ya está el
   logo), buscador compacto que se abre al tocarlo y selector «Actuando como»
   estrecho, para que nada se monte. */
@media (max-width: 700px) {
  .corner-hashtag { display: none; }
  .topbar__derecha { gap: 6px; min-width: 0; }
  .buscador-global input { width: 38px; padding-left: 8px; padding-right: 4px; color: transparent; }
  .buscador-global input::placeholder { color: var(--text-muted); }
  .buscador-global input:focus { width: 62vw; max-width: none; color: var(--text-primary); position: relative; z-index: 45; }
  .tecnico-selector select { max-width: 96px; }
  .user-name { display: none; }
}
@media (max-width: 700px) {
  .topbar__derecha .btn-manual, .topbar__derecha .nav-form--salir { display: none; }   /* están en el menú lateral */
  .app-header__inner { overflow: hidden; }
  .fichaje-chip { font-size: 12px; padding: 3px 8px; }
}
@media (max-width: 700px) {
  /* El chip de fichaje, solo punto + tiempo (tocarlo lleva a Fichaje); el logo algo menor. */
  .fichaje-chip__btn, .fichaje-chip__txt { display: none; }
  .brand .logo { height: 22px; width: auto; }
}
@media (max-width: 420px) {
  .brand .logo { height: 18px; }
  .fichaje-chip__tiempo { display: none; }
  .fichaje-chip__estado { padding: 6px; }
  #sidebar-toggle, #btn-atras-global { padding-left: 6px; padding-right: 6px; }
}

/* v3.93 · Piezas pedidas por la última tanda. */
.pre { white-space: pre-wrap; }
.tachado { text-decoration: line-through; }
.txt-info { color: var(--series-1); }
.caja-firma { border: 1px dashed rgba(0, 0, 0, .25); border-radius: var(--radius-sm); background: #fff; touch-action: none; }

/* v3.93 · Nombres de color que usaban algunas pantallas y no existían (salían sin color). */
:root { --danger: var(--status-critical); --success: var(--status-good); --muted: var(--text-muted); --warning: var(--status-warning); }
.status-dot.info { background: var(--series-1); }
@media print { .page-actions, .filtros { display: none !important; } }

/* v4.17 (Ana Belén, Formación, 30-09-2026): ficha del curso por bloques bien diferenciados. */
.ficha-curso { max-width: min(980px, 97vw) !important; }
.curso-indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; position: sticky; top: -18px; background: var(--surface-1); padding: 6px 0; z-index: 3; border-bottom: 1px solid var(--border); }
.curso-indice a { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--wash, #eef6f4); color: var(--text-primary); text-decoration: none; border: 1px solid var(--border); }
.curso-indice a:hover { border-color: var(--brand-teal, #2F8F82); }
.curso-bloque { border: 1px solid var(--border); border-left: 4px solid var(--brand-teal, #2F8F82); border-radius: var(--radius-md, 10px); padding: 12px 14px; margin: 0 0 14px; background: var(--surface-1); scroll-margin-top: 48px; }
.curso-bloque__titulo { margin: 0 0 8px; font-size: 16px; }
.curso-bloque > div > h3:first-child, .curso-bloque > div > details:first-child { margin-top: 0; }
#bq-aula { border-left-color: #5b6ee1; }
#bq-fundae { border-left-color: #d98e04; }
#bq-tramites { border-left-color: #7a5ab8; }
#bq-facturacion { border-left-color: #1a7f3c; }
#bq-documentos { border-left-color: #8a8a8a; }
.curso-bloque:has(> #curso-facturacion:empty), .curso-bloque:has(> #curso-tramites:empty),
.curso-bloque:has(> #curso-formador:empty) { display: none; }
.curso-datos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (max-width: 760px) { .curso-datos { grid-template-columns: 1fr; } }
details.au-plegable { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2, #fafafa); }
details.au-plegable > summary { list-style-position: inside; }
.curso-web-caja { display: inline-flex; gap: 4px; align-items: center; margin-top: 4px; cursor: pointer; white-space: nowrap; }
.enlace-curso-caja { border: 1px dashed var(--brand-teal, #2F8F82); border-radius: 8px; padding: 8px 10px; background: #f3faf8; }

/* v4.27 (Ana Belén, Formación, 04-10-2026, «Ampliar ventana de ficha del curso»): la ficha
   ocupa casi toda la pantalla en el ordenador; cabecera, acciones e índice quedan fijos
   arriba y solo el contenido se desplaza. En el móvil, pantalla completa. */
.firma-modal__panel.ficha-curso { width: 98vw; max-width: min(1600px, 98vw) !important; height: 96vh; max-height: 96vh;
  display: flex; flex-direction: column; overflow: hidden; padding: 14px 20px 0; }
.ficha-curso__cabeza { flex: 0 0 auto; border-bottom: 1px solid var(--border); }
.ficha-curso__cabeza .curso-indice { position: static; border-bottom: 0; margin: 0 0 8px; padding: 0; }
.ficha-curso__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 4px 28px; }
.ficha-curso__cuerpo .curso-bloque { scroll-margin-top: 8px; }
.ficha-curso__cuerpo .tabla, .ficha-curso__cuerpo table { max-width: 100%; }
.ficha-curso__cuerpo .curso-bloque > div { overflow-x: auto; }
@media (min-width: 1280px) { .curso-datos { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (max-width: 760px) {
  #curso-modal { padding: 0; align-items: stretch; }
  .firma-modal__panel.ficha-curso { width: 100vw; max-width: 100vw !important; height: 100vh; height: 100dvh;
    max-height: 100dvh; border-radius: 0; padding: 10px 10px 0; }
  .ficha-curso__cabeza #curso-acciones, .ficha-curso__cabeza .curso-indice { flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .ficha-curso__cabeza #curso-acciones > * , .ficha-curso__cabeza .curso-indice a { flex: 0 0 auto; white-space: nowrap; }
  .ficha-curso__cabeza h2 { font-size: 17px; }
}
/* v4.27 (Ana Belén, «Recuento y Excel de consultas») */
.recuento-listado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.recuento-numero { font-weight: 700; }
/* v4.27 (Ana Belén, «Indicador de cursos publicados») */
.web-marca { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; margin-top: 3px; white-space: nowrap; }
.web-marca.web-si { background: #e3f4ea; color: #17643a; border: 1px solid #b9e2c8; }
.web-marca.web-no { background: #fff3dc; color: #8a5a00; border: 1px solid #f1d49a; }
.web-estado { border-radius: 8px; padding: 8px 10px; margin: 2px 0; font-size: 13px; }
.web-estado.web-si { background: #e9f6ee; border: 1px solid #b9e2c8; }
.web-estado.web-no { background: #fff6e5; border: 1px solid #f1d49a; }
.web-estado ul { margin: 4px 0 0 18px; padding: 0; }
/* v4.27 (Ana Belén, «Histórico de empresas del alumno») */
.hist-empresas td.sin-datos { color: #8a5a00; font-style: italic; }


/* v4.20 (Ana Belén, Formación, 01-10-2026, punto 9): panel del departamento por
   secciones de prioridad. Los bloques son <details class="bloque-ficha"> que
   crecen con su contenido: sin alturas máximas ni barras de desplazamiento
   internas; en el móvil las tablas se apilan en fichas en vez de desbordar. */
.dpto-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dpto-resumen:empty { display: none; }
.dpto-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-primary, inherit); background: var(--surface-1); border: 1px solid var(--border); }
.dpto-chip.urgente { background: #FDEDEC; color: #b03434; border-color: #f3c4c0; }
.dpto-chip.pendiente { background: #FDF0E4; color: #b2531a; border-color: #f2cfae; }
.dpto-chip.ok { background: #EAF6EA; color: #0f6d0f; border-color: #bfe3bf; }
.dpto-seccion { margin: 0 0 22px; }
.dpto-seccion__titulo { font-size: 18px; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
.dpto-seccion--urgente .dpto-seccion__titulo { border-bottom-color: #f3c4c0; }
.dpto-seccion--nada .dpto-seccion__titulo { color: var(--text-muted); border-bottom-style: dashed; }
.dpto-seccion > .subtitle { margin: 6px 0 10px; }
details.dpto-bloque > summary { flex-wrap: wrap; }
details.dpto-bloque > summary .dpto-cuenta { min-width: 26px; text-align: center; }
details.dpto-bloque > summary .bloque-resumen { margin-left: 0; }
details.dpto-bloque .dpto-bloque__cuerpo { padding: 0 0 14px; max-height: none; overflow: visible; }
details.dpto-bloque .dpto-bloque__cuerpo .subtitle { margin-bottom: 10px; }
details.dpto-bloque--vacio { opacity: .75; }
details.dpto-bloque--vacio > summary .bloque-resumen { font-style: italic; }
.dpto-avisos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dpto-avisos a { display: flex; gap: 8px; align-items: flex-start; text-decoration: none; color: inherit; padding: 4px 6px; border-radius: 6px; }
.dpto-avisos a:hover { background: rgba(0, 0, 0, .03); }
.dpto-avisos a > span:last-child { overflow-wrap: anywhere; }
.dpto-ranking { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.dpto-ranking > div { min-width: 0; }
table.dpto-tabla { width: 100%; }
table.dpto-tabla td { overflow-wrap: anywhere; }
table.dpto-tabla tr[hidden] { display: none !important; }
.dpto-ver-todos { margin-top: 8px; }
@media (max-width: 700px) {
  table.dpto-tabla thead { display: none; }
  table.dpto-tabla, table.dpto-tabla tbody, table.dpto-tabla tr, table.dpto-tabla td { display: block; width: 100%; }
  table.dpto-tabla tr { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
  table.dpto-tabla td { border: none; padding: 3px 0; text-align: left; }
  table.dpto-tabla td.nowrap { white-space: normal; }
  table.dpto-tabla td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text-muted); font-size: 12px; }
  details.dpto-bloque > summary h2 { font-size: 15px; }
}
/* v4.20 (Ana Belén, Formación, 01-10-2026, punto 3): barra de desplazamiento
   horizontal encima de una tabla ancha, sincronizada con la de abajo. */
.barra-scroll-arriba { overflow-x: auto; overflow-y: hidden; height: 14px; margin: 0 0 4px; }
.barra-scroll-arriba > div { height: 1px; }
/* v4.20 (punto 2): columna de alarmas del listado de cursos. */
.curso-alarma { cursor: help; font-size: 16px; line-height: 1; }
.curso-alarma.ambar { filter: saturate(.6); }
.curso-alarma-n { font-size: 11px; font-weight: 600; color: var(--status-critical); margin-left: 2px; }

/* v4.24 (Ana Belén, Dpto. Técnico, 01-10-2026, peticiones 08, 15 y 16): diario de actuaciones
   legible sin hacer zoom. Escritorio: letra de lectura (15 px) y observaciones con aire.
   Móvil (≤ 700 px): una tarjeta por actuación a todo el ancho, sin desplazamiento lateral. */
.diario-tabla th, .diario-tabla td { padding: 10px 12px; font-size: 15px; vertical-align: top; }
.diario-tabla th { font-size: 12.5px; }
.diario-tabla .badge, .diario-tarjeta .badge { font-size: 13px; padding: 3px 10px; }
.diario-tabla .diario-obs { min-width: 300px; max-width: 560px; white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.diario-tabla td .badge { white-space: normal; max-width: 190px; line-height: 1.3; }
.diario-tabla td:first-child { width: 1%; }
.diario-hora, .diario-sub { font-size: 13px; color: var(--text-muted); }
.diario-tarjetas { display: none; }
.diario-parte { text-decoration: none; }
@media (max-width: 700px) {
  .diario-tabla { display: none; }
  .diario-tarjetas { display: block; }
  .diario-tarjeta { padding: 12px 14px; border-bottom: 1px solid var(--row-line, var(--gridline)); }
  .diario-tarjeta:last-child { border-bottom: none; }
  #ficha-diario .diario-tarjeta { padding-left: 0; padding-right: 0; }
  .diario-tarjeta__cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
  .diario-tarjeta__fecha { font-size: 16px; font-weight: 700; }
  .diario-tarjeta__empresa { display: block; font-size: 16px; font-weight: 600; margin-top: 4px; overflow-wrap: anywhere; }
  .diario-tarjeta .diario-obs { font-size: 16px; line-height: 1.5; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .diario-tarjeta__pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .diario-tarjeta__pie .diario-sub { font-size: 14px; margin-right: auto; }
  .diario-tarjeta__acciones { display: inline-flex; gap: 4px; }
  .diario-tarjeta__acciones button { min-width: 40px; min-height: 36px; font-size: 16px; }
  /* Filtros de /actuaciones de dos en dos: menos pantalla antes de llegar a lo importante. */
  .filtros.filtros-diario { gap: 8px; }
  .filtros.filtros-diario .field { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .filtros.filtros-diario .field.ancho-total { flex-basis: 100%; }
  #resumen { font-size: 14px; }
}
/* v4.24 (Ana Belén, Formación, 01-10-2026): incidencias del curso en la cabecera de la
   ficha y dentro del bloque al que corresponden (trámites, alumnos, docente, facturación…). */
.curso-incidencias-cab, .curso-incidencias-bq { border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; border: 1px solid #f2cfae; background: rgba(242, 153, 74, .10); }
.curso-incidencias-cab.rojo, .curso-incidencias-bq.rojo { border-color: #f3c4c0; background: rgba(214, 69, 65, .09); }
.curso-incidencias-cab ul, .curso-incidencias-bq ul { margin: 4px 0 0; }
.curso-incidencias-bq { padding: 6px 10px; font-size: 13px; }
.curso-incidencia { margin: 2px 0; }
.curso-incidencia.rojo { font-weight: 600; }
.curso-incidencia-ir { margin-left: 6px; white-space: nowrap; }
.curso-indice a.con-incidencia { border-color: #f3c4c0; }

/* v4.29 (Ana Belén, Formación, 05-10-2026): bloque «💶 Economía del curso». */
.eco-estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.eco-estados > div { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; min-width: 0; }
.eco-estados .estado { white-space: normal; }
.eco-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.eco-columnas > div { min-width: 0; }
@media (max-width: 700px) { .eco-columnas { grid-template-columns: 1fr; } }

/* v4.32 (Ana Belén, Formación, 05-10-2026, «Visualizar listado de colaboradores»):
   tablas anchas que se pueden recorrer sin perder el nombre. La caja tiene altura
   máxima (la barra horizontal queda siempre a la vista), la cabecera y la primera
   columna se quedan fijas y, si hay desplazamiento horizontal, sale también una
   barra arriba (tablaFija() en common.js). */
.chart-scroll.tabla-fija { max-height: 72vh; overflow: auto; }
.tabla-fija > table { border-collapse: separate; border-spacing: 0; }
.tabla-fija thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-1); box-shadow: 0 1px 0 var(--gridline); }
.tabla-fija tbody td:first-child, .tabla-fija thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface-1);
  box-shadow: 6px 0 8px -6px rgba(31, 35, 33, .18);
  min-width: 170px; max-width: 280px;
}
.tabla-fija thead th:first-child { z-index: 3; }
.tabla-fija tbody tr:hover td, .tabla-fija tbody tr:hover td:first-child { background: var(--brand-teal-wash); }
.tabla-fija tbody tr.seleccionada td, .tabla-fija tbody tr.seleccionada td:first-child { background: var(--brand-teal-wash); }
.tabla-fija td.acciones-flex { white-space: normal; }
.tabla-fija td.acciones-flex > .acciones-caja { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px; max-width: 260px; }
.barra-scroll-arriba { overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 2px; }
.barra-scroll-arriba > div { height: 1px; }