/* Estética MiD.es: Poppins (autoalojada; la CSP no permite fuentes externas),
   azul eléctrico #0d2ce2 y violeta #532af6 sobre blanco. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-700.woff2') format('woff2');
}

:root {
  --azul: #0d2ce2;        /* azul eléctrico MiD */
  --azul-osc: #0a1fae;
  --violeta: #532af6;     /* acento violeta MiD */
  --azul-claro: #e8ecfd;
  --fondo: #f5f6fb;
  --carta: #ffffff;
  --texto: #222222;
  --texto-suave: #6a7684;
  --borde: #e0e0e6;
  --ok: #1e7d4e;
  --ok-bg: #e2f4ea;
  --error: #b3362c;
  --error-bg: #fbe8e6;
  --warn-bg: #fdf3e0;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(13, 44, 226, .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* El atributo hidden debe ganar SIEMPRE, también en elementos con display propio (label, .btn…). */
[hidden] { display: none !important; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0; }
h2.h2 { font-size: 17px; margin: 18px 0 10px; color: var(--texto-suave); }
/* Optimizado para 1920×1080: aprovecha el ancho para que las tablas respiren. */
.wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 24px; }
main.wrap { flex: 1; padding-top: 10px; padding-bottom: 40px; }

/* ---- barra superior (blanca, como la cabecera de mid.es) ---- */
.topbar { background: #fff; color: var(--texto); border-bottom: 1px solid var(--borde); box-shadow: 0 1px 4px rgba(13,44,226,.05); }
.topbar-in { display: flex; align-items: center; gap: 22px; min-height: 60px; flex-wrap: wrap; }
.brand { color: #111; font-size: 20px; font-weight: 700; letter-spacing: .3px; }
.brand span { font-weight: 500; color: var(--violeta); }
.brand:hover { text-decoration: none; }
.mainnav { display: flex; gap: 4px; flex: 1; }
.mainnav a { display: inline-flex; align-items: center; gap: 7px; color: var(--texto); padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; }
.mainnav a:hover { background: var(--azul-claro); color: var(--azul); text-decoration: none; }
.mainnav a.on { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.ico { width: 18px; height: 18px; flex: none; }
.usermenu { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.usermenu .uname { color: var(--texto-suave); }
/* Menú móvil: hamburguesa a la derecha del todo + desplegable con el texto del menú. */
.topbar { position: relative; }
.nav-burger { display: none; border: none; background: transparent; padding: 6px; border-radius: 8px; color: var(--texto); cursor: pointer; }
.nav-burger .ico { width: 22px; height: 22px; }
.nav-burger:hover { background: var(--azul-claro); color: var(--azul); }
.mobilemenu { display: none; position: absolute; top: 100%; right: 8px; left: 8px; z-index: 60; background: #fff;
  border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 30px rgba(13,44,226,.18); padding: 6px; }
.mobilemenu a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--texto); }
.mobilemenu a.on, .mobilemenu a:hover { background: var(--azul-claro); color: var(--azul); text-decoration: none; }
.mobilemenu .ico { width: 20px; height: 20px; }

/* rueda dentada (ajustes) */
.gear { position: relative; }
.gear summary { list-style: none; cursor: pointer; color: var(--texto-suave); display: inline-flex; padding: 6px; border-radius: 8px; }
.gear summary::-webkit-details-marker { display: none; }
.gear summary:hover { background: var(--azul-claro); color: var(--azul); }
.gear[open] summary { background: var(--azul-claro); color: var(--azul); }
.gear .ico { width: 20px; height: 20px; }
.gear-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 28px rgba(16,42,54,.18);
  min-width: 200px; padding: 6px; display: flex; flex-direction: column;
}
.gear-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-suave); padding: 6px 10px 4px; }
.gear-menu a { color: var(--texto); padding: 9px 10px; border-radius: 7px; font-size: 14px; }
.gear-menu a:hover { background: var(--fondo); text-decoration: none; color: var(--azul); }
.gear-sep { border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 9px !important; }
.gear-ro { font-size: 12px; color: var(--texto-suave); padding: 4px 10px 8px; }

/* fieldset de la ficha (solo lectura para profesores) */
.nofs { border: none; margin: 0; padding: 0; min-inline-size: auto; }
.nofs[disabled] input, .nofs[disabled] select, .nofs[disabled] textarea { background: #f0f3f5; color: #55636b; cursor: not-allowed; opacity: 1; }

/* ---- cabecera de página ---- */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 10px; flex-wrap: wrap; }
.pagehead h1 { margin: 0; }
.pagehead .count { color: var(--texto-suave); font-weight: 400; font-size: 18px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.intro { color: var(--texto-suave); max-width: 70ch; margin-top: 0; }
.intro code { background: var(--azul-claro); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ---- tarjetas ---- */
.card { background: var(--carta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.card.stat { text-align: center; padding: 20px 10px; transition: transform .08s ease; }
.card.stat:hover { transform: translateY(-2px); text-decoration: none; }
.stat-n { font-size: 34px; font-weight: 700; color: var(--azul); line-height: 1.1; }
.stat-l { color: var(--texto-suave); font-size: 13.5px; margin-top: 4px; }
.stat-warn { background: var(--warn-bg); }
.stat-muted .stat-n { color: var(--texto-suave); }
.card.empty { text-align: center; color: var(--texto-suave); padding: 34px 18px; }
.cards-top .stat-total { background: linear-gradient(135deg, var(--azul), var(--violeta)); border-color: var(--azul); }
.cards-top .stat-total .stat-n { color: #fff; }
.cards-top .stat-total .stat-l { color: #d9defb; }
.cards-top .stat-mid { background: var(--azul-claro); border-color: #c6cff8; }

/* subestadísticas y tarjetas de curso por programa */
.substats { margin: 4px 0 8px; font-size: 13.5px; color: var(--texto-suave); }
.substats a { color: var(--texto-suave); text-decoration: underline; }
.cursos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.prog-card { padding: 14px 16px; }
.prog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.prog-total { font-size: 22px; font-weight: 700; color: var(--azul); }
.cursolist { list-style: none; margin: 0; padding: 0; }
.cursolist li { border-top: 1px solid #edf1f4; }
.cursolist a { display: flex; justify-content: space-between; align-items: center; padding: 9px 2px; color: var(--texto); }
.cursolist a:hover { text-decoration: none; color: var(--azul); }
.cursolist .cl-n { font-weight: 700; min-width: 28px; text-align: right; }
.cursolist .cl-sin .cl-label { color: var(--texto-suave); }

/* lista de la promoción entrante (panel de control) */
.proxlist { list-style: none; margin: 6px 0 0; padding: 0; }
.proxlist li { border-top: 1px solid #edf1f4; }
.proxlist a { display: flex; align-items: center; gap: 10px; padding: 7px 2px; color: var(--texto); font-size: 14px; }
.proxlist a:hover { text-decoration: none; color: var(--azul); }
.prox-vacio { color: var(--texto-suave); font-size: 13.5px; margin: 10px 2px 2px; }

.b-prog-orto { background: #e3edfb; color: #2456a6; }
.b-prog-int { background: #e8f5e4; color: #2e7d32; }
.b-prog-impl { background: #fdeede; color: #b5651d; }
/* Las dos marcas, con los colores del logo: «MRA» en oscuro y «CRM»/MiD en morado
   (Manuel, 22-23/08/2026). En azul, MRA se perdía entre los enlaces y los otros badges. */
.b-marca-mid { background: #ece6fe; color: var(--violeta); }
/* MRA en NEGRO con letra blanca (Manuel, 31/08/2026): el gris claro de antes no se veía
   sobre el fondo de las tarjetas. Negro como el «MR» del logo. */
.b-marca-mra { background: #1f2430; color: #fff; }
/* «Alumno MiD» / «Alumno MRA», al lado del nombre en su ficha: relleno, no clarito, que la
   idea es que se vea de un vistazo que esta persona ya es alumno (Manuel, 23/08/2026). */
.b-alumno-mid { background: var(--violeta); color: #fff; font-weight: 700; }
.b-alumno-mra { background: #1f2430; color: #fff; font-weight: 700; }
.grupo-txt { font-size: 13px; color: var(--texto-suave); }

/* ---- flash ---- */
.flash { padding: 11px 15px; border-radius: 8px; margin-bottom: 16px; font-size: 14.5px; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-error { background: var(--error-bg); color: var(--error); }

/* ---- botones ---- */
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--borde);
  background: #fff; color: var(--texto); font-size: 14.5px; cursor: pointer; font-family: inherit;
}
.btn:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.btn-primary { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--azul-osc); color: #fff; }
.btn-danger { border-color: #e5b5b1; color: var(--error); }
.btn-ok { border-color: #a9dcbc; color: var(--ok); }
.btn-ok:hover { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.btn-exito { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn-exito:hover { background: #16613c; border-color: #16613c; color: #fff; }
.btn-danger:hover { background: var(--error-bg); border-color: var(--error); }
.btn-quiet { border: none; background: none; color: var(--texto-suave); }
.btn-block { width: 100%; }
.btn-file { text-align: center; }
.navprevnext { display: inline-flex; gap: 4px; }
.navprevnext .btn { padding: 9px 13px; font-size: 16px; line-height: 1; }
.btn-off { display: inline-block; padding: 9px 13px; border: 1px solid var(--borde); border-radius: 8px; color: #c3ccd2; font-size: 16px; line-height: 1; cursor: default; }

/* ---- filtros / chips ---- */
.filters { display: flex; gap: 10px; padding: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.filters input[type="search"] { flex: 1; min-width: 120px; }
/* Reparto en dos: ~3/5 filtros (izquierda) y ~2/5 buscador (derecha), que aprovecha el ancho. */
.filterbar { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.filterbar-filtros { flex: 3 1 0; min-width: 0; }
.filterbar-filtros .chips { margin-bottom: 8px; }
.filterbar-filtros .chips:last-child { margin-bottom: 0; }
.filterbar-buscar { flex: 2 1 0; min-width: 0; }
.filterbar-buscar .filters { margin: 0; }
@media (max-width: 820px) {
  .filterbar { flex-direction: column; }
  .filterbar-buscar { flex-basis: auto; width: 100%; }
}
/* Doctores (alumnos.php): el buscador manda — a la izquierda y grande; los filtros van a la
   derecha y en segundo plano, que apenas se usan (Manuel, 22/07/2026). Se centran en vertical
   para que la segunda fila de filtros (Todos/Alumnos…) quede al nivel del buscador. */
.filterbar-doc { align-items: flex-start; }
.filterbar-doc .doc-titulo { margin: 0 0 12px; }
.filterbar-doc .doc-titulo .count { color: var(--texto-suave); font-weight: 400; font-size: 18px; }
/* La columna del buscador va en bloque (título arriba, buscador debajo a lo ancho): en flex el
   formulario se encogía y el buscador salía enano (Manuel, 23/07/2026). */
.filterbar-doc .filterbar-buscar { display: block; }
.filterbar-doc .filterbar-buscar form { width: 100%; }
.filterbar-doc .filterbar-buscar { order: 0; flex: 1 1 0; }
.filterbar-doc .filterbar-filtros { order: 1; flex: 1 1 0; }
.filterbar-doc .filterbar-buscar .buscar-row { display: flex; gap: 8px; width: 100%; }
.filterbar-doc .filterbar-buscar input[type="search"] { flex: 1 1 auto; padding: 11px 16px; border-radius: 999px; font-size: 15px; }
.filterbar-doc .filterbar-buscar .btn { padding: 11px 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.chips-2 { margin-top: -6px; }
.chips-3 { margin-top: -6px; }
/* Barra separadora entre el 1er nivel y los filtros de profesor (justo a continuación). */
.chips-sep { align-self: center; width: 0; height: 24px; border-left: 1.5px solid #d0d5dd; margin: 0 2px; }
.promo-form { display: inline; margin: 0; }
.promo-select { width: auto; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--borde); font-size: 13.5px; color: var(--texto-suave); background: #fff; height: auto; }
.promo-select:focus { border-color: var(--azul); }
.promo-select.on { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.chip {
  padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--borde);
  color: var(--texto-suave); font-size: 13.5px;
}
.chip:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.chip.on { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.chip-clear { border-color: #e5b5b1; color: var(--error); }
.chip-clear:hover { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.intro-mt { margin-top: 16px; }

/* ---- tabla ---- */
.tablecard { padding: 0; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; padding: 11px 9px; color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 9px 9px; border-bottom: 1px solid #edf1f4; vertical-align: middle; }
/* Email largo: recortado con puntos suspensivos para que no ensanche la tabla (el correo completo sigue en el enlace). */
.tabla td[data-label="Email"] { max-width: 210px; }
.tabla td[data-label="Email"] a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tr.rowlink { cursor: pointer; }
.tabla tr.rowlink:hover { background: #f5f7fe; }
/* Teléfono: número + icono de WhatsApp siempre en la misma línea. */
.tabla td[data-label="Teléfono"] { white-space: nowrap; }
/* Programa: el badge largo (Ortodoncia Internacional) puede ir a dos líneas y estrechar la columna. */
.tabla td[data-label="Programa"] { max-width: 110px; }
.tabla td[data-label="Programa"] .badge { white-space: normal; line-height: 1.2; display: inline-block; }
.c-avatar { width: 56px; }
.c-check { width: 44px; }
.c-check input, .selall input { width: 22px; height: 22px; cursor: pointer; }
.cell-label { display: block; padding: 8px 0; cursor: pointer; font-weight: inherit; margin: 0; color: var(--texto); }
.selall { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-size: 14px; cursor: pointer; }

/* ---- badges y avatares ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.b-curso1 { background: #e3edfb; color: #2456a6; }
.b-curso2 { background: #e8f5e4; color: #2e7d32; }
.b-curso3 { background: #f3e8fb; color: #7b3fa0; }
.b-gris { background: #eef1f4; color: var(--texto-suave); }
.b-master { background: var(--azul-claro); color: var(--azul); }
.b-ex { background: #eef1f4; color: var(--texto-suave); }
.b-proximo { background: #fff3d6; color: #9a6a00; }
.b-baja { background: #fbe8e6; color: #b3362c; }
.b-react { background: #efe7ff; color: #6b3df5; }
.b-cat-dir { background: #e6e0fb; color: #5b3fa0; }
.b-cat-tit { background: var(--azul-claro); color: var(--azul); }
.b-cat-aso { background: #e8f5e4; color: #2e7d32; }
.b-cat-inv { background: #fdeede; color: #b5651d; }
/* casillas de programas en la ficha de profesor */
.progs { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px 10px; margin-bottom: 12px; min-inline-size: auto; }
.progs legend { font-size: 13.5px; color: var(--texto-suave); font-weight: 600; padding: 0 6px; }
.progs .chk { display: inline-flex; align-items: center; gap: 7px; margin: 4px 18px 4px 0; font-weight: 400; color: var(--texto); }
.progs .chk input { width: 18px; height: 18px; }
.b-deleg { background: #ede9fe; color: #6d28d9; }
.chk-inline { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-weight: 400; color: var(--texto); }
.chk-inline input { width: 18px; height: 18px; }
.progs-hint { font-size: 12.5px; color: var(--texto-suave); margin: 2px 0 10px; }
.cat-prog-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-weight: 400; }
.cat-prog-lbl { flex: 0 0 200px; color: var(--texto); }
.cat-prog-row select { flex: 1; min-width: 0; }
.cat-prog { color: var(--texto-suave); font-size: 12.5px; margin-left: 4px; }
@media (max-width: 640px) { .cat-prog-row { flex-wrap: wrap; gap: 4px; } .cat-prog-lbl { flex-basis: 100%; } }
.filtro-sep { width: 1px; height: 24px; background: var(--borde); margin: 0 4px; }
.export-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.avatar { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; background: #d6dbf5; }
.avatar-ini { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--azul); font-weight: 700; }
/* Tamaños de avatar en clases (la CSP bloquea los estilos en línea). */
.av-40 { width: 40px; height: 40px; }
.av-40.avatar-ini { font-size: 16px; }
.av-64 { width: 64px; height: 64px; }
.av-64.avatar-ini { font-size: 25px; }
.av-200 { width: 200px; height: 200px; }
.av-200.avatar-ini { font-size: 80px; }

/* ---- formularios ---- */
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px;
  font-family: inherit; font-size: 16px; color: var(--texto); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
/* iOS/Safari pinta los campos de fecha con su propio alto y alineación (se veía roto en el móvil):
   se les fuerza el mismo aspecto que al resto de inputs. */
input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; min-height: 42px; text-align: left;
}
label { display: block; font-size: 13.5px; color: var(--texto-suave); font-weight: 600; margin-bottom: 12px; }
label input, label select, label textarea { margin-top: 5px; font-weight: 400; }
label small { font-weight: 400; }
.form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-cols { display: flex; gap: 28px; }
.form-main { flex: 1; min-width: 0; }
.form-side { width: 190px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fotobox { padding: 6px; }
.form-side .meta { font-size: 12.5px; color: var(--texto-suave); text-align: center; margin: 0; }
.form-foot { display: flex; gap: 10px; justify-content: space-between; margin-top: 18px; }
.form-narrow { max-width: 440px; }

/* ---- listas ---- */
.lastlist { list-style: none; margin: 0; padding: 0; }
.lastlist li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf1f4; flex-wrap: wrap; }
.lastlist li:last-child { border-bottom: none; }
.lastlist a { font-weight: 600; }

/* ---- login ---- */
/* El login de MRA va en grafito y oro: de un vistazo se distingue del de crm.mid.es,
   que es el azul y violeta de siempre (Manuel, 07/08/2026). */
/* El recuadro va centrado, pero un poco por encima del centro: centrado del todo dejaba
   demasiado aire arriba (Manuel, 07/08/2026). El hueco de abajo lo empuja hacia arriba. */
.login-body { align-items: center; justify-content: center; padding-bottom: 10vh;
  background: radial-gradient(120% 90% at 50% 0%, #2b2b2f 0%, #17171a 55%, #0e0e10 100%); }
.login-card { background: #fff; border-radius: 14px; padding: 34px 30px; width: 100%; max-width: 380px; margin: 0 auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.login-brand { font-size: 26px; font-weight: 700; color: #111; text-align: center; }
.login-brand span { font-weight: 500; color: #a17c2b; }   /* el «CRM», en oro */
.login-card { border-top: 3px solid #c9a227; }            /* filete dorado arriba */
.login-sub { text-align: center; color: var(--texto-suave); font-size: 13.5px; margin: 4px 0 22px; }
.login-note { text-align: center; color: var(--texto-suave); font-size: 12.5px; margin: 16px 0 0; }

/* ---- foto / zona peligro / accesibilidad ---- */
.fotonombre { font-size: 12.5px; color: var(--texto-suave); text-align: center; word-break: break-all; }
.btn-cv { text-align: center; background: var(--azul-claro); border-color: #bcd9e2; }
#foto-input:focus-visible + .btn-file { outline: 2px solid var(--azul); outline-offset: 2px; }
/* menú Herramientas de la ficha */
.tools { position: relative; display: inline-block; }
.tools > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.tools > summary::-webkit-details-marker { display: none; }
.tools[open] > summary { border-color: var(--azul); color: var(--azul); }
.tools .ico { width: 17px; height: 17px; }
.tools-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(16,42,54,.18); min-width: 210px; padding: 6px;
  display: flex; flex-direction: column;
}
.tools-menu form { margin: 0; }
.tools-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 10px; border-radius: 7px; font-family: inherit; font-size: 14px;
  color: var(--texto); cursor: pointer;
}
.tools-menu button:hover { background: var(--fondo); color: var(--azul); }
.tools-menu .t-sep { border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 4px; }
.tools-menu .t-danger { color: var(--error); }
.tools-menu .t-danger:hover { background: var(--error-bg); color: var(--error); }

/* icono WhatsApp junto al teléfono */
.wa { color: #25d366; margin-left: 6px; vertical-align: middle; display: inline-flex; }
.wa .ico { width: 19px; height: 19px; }
.wa:hover { color: #128c7e; }

.inline-form { display: inline; margin: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- pie ---- */
.foot { text-align: center; color: var(--texto-suave); font-size: 12.5px; padding: 18px; }
/* Control económico */
.stat-eur .stat-n { font-size: 25px; letter-spacing: -.3px; }
.stat-eur .stat-l small { display: inline-block; margin-top: 3px; color: var(--texto-suave); font-weight: 400; }
.tabla-eco th, .tabla-eco td { text-align: right; white-space: nowrap; }
.tabla-eco th:first-child, .tabla-eco td:first-child { text-align: left; }
.tabla-eco .fila-total td { border-top: 2px solid var(--borde); background: var(--fondo); }
.eco-nota { font-size: 12.5px; color: var(--texto-suave); margin: 14px 2px; line-height: 1.55; }
.chartwrap { overflow-x: auto; padding: 14px 12px; }
.ecochart { display: block; width: 100%; max-width: 760px; min-width: 640px; height: auto; margin: 0 auto; }
.delta-up { color: #1f7a35; font-weight: 600; }
.delta-down { color: #b3261e; font-weight: 600; }
.delta-eq { color: var(--texto-suave); }
/* Incidencias */
.inc-card { margin-bottom: 14px; }
.inc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inc-titulo { font-size: 15px; font-weight: 600; margin: 0; color: var(--texto); }
.inc-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.inc-item { display: inline-block; padding: 5px 11px; border: 1px solid var(--borde); border-radius: 999px; font-size: 13.5px; color: var(--azul); background: var(--fondo); }
.inc-item:hover { background: #fff; text-decoration: none; }
.inc-ok { color: #1f7a35; font-weight: 600; margin: 0; font-size: 13.5px; }

/* ---- página imprimible (Exportar PDF) ---- */
.printable { background: #fff; }
.print-wrap { max-width: 1000px; margin: 0 auto; padding: 24px 18px; }
.print-bar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.print-head { display: flex; align-items: center; gap: 14px; }
.print-logo { width: 52px; height: 52px; flex: 0 0 auto; }
.print-head h1 { font-size: 20px; margin: 0 0 4px; color: var(--azul-osc); }
.print-sub { color: var(--texto-suave); font-size: 13px; margin: 0 0 14px; }
.print-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.print-table th { text-align: left; border-bottom: 2px solid var(--azul); padding: 6px 8px; color: var(--azul-osc); }
.print-table td { padding: 5px 8px; border-bottom: 1px solid #e3e9ed; }
.print-table .c-foto { width: 44px; }
.print-table .avatar { width: 36px; height: 36px; }
.print-foot { margin-top: 18px; color: #9fb0b8; font-size: 11px; text-align: center; }
@media print {
  .no-print { display: none !important; }
  .print-wrap { max-width: none; padding: 0; }
  .print-table th { border-bottom: 2px solid #333; color: #000; }
  .printable { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-table .avatar { width: 32px; height: 32px; }
  a { color: #000; text-decoration: none; }
  @page { margin: 14mm; }
}

/* ---- móvil ---- */
@media (max-width: 720px) {
  .form-cols { flex-direction: column-reverse; }
  .form-side { width: 100%; }
  .form .grid2, .form .grid3 { grid-template-columns: 1fr; }
  /* Barra superior en el móvil: UNA línea y CUATRO cosas. Nada más.
     Logo · (hueco) · + Nuevo lead · hamburguesa
     Antes salían los 9 enlaces del menú convertidos en iconos sueltos, sin texto: nueve
     dibujitos en fila que hay que adivinar, apretados en 375 px y peleándose por el sitio con
     el botón de Nuevo lead. No se pierde nada quitándolos: los NUEVE están dentro del menú
     desplegable, y ahí sí llevan su nombre escrito (Inicio, Acciones, Leads…). El engranaje
     se va por lo mismo: Ajustes también está en el desplegable. */
  .topbar-in { flex-wrap: nowrap; padding: 8px 14px; gap: 8px; min-height: 48px; }
  /* El botón "+ Nuevo lead" CENTRADO en la barra: el logo (izquierda) y la hamburguesa
     (derecha) ocupan dos huecos flexibles del MISMO ancho (flex: 1 cada uno), y el botón, que
     no crece (flex: 0), queda justo en el medio de la pantalla, no solo entre los dos. Si un
     usuario no puede crear leads y no ve el botón, el logo y la hamburguesa siguen en su
     sitio, uno a cada lado. */
  .brand { text-align: left; font-size: 16px; flex: 1 1 0; min-width: 0; white-space: nowrap; }
  .mainnav { display: none; }
  /* .usermenu .gear-ico y no .gear-ico a secas: la regla base que lo hace visible está más
     ABAJO en este fichero (sobre la línea 490) y, a igualdad de peso, gana la última. Con el
     padre delante pesa más y no depende de quién esté antes. Ya pasó: la primera versión de
     esto no escondía el engranaje y en el móvil seguían viéndose dos iconos. */
  .usermenu .gear-ico { display: none; }
  /* Un pelín más pequeño que en el escritorio: en el móvil comparte línea con el logo y la
     hamburguesa y no tiene que gritar tanto. */
  .btn-nuevo-lead { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; }
  .usermenu { order: 0; flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; margin-left: 0; gap: 0; }
  .usermenu .uname { display: none; }
  .nav-burger { display: inline-flex; align-items: center; }
  .mobilemenu:not([hidden]) { display: block; }
  /* login: el recuadro más arriba, no centrado verticalmente */
  .login-card { margin: 9vh auto auto; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border-bottom: 1px solid var(--borde); padding: 10px 6px; }
  .tabla td { border: none; padding: 3px 8px; }
  .tabla td[data-label]:not(:empty)::before { content: attr(data-label) ": "; color: var(--texto-suave); font-size: 12px; }
  .tabla td:empty { display: none; }
  .c-avatar, .c-check { width: auto; }
  .pagehead { flex-direction: column; align-items: flex-start; }
}

/* ================= MiD Pacientes ================= */
/* Badges de tipo de tratamiento */
.b-trat-inv { background: #e3edf9; color: #2456a6; }
.b-trat-spark { background: #e8e3f9; color: #5b3fa8; }
.b-trat-angel { background: #e3f6f9; color: #0e7490; }
.b-trat-brk { background: #f3e9df; color: #b5651d; }
/* Badges de casos */
.b-alta { background: #e2f3e5; color: #2e7d32; }
.b-mod { background: #fff3d6; color: #9a6b00; }
.b-pend { background: #ffe9d6; color: #c2410c; font-weight: 600; }
.b-resuelto { background: #eef1f3; color: #55636b; }
.b-activo { background: #e2f3e5; color: #2e7d32; }
/* «En masa» de Acciones: abajo del todo y a la izquierda, separado de la lista. */
.acc-masa-pie { margin: 18px 0 6px; }
/* Etapa en marcha (Matriculación UMA): ni pendiente (naranja) ni terminada (verde). */
.b-info { background: #e4ecfd; color: #23458f; font-weight: 600; }
/* Persona en miniatura (avatar + nombre) en tablas */
.pmini { display: flex; align-items: center; gap: 7px; }
.pmini + .pmini { margin-top: 4px; }
.pmini > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; font-size: 13.5px; }
.c-personas { min-width: 140px; }
/* Varios */
.btn-mini { padding: 5px 10px; font-size: 13px; }
.c-accion { white-space: nowrap; }
.c-accion .inline-form + .inline-form { margin-left: 6px; }
.c-detalle { max-width: 520px; }
.c-prof { width: 52px; text-align: center; }
/* Nombre del paciente en negro (enlace discreto; azul solo al pasar el ratón) */
.tabla a.plink { color: var(--texto); }
.tabla a.plink:hover { color: var(--azul); }
/* Foto del plan de tratamiento en la ficha */
.lbl-mini { display: block; font-size: 13.5px; color: var(--texto-suave); font-weight: 600; margin-bottom: 6px; }
.plan-foto-box { margin: 2px 0 14px; }
.plan-thumb { display: block; max-width: 340px; max-height: 240px; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px; }
.plan-foto-box .btn-file { display: inline-block; margin-top: 2px; }
#plan-input:focus-visible + .btn-file { outline: 2px solid var(--azul); outline-offset: 2px; }
.c-meta { color: var(--texto-suave); font-size: 13.5px; }
.ref-ext { display: block; font-size: 12px; color: var(--texto-suave); }
.star { color: #eab308; width: 16px; height: 16px; vertical-align: -2px; }
.quir-ico { color: #b0186a; width: 16px; height: 16px; vertical-align: -2px; margin-left: 2px; }
.alarma-ico { color: #dc2626; width: 16px; height: 16px; vertical-align: -2px; margin-left: 2px; }
.trat-link { text-decoration: none; display: inline-block; }
.trat-link:hover { text-decoration: none; filter: brightness(0.94); }
.trat-link .badge { cursor: pointer; }

.is-error { color: #c0182f; }
.usermenu-ico { display: inline-flex; align-items: center; color: inherit; padding: 6px; border-radius: 8px; }
.usermenu-ico:hover { background: var(--azul-claro); color: var(--azul); }
.usermenu-ico .ico { width: 20px; height: 20px; }

/* Icono de Ajustes en la barra + página de ajustes */
.gear-ico { display: inline-flex; align-items: center; padding: 6px; border-radius: 8px; color: inherit; }
.gear-ico:hover, .gear-ico.on { background: var(--azul-claro); color: var(--azul); }
.gear-ico .ico { width: 20px; height: 20px; }
.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.ajuste-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 0.5px solid #e6e6e6; border-radius: 12px; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.ajuste-card:hover { border-color: var(--azul); background: var(--azul-claro); text-decoration: none; }
.ajuste-ico { display: inline-flex; }
.ajuste-ico .ico { width: 26px; height: 26px; color: var(--azul); flex: none; }
.ajuste-txt { display: flex; flex-direction: column; gap: 3px; }
.ajuste-desc { color: var(--texto-suave); font-size: 13px; line-height: 1.45; }

/* Espacio ocupado */
.esp-total { font-size: 32px; font-weight: 700; color: var(--azul); line-height: 1.05; }
.esp-list { list-style: none; margin: 14px 0 0; padding: 0; }
.esp-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 0.5px solid #ececec; }
.esp-item:last-child { border-bottom: none; }
.esp-ico { display: inline-flex; }
.esp-ico .ico { width: 20px; height: 20px; color: var(--azul); }
.esp-main { flex: 1; min-width: 0; }
.esp-meta { color: var(--texto-suave); font-size: 12.5px; }
.esp-bar { display: block; margin-top: 6px; }
.esp-bar svg { width: 100%; height: 8px; display: block; border-radius: 6px; overflow: hidden; }
.esp-bar-bg { fill: var(--azul-claro); }
.esp-bar-fg { fill: var(--azul); }
.esp-val { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto-suave); font-size: 13px; }
.srv-cards .stat-l small { color: var(--texto-suave); font-weight: 400; }
.srv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; background: #12b76a; }
.srv-dot.srv-warn { background: #f0a400; }
.srv-dot.srv-bad { background: #e24b4a; }
/* Google Calendar (ajustes) */
.gcal-estado { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.gcal-estado li.ok { color: #0a7a44; }
.gcal-estado li.ko { color: var(--texto-suave); }
.gcal-ok { background: #e7f9ee; border: 0.5px solid #9fe1cb; border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.gcal-pasos { margin: 0; padding-left: 22px; line-height: 1.7; }
.gcal-pasos li { margin-bottom: 10px; }
.gcal-subir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.gcal-email { background: var(--azul-claro); color: var(--azul); padding: 2px 8px; border-radius: 6px; user-select: all; }

/* Calendario académico */
.cal-head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-mes { color: var(--texto-suave); font-weight: 500; }
/* Título con desplegables de mes/año */
.cal-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-navform { display: inline-flex; gap: 4px; margin: 0; }
/* width auto: la regla global de los formularios (select { width: 100% }) estrujaba el
   mes ("Septiembr…"); así cada selector mide lo que mide su texto y el año va justo. */
.cal-sel { width: auto; font-size: 20px; font-weight: 500; color: var(--texto-suave); border: 1px solid transparent; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.cal-sel:hover { background: var(--azul-claro); color: var(--azul); }
.cal-sel:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.btn-hoy { border-color: var(--azul); color: var(--azul); }
.btn-hoy:hover { background: var(--azul-claro); }
.cal-nav-btns { display: inline-flex; gap: 6px; align-items: center; }
/* Switch de vista mensual / lista */
.cal-vswitch { display: inline-flex; border: 1px solid var(--borde); border-radius: 9px; overflow: hidden; margin-left: 4px; }
.cal-vswitch .vsw { display: inline-flex; align-items: center; padding: 8px 10px; color: var(--texto-suave); background: #fff; }
.cal-vswitch .vsw:hover { background: var(--azul-claro); color: var(--azul); text-decoration: none; }
.cal-vswitch .vsw.on { background: var(--azul); color: #fff; }
.cal-vswitch .ico { width: 16px; height: 16px; }
/* Vista de lista + exportación */
.cal-lista .cal-fila { cursor: pointer; }
.cal-lista .cal-fila:hover td { background: var(--azul-claro); }
.cal-lista .cal-fila--vac { cursor: default; }
.cal-lista .cal-fila--vac td { color: #e5484d; font-weight: 600; }
.cal-lista .cal-fila--vac:hover td { background: transparent; }
.cal-export { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* Filtro de profesor con buscador en vivo (reutiliza los estilos .combo-*) */
.calprof-combo { position: relative; display: inline-block; width: 220px; vertical-align: middle; }
.calprof-combo .combo-input { width: 100%; padding: 6px 30px 6px 12px; border-radius: 20px; border: 1px solid var(--borde); font-size: 13.5px; color: var(--texto); background: #fff; height: auto; margin: 0; }
.calprof-combo .combo-input:focus { border-color: var(--azul); outline: none; }
.calprof-combo.on .combo-input { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.calprof-combo .combo-clear { top: 7px; }
/* Fila de totales en las tablas del panel */
.fila-total td { border-top: 2px solid var(--borde); background: var(--fondo); }
/* Chips de filtro por tipo: rellenos con el mismo color con el que se pinta en el calendario. */
.cal-fchip--teoria { background: #eef4ff; border-color: #bcd0fa; color: #2563eb; }
.cal-fchip--teoria.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.cal-fchip--clinica { background: #eafaf0; border-color: #b8e6ca; color: #15803d; }
.cal-fchip--clinica.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.cal-fchip--invitado { background: #fef7dd; border-color: #f0df9d; color: #a16207; }
.cal-fchip--invitado.on { background: #eab308; border-color: #eab308; color: #fff; }
.cal-fchip--lm18 { background: #dcf5e5; border-color: #16a34a; color: #15803d; font-weight: 600; }
.cal-fchip--lm18.on { background: #16a34a; border-color: #16a34a; color: #fff; }
/* Botón verde "+ Clínica" (día de Clínica LM18) */
.btn-clinica { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-clinica:hover { background: #15803d; border-color: #15803d; color: #fff; }
.cal-card { padding: 0; overflow: hidden; }
/* minmax(0,1fr) evita que un título largo ensanche su columna (columnas siempre iguales). */
/* Cada columna puede contraerse (--cN) cuando se filtra por curso y ese día de la semana no tiene nada. */
.cal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) var(--c4, minmax(0, 1fr)) var(--c5, minmax(0, 1fr)) var(--c6, minmax(0, 1fr)) var(--c7, minmax(0, 1fr)); }
.cal-grid.c4-min { --c4: 44px; }
.cal-grid.c5-min { --c5: 44px; }
.cal-grid.c6-min { --c6: 44px; }
.cal-grid.c7-min { --c7: 44px; }
.cal-dia--min { background: #fafbfd; }
.cal-dia--min .cal-add { display: none; }
.cal-dia--min .cal-dia-num { color: var(--texto-suave); font-weight: 500; }
.cal-head-row .cal-dow { padding: 8px; text-align: center; font-size: 12.5px; color: var(--texto-suave); font-weight: 600; border-bottom: 0.5px solid #ececec; }
/* Qué curso del máster tiene clase cada día de la semana (Lun 2º · Mar 1º · Mié 3º). */
.cal-dow-curso { font-weight: 400; color: var(--azul, #0d2ce2); font-size: 11px; }
.cal-dia { min-width: 0; min-height: 104px; border-right: 0.5px solid #f0f0f0; border-bottom: 0.5px solid #f0f0f0; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.cal-dia--fuera { background: #fafafa; }
.cal-dia--fuera .cal-dia-num { color: #bbb; }
.cal-dia--hoy { background: var(--azul-claro); }
/* Días no lectivos (festivos / vacaciones): en rojo. */
.cal-dia--festivo { background: #fdecec; }
.cal-dia--festivo .cal-dia-num { color: #c0182f; }
.cal-festivo { font-size: 11px; font-weight: 700; color: #c0182f; background: #fbd5d5; border-radius: 4px; padding: 1px 5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txt-festivo { color: #c0182f; }
.cal-festivo-aviso { margin: 0; font-size: 13px; }
.fest-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c0182f; vertical-align: middle; margin-right: 4px; }
.cal-dia-cab { display: flex; align-items: center; justify-content: space-between; }
.cal-dia-num { font-size: 12.5px; font-weight: 600; }
.cal-add { border: none; background: transparent; color: var(--texto-suave); cursor: pointer; font-size: 16px; line-height: 1; width: 20px; height: 20px; border-radius: 5px; opacity: 0; }
.cal-dia:hover .cal-add, .cal-add:focus { opacity: 1; }
.cal-add:hover { background: #fff; color: var(--azul); }
.cal-dia-evs { display: flex; flex-direction: column; gap: 3px; }
.cal-ev { display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; border: none; border-left: 3px solid #999; background: #f4f6fb; border-radius: 6px; padding: 3px 7px; font-size: 12px; line-height: 1.35; cursor: pointer; color: var(--texto); overflow: hidden; transition: filter .1s ease; }
.cal-ev:hover { filter: brightness(0.97); }
/* Borrador: pill atenuado con borde discontinuo, SIN opacity (atenuaría también el punto rojo de estado). */
.cal-ev--borrador { border-left-style: dashed; color: var(--texto-suave); }
.cal-ev--borrador .cal-ev-t { opacity: 0.75; }
.cal-ev-fr { font-weight: 700; font-size: 10.5px; background: rgba(255,255,255,0.75); border-radius: 3px; padding: 0 4px; flex: none; }
.cal-ev-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cal-ev-p { color: var(--texto-suave); font-size: 11px; flex: none; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Colores por TIPO de clase (borde izquierdo + fondo suave). */
.cal-ev--t-teoria { border-left-color: #2563eb; background: #eef4ff; }
.cal-ev--t-clinica { border-left-color: #16a34a; background: #eafaf0; }
.cal-ev--t-examen { border-left-color: #7c3aed; background: #f3edfe; }
.cal-ev--t-webinar { border-left-color: #0d9488; background: #e6f7f5; }
.cal-ev--t-otro { border-left-color: #98a2b3; background: #f5f6f8; }
/* Eventos MRA vinculados a un curso: el color lo pone la EDICIÓN (curso_id), no el
   tipo — los 3 módulos de la ed. 132 se ven iguales (Manuel, 17/07/2026). */
.cal-ev--c0 { border-left-color: #2563eb; background: #eef4ff; }
.cal-ev--c1 { border-left-color: #16a34a; background: #eafaf0; }
.cal-ev--c2 { border-left-color: #7c3aed; background: #f3edfe; }
.cal-ev--c3 { border-left-color: #ea580c; background: #fff1e7; }
.cal-ev--c4 { border-left-color: #0d9488; background: #e6f7f5; }
.cal-ev--c5 { border-left-color: #db2777; background: #fdeef5; }
.cal-ev--c6 { border-left-color: #ca8a04; background: #fdf6e3; }
.cal-ev--c7 { border-left-color: #64748b; background: #f1f5f9; }
.cal-ev--invitado { border-left-color: #eab308; background: #fef7dd; }
/* Vacaciones / festivo: banda roja continua (sangra a los bordes de la celda). */
.cal-ev--vacaciones { border: none; background: #e5484d; color: #fff; border-radius: 0; margin: 0 -5px; padding: 3px 9px; font-weight: 600; }
.cal-ev--vacaciones .cal-ev-fr, .cal-ev--vacaciones .cal-ev-tipo, .cal-ev--vacaciones .cal-ev-est, .cal-ev--vacaciones .cal-ev-p { display: none; }
.cal-ev--vacaciones .cal-ev-t { color: #fff; }
/* Clínica LM18 (la clínica abre sin alumnos): banda verde continua, editable. */
.cal-ev--lm18 { border: none; background: #16a34a; color: #fff; border-radius: 0; margin: 0 -5px; padding: 3px 9px; font-weight: 600; cursor: pointer; }
.cal-ev--lm18 .cal-ev-t { color: #fff; }
.cal-ev--lm18:hover { filter: brightness(1.06); }
/* Leyenda por color */
.cal-ley-punto { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border-left: 3px solid #999; }
.lp-teoria { border-left-color: #2563eb; background: #eef4ff; }
.lp-clinica { border-left-color: #16a34a; background: #eafaf0; }
.lp-examen { border-left-color: #7c3aed; background: #f3edfe; }
.lp-webinar { border-left-color: #0d9488; background: #e6f7f5; }
.lp-otro { border-left-color: #98a2b3; background: #f5f6f8; }
.lp-invitado { border-left-color: #eab308; background: #fef7dd; }
.lp-lm18 { border: none; background: #16a34a; }
.lp-vac { border: none; background: #e5484d; }
.chip-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #999; margin-right: 5px; vertical-align: middle; }
.chip-punto[data-prog="ortodoncia"] { background: #0d2ce2; }
.chip-punto[data-prog="ortodoncia_internacional"] { background: #00c853; }
.chip-punto[data-prog="implantes"] { background: #ff7a00; }
.cal-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--texto-suave); align-items: center; }
.cal-ley-sep { margin-left: auto; }
.cal-dlg { border: none; border-radius: 14px; padding: 0; max-width: 560px; width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.cal-dlg::backdrop { background: rgba(0,0,0,.4); }
.cal-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cal-dlg-head { display: flex; justify-content: space-between; align-items: center; }
.cal-dlg-x { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--texto-suave); }
/* La X dentro del título de un diálogo (el "cancelar" de arriba a la derecha), en su
   cuadradito para que se vea que es un botón. */
.cal-dlg > h3 .cal-dlg-x { float: right; font-size: 17px; line-height: 1; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1.5px solid #d0d5dd; border-radius: 6px; background: #fff; }
.cal-dlg > h3 .cal-dlg-x:hover { color: var(--texto); border-color: #9aa3b2; }
.cal-profes { display: flex; flex-direction: column; gap: 6px; }
.cal-prof-slot .combo { margin-top: 0; }
.cal-prof-mas { align-self: flex-start; margin-top: 2px; }
/* Fila de foto en el modal de Personal */
.p-foto-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-foto-row .chk-inline { margin: 0; }
/* Ficha rápida de una clase / día de clínica (solo lectura, con botón Editar si hay permiso) */
.ver-datos { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ver-fila { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: baseline; }
.ver-fila dt { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.ver-fila dd { margin: 0; font-size: 14.5px; color: var(--texto); overflow-wrap: anywhere; }
#ver-titulo { font-size: 17px; line-height: 1.3; padding-right: 8px; }
.cal-dlg-foot { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.cal-dlg-del { margin-left: auto; }
.cal-ev-tipo { display: inline-flex; flex: none; }
.cal-ev-tipo .ico { width: 13px; height: 13px; color: rgba(20,30,50,.5); }
/* Punto de estado: borrador rojo, en revisión naranja; confirmado no lleva punto. */
.cal-ev-est { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; background: #e5484d; }
.cal-ev-est.est-revision { background: #f0a400; }
.cal-ev-est.est-confirmado { display: none; }
.cal-leyenda .cal-ev-est { margin: 0 2px; vertical-align: middle; }
.cal-leyenda .cal-ev-tipo .ico { vertical-align: middle; }
/* Dedicación de profesores (panel). Los títulos de columna van alineados con sus números. */
.ded-tabla td.ded-n { font-variant-numeric: tabular-nums; text-align: right; }
.ded-tabla th.ded-n { text-align: right; }
.ded-mini { display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 700px) {
  /* "CRM" apilado bajo "MiD", sin sobrepasar su ancho */
  .brand span { display: block; line-height: 0.95; font-size: 0.72em; letter-spacing: 0.14em; }
  .cal-dia { min-height: 76px; }
  /* En el móvil manda saber QUIÉN da la clase (como en Google Calendar): fuera el icono
     y, si hay profesor, el tema; queda [M/T] + apellido(s). Sin profesor se muestra el título. */
  .cal-ev { padding: 3px 4px; gap: 4px; }
  .cal-ev-tipo { display: none; }
  .cal-ev--conprof .cal-ev-t { display: none; }
  .cal-ev-p { flex: 1; min-width: 0; max-width: none; color: inherit; font-size: 11.5px; }
  .cal-ley-sep { display: none; }
  /* Cabecera del calendario en UNA sola fila y al mismo nivel: mes, año, ←, Hoy, →.
     El título "Calendario" se oculta (la pestaña activa del menú ya lo indica). */
  .cal-title-wrap { width: 100%; flex-wrap: nowrap; align-items: center; gap: 2px; }
  .cal-title-wrap h1 { display: none; }
  .cal-navform { flex: 0 1 auto; min-width: 0; }
  .cal-sel { font-size: 17px; font-weight: 600; color: var(--texto); padding: 4px 2px; max-width: 130px; }
  .cal-nav-btns { margin-left: auto; gap: 4px; flex: 0 0 auto; }
  .cal-nav-btns .btn { padding: 6px 9px; font-size: 13.5px; }
  /* En el móvil el switch de vista va a la IZQUIERDA del mes. */
  .cal-vswitch { order: -1; margin-left: 0; margin-right: 4px; }
  .cal-vswitch .vsw { padding: 7px 8px; }
  /* Con filtro de curso, las columnas vacías de jue-dom se reducen al mínimo en pantalla
     estrecha (solo el número del día), para que lun/mar/mié se lean bien. */
  .cal-grid.c4-min { --c4: 24px; }
  .cal-grid.c5-min { --c5: 24px; }
  .cal-grid.c6-min { --c6: 24px; }
  .cal-grid.c7-min { --c7: 24px; }
  .cal-dia--min { padding: 4px 2px; }
  .cal-dia--min .cal-dia-num { font-size: 10px; }
  .cal-grid.c4-min .cal-dow:nth-child(4), .cal-grid.c5-min .cal-dow:nth-child(5),
  .cal-grid.c6-min .cal-dow:nth-child(6), .cal-grid.c7-min .cal-dow:nth-child(7) {
    font-size: 9.5px; padding: 8px 0; overflow: hidden; white-space: nowrap;
  }
}

/* Matriz de permisos (Usuarios) */
.perm-tabla th.perm-col, .perm-tabla td.perm-col { text-align: center; }
.perm-tabla th.perm-col { font-size: 11.5px; }
.perm-tabla input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--azul); cursor: pointer; }
.perm-tabla input[type="checkbox"]:disabled { accent-color: #9aa3b2; cursor: not-allowed; }
.perm-manual { color: var(--texto-suave); font-size: 13px; margin-left: 4px; cursor: help; }
.perm-rol-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.perm-rol-form select { padding: 5px 8px; }
.perm-coord { font-size: 12.5px; color: var(--texto-suave); }

/* Aviso "Ver como…" (admin revisando la vista de profesor) */
.vc-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.vc-form:last-child { margin-bottom: 0; }
.vc-form label { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.vercomo-bar { background: #fff4d6; border: 0.5px solid #e6c34d; color: #6a5410; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.vercomo-bar a { font-weight: 600; }

/* Aviso "añadir a la pantalla de inicio" (móvil) */
.a2hs-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--azul); color: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.28); font-size: 14px; line-height: 1.35; }
.a2hs-txt { flex: 1; }
.a2hs-acts { display: flex; gap: 8px; flex: none; }
.a2hs-yes, .a2hs-no { border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; border: 0.5px solid rgba(255,255,255,.6); }
.a2hs-yes { background: #fff; color: var(--azul); border-color: #fff; }
.a2hs-no { background: transparent; color: #fff; }
.a2hs-x { background: transparent; border: none; color: #fff; font-size: 16px; cursor: pointer; flex: none; padding: 4px; }
/* Guía iPhone "añadir a inicio" (pasos con iconos + flecha) */
.a2hs-ios { flex-direction: column; align-items: stretch; text-align: left; position: fixed; }
.a2hs-ios .a2hs-x { position: absolute; top: 6px; right: 8px; }
.a2hs-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; padding-right: 22px; }
.a2hs-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 5px; }
.a2hs-steps li { line-height: 1.5; }
.a2hs-svg { width: 17px; height: 17px; vertical-align: -4px; margin: 0 1px; }
.a2hs-v { font-weight: 700; }
.a2hs-arrow { text-align: center; font-size: 26px; line-height: 1; margin-top: 2px; animation: a2hsbob 1s ease-in-out infinite; }
@keyframes a2hsbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Sincronizar portales */
.sync-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.sync-portal { display: flex; flex-direction: column; gap: 10px; }
.sync-portal h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.sync-sub { color: var(--texto-suave); font-size: 13px; }
.sync-n { font-size: 30px; font-weight: 700; color: var(--azul); line-height: 1.05; }
.sync-n small { display: block; font-size: 12.5px; font-weight: 400; color: var(--texto-suave); }
.sync-open { margin-top: auto; }
.sync-how { margin-top: 4px; }
.sync-steps { margin: 8px 0 12px; padding-left: 20px; line-height: 1.7; }
.sync-steps li { margin-bottom: 6px; }
.pagehead-badges { display: flex; gap: 8px; align-items: center; }
.field-meta { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 4px; }
/* Formulario "añadir al historial" en una línea */
.caso-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.caso-form label { margin: 0; }
.caso-form .caso-desc { flex: 1; min-width: 220px; }
.caso-form .btn { margin-bottom: 2px; }
.caso-nuevo .field-meta { margin-top: 10px; }
@media (max-width: 720px) {
  .caso-form { flex-direction: column; align-items: stretch; }
  .c-personas .pmini > span:last-child { max-width: none; }
}

/* Pestañas del Panel de control (3 hojas) */
.panel-tabs { margin: 2px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.panel-tabs .chip { font-size: 14.5px; padding: 8px 18px; }

/* Primeras visitas (embudo 1V) */
.b-1v { background: #fdf1d8; color: #92600a; }

/* Caso aceptado (aprobado por el portal, sin colocar) */
.b-acept { background: #e3edf9; color: #2456a6; font-weight: 600; }

/* Modal "Nuevo caso" (home) */
.nc-dlg { border: none; border-radius: 14px; padding: 22px; width: min(560px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.nc-dlg::backdrop { background: rgba(13, 44, 226, .28); }
.nc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 18px; }
.nc-lista { list-style: none; margin: 12px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.nc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; font: inherit; }
.nc-item:hover { background: var(--azul-claro); }
.nc-nombre { font-weight: 600; }
.nc-meta { color: var(--texto-suave); font-size: 13px; margin-left: auto; white-space: nowrap; }
.nc-vacio { color: var(--texto-suave); padding: 8px 10px; }

/* Buscador en vivo (combobox) de alumno/profesor en la ficha */
.combo { position: relative; display: block; margin-top: 5px; }
.combo-input { padding-right: 34px; }
.combo-clear { position: absolute; right: 6px; top: 8px; width: 24px; height: 24px; border: none; background: none;
  color: var(--texto-suave); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; padding: 0; }
.combo-clear:hover { background: var(--fondo); color: var(--error); }
.combo-list { position: absolute; z-index: 30; top: calc(100% + 3px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 30px rgba(13,44,226,.15);
  list-style: none; margin: 0; padding: 5px; max-height: 300px; overflow-y: auto; display: none; }
.combo-list.open { display: block; }
.combo-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 8px;
  border: none; background: none; border-radius: 7px; cursor: pointer; font: inherit; }
.combo-item:hover, .combo-item.act { background: var(--azul-claro); }
.combo-nombre { font-weight: 600; }
.combo-meta { color: var(--texto-suave); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.combo-vacio { color: var(--texto-suave); padding: 8px 10px; font-size: 14px; }
/* En modo solo lectura (fieldset disabled) el buscador se ve como campo normal */
.nofs[disabled] .combo-clear { display: none; }

/* Botón volver de la ficha */
.btn-volver { padding: 6px 12px; font-size: 17px; line-height: 1; margin-right: 10px; vertical-align: 2px; }

/* Días en pendiente: rojo ≥30, amarillo 15-29 */
.b-dias-rojo { background: #fbe8e6; color: #b3362c; font-weight: 600; }
.b-dias-amar { background: #fdf3d0; color: #8a6a00; font-weight: 600; }
/* Persona clicable (enlace a ficha) en las tablas */
a.pmini-link { color: var(--texto); }
a.pmini-link:hover { color: var(--azul); text-decoration: none; }
a.pmini-link:hover span { text-decoration: underline; }
/* Live search: ocultar filas filtradas */
tr.hide { display: none; }

/* Aparatología (tratamiento) */
.b-trat-apar { background: #ede7f6; color: #5e35b1; }

/* Nº de caso copiable en Casos pendientes */
button.ref-copy { display: block; font: inherit; font-size: 12px; color: var(--texto-suave); background: none;
  border: none; padding: 1px 0; margin: 0; cursor: pointer; text-align: left; }
button.ref-copy:hover { color: var(--azul); text-decoration: underline; }
button.ref-copy.copiado { color: var(--ok); text-decoration: none; font-weight: 600; }

/* Etiqueta Quirúrgico */
.b-quir { background: #fde8ef; color: #b0186a; }
.chk-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.chk-row .chk-inline { margin: 0; }

/* --- MRA CRM: estilos añadidos sobre el tema heredado de MiD --- */
.muted { color: var(--texto-suave); }
.form-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
/* 1/4 – 3/4 (Empresa | Curso de interés en el alta de lead). */
.form-14 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 9px 16px; }
@media (max-width: 700px) { .form-2col, .form-14 { grid-template-columns: 1fr; } }
.dlg-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.celda-nota { max-width: 320px; color: var(--texto-suave); font-size: 13px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 8px 0; }
label.check input { width: auto; }
/* "+ Etiqueta" en discreto: azul muy suave, que las protagonistas son las etiquetas. */
.chip-add { background: #f0f5ff; color: var(--azul); border-color: #d4e0f7; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 14px; }
.kpi { background: var(--blanco, #fff); border: 1px solid var(--borde, #e3e6ef); border-radius: 10px; padding: 14px 16px; }
.kpi .kpi-num { font-size: 26px; font-weight: 700; }
.kpi .kpi-lbl { color: var(--texto-suave); font-size: 13px; }
.bloque { margin: 0 0 22px; }
.bloque h2 { font-size: 18px; margin: 0 0 10px; }
.nota-card { margin-bottom: 10px; }
/* El recuadro de escribir y la primera anotación estaban pegados (Manuel, 16/08/2026). */
#historial > form.card { margin-bottom: 14px; }
/* Anotación resaltada: el mismo efecto que pasar un fluorescente por encima del texto. El
   degradado deja el subrayado un poco por debajo de la línea, como el rotulador de verdad. */
.nota-flu {
  background: linear-gradient(180deg, transparent 8%, #fdf56b 8%, #fdf56b 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 2px;
}
.nota-acts .btn-mini.on { background: #fdf56b; border-color: #e6d94a; color: #5c5300; }

/* Leads por día (Manuel, 17/08/2026: «ver los de hoy, ayer, etc.»). Cada día es un bloque
   con su cabecera pegada arriba mientras se recorre, y dentro una línea por lead con la hora
   delante: así se ve de un golpe cuántos entraron y a qué hora. */
.cal-dias-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.cal-dias-barra .chip { padding: 3px 10px; border: 1px solid var(--linea, #dfe3e8); border-radius: 999px;
  font-size: 13px; color: inherit; text-decoration: none; }
.cal-dias-barra .chip.on { background: var(--azul, #2563eb); border-color: var(--azul, #2563eb); color: #fff; }
.cal-dias-barra .cal-total { margin-left: auto; font-size: 13px; }
.cal-dia { margin-bottom: 18px; }
.cal-dia-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 6px; padding: 6px 2px; background: var(--fondo, #f7f8fa); font-size: 15px; }
.cal-dia-nombre { font-weight: 700; }
.cal-dia-leads { display: flex; flex-direction: column; gap: 4px; }
.cal-lead { display: grid; grid-template-columns: 52px minmax(180px, 1.6fr) minmax(140px, 1.2fr) 130px 120px;
  gap: 10px; align-items: center; padding: 8px 10px; background: #fff; border: 1px solid var(--linea, #e6e8eb);
  border-radius: 8px; text-decoration: none; color: inherit; }
.cal-lead:hover { border-color: var(--azul, #2563eb); }

/* Separador de día dentro de la tabla de la lista. */
.tabla tr.fila-dia td { background: var(--fondo, #f3f4f6); font-size: 13px; padding: 6px 10px;
  border-top: 1px solid var(--linea, #e5e7eb); }
.fila-dia-nombre { font-weight: 700; margin-right: 8px; }

/* CALENDARIO DE MES, como el de Google o el de Apple. El mes va ENCIMA y centrado, y la
   rejilla ocupa el ancho de la página con un tope, para que no se estire sin fin en pantallas
   grandes (Manuel, 17/08/2026: «pon el filtro del mes y el año encima del calendario y centra
   todo»). */
.cal-wrap { max-width: 1180px; margin: 0 auto; }
.cal-barra { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 0 12px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav .btn-mini { min-width: 30px; text-align: center; }
.cal-mes-titulo { font-size: 19px; min-width: 190px; text-align: center; }
.cal-hoy { margin-left: 6px; }
.cal-barra .cal-total { margin: 0; font-size: 13px; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--linea, #e5e7eb); border: 1px solid var(--linea, #e5e7eb); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.cal-cab-sem { background: #fbfcfd; padding: 7px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #6b7280; text-align: center; }
.cal-celda { background: #fff; min-height: 104px; padding: 5px 6px 7px; display: flex;
  flex-direction: column; gap: 3px; }
.cal-celda-fuera { background: #fbfbfc; }
.cal-celda-fuera .cal-celda-num { color: #c2c7cf; }
.cal-celda-hoy { box-shadow: inset 0 0 0 2px var(--azul, #2563eb); }
.cal-celda-num { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: #374151; }
.cal-celda-num a, .cal-celda-num span:first-child { color: inherit; text-decoration: none;
  min-width: 20px; }
.cal-celda-num a:hover { text-decoration: underline; }
.cal-celda-hoy .cal-celda-num { color: var(--azul, #2563eb); }
.cal-celda-n { margin-left: auto; font-weight: 600; font-size: 11px; color: #6b7280;
  background: var(--fondo, #f3f4f6); border-radius: 999px; padding: 1px 7px; }
.cal-pill { display: block; font-size: 12px; line-height: 1.4; padding: 2px 7px; border-radius: 6px;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #eef2ff; color: #3730a3; }
.cal-pill:hover { filter: brightness(.95); }
.cal-pill-mra { background: #fff2e4; color: #92400e; }
.cal-pill-mid { background: #eceefb; color: #3730a3; }
.cal-mas { font-size: 11px; color: #6b7280; text-decoration: none; padding-left: 3px; margin-top: 1px; }
.cal-mas:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .cal-celda { min-height: 64px; padding: 3px; }
  .cal-pill { font-size: 10px; padding: 1px 4px; border-radius: 4px; }
  .cal-cab-sem { font-size: 10px; padding: 5px 2px; letter-spacing: 0; }
  .cal-mes-titulo { font-size: 16px; min-width: 150px; }
}
.cal-hora { font-variant-numeric: tabular-nums; color: #6b7280; font-size: 13px; }
.cal-lead .flame { margin-left: 4px; }
@media (max-width: 860px) {
  .cal-lead { grid-template-columns: 48px 1fr; row-gap: 2px; }
  .cal-lead .cal-prog, .cal-lead .cal-fase, .cal-lead .cal-gestor { grid-column: 2; font-size: 13px; }
}
/* Una chapa que además es botón (p. ej. «Sin matrícula ✎»): igual que las demás pero se nota
   que se puede pulsar. */
.badge-btn { border: 1px solid rgba(0,0,0,.08); cursor: pointer; font: inherit; font-size: 12px; }
.badge-btn:hover { filter: brightness(.95); }
.nota-card .muted { font-size: 12px; margin-bottom: 4px; }
a.kpi { text-decoration: none; color: inherit; display: block; }
a.kpi:hover { border-color: var(--azul); }
/* Clases de MiD dentro del calendario MRA: pastilla gris azulada, solo informativa. */
.cal-ev--mid { background: #eef0f6; color: #4a5068; border-left: 3px solid #9aa3c0; cursor: default; }
.revisar-form { display: inline-block; margin-left: 10px; }

/* --- MRA: maquetación de los modales propios (h3 = cabecera, form = cuerpo) --- */
.cal-dlg { max-width: 680px; }
.cal-dlg > h3 { margin: 0; padding: 15px 22px; font-size: 17px; background: #f6f7fb;
  border-bottom: 1px solid var(--borde, #e5e7eb); border-radius: 14px 14px 0 0; }
.cal-dlg > form { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 13px; }
.cal-dlg > form > label, .cal-dlg .form-2col label, .cal-dlg .form-14 label { display: block; font-weight: 600; font-size: 13.5px; color: #2b3040; }
.cal-dlg input:not([type=checkbox]), .cal-dlg select, .cal-dlg textarea { width: 100%; }
.cal-dlg .form-2col { gap: 12px 16px; }
.cal-dlg .dlg-acts { border-top: 1px solid var(--borde, #eef0f4); padding-top: 14px; margin-top: 4px; }
.cal-dlg hr { border: none; border-top: 1px solid var(--borde, #eef0f4); margin: 4px 0; }

/* Aviso de posible duplicado en el alta de lead (informa, no bloquea) */
.dlg-dup-aviso { background: #fff6e2; border: 1px solid #efc878; color: #7a5200;
  border-radius: 9px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; }
.dlg-dup-aviso a { color: #7a5200; text-decoration: underline; font-weight: 600; }

/* Alta rápida de medio en el formulario de lead */
.medio-add-row { display: flex; gap: 6px; align-items: center; }
.medio-add-row select { flex: 1; }
#medio-nuevo-inp { margin-top: 6px; }

/* Cabecera de la tarjeta de datos del contacto (botón Editar dentro del recuadro) */
.card-head { display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde, #eef0f4); }

/* Cabecera de cada anotación con sus botones Editar/Eliminar */
.nota-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.nota-acts { display: flex; gap: 6px; align-items: center; }
.nota-del-form { display: inline; margin: 0; }
.lead-nuevo { color: #e6a700; font-size: 15px; white-space: nowrap; }
/* Los tres atajos de la cabecera de Leads: calientes, nuevos y sin contactar. */
/* «No quiere publicidad»: un aviso que se lee, no un dato más de la lista. */
.aviso-nopubli { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  background: #fdeceb; border: 1px solid #f3b6b1; color: #8f251c; line-height: 1.45; }
.aviso-nopubli strong { color: #7a1d15; }
.dlg-cuerpo > .aviso-nopubli { margin: 0 0 2px; }
/* Alergias e intolerancias: mismo aviso rojo, y fuera del plegable — hay que verlas al abrir
   la ficha, que de ellas depende la comida de un curso (Manuel, 22/08/2026). */
.aviso-alergia { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  background: #fdeceb; border: 1px solid #f3b6b1; color: #8f251c; line-height: 1.45; }
.aviso-alergia strong { color: #b3362c; }

.chips-filtro { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 18px; }
/* La estrella del atajo, del mismo amarillo que la del listado. */
.chip-ico-estrella { color: #e6a700; font-size: 14px; }
/* Solo la CABECERA de la columna, en gris (Manuel, 20/08/2026): es una etiqueta fija que sale
   siempre, no un dato — su color no dice nada. Las filas y los chips de arriba se quedan con
   su color de verdad, que ahí sí importa. El 🔥 es un emoji a todo color: el filtro es lo único
   que lo apaga, un color: no funciona con él. */
.th-ico-gris { filter: grayscale(1); opacity: .55; }
.chip-estrella.on .chip-ico-estrella { color: #8a6100; }
.chips-filtro .chip { white-space: nowrap; }
.chip-nuevos.on { background: #ffe89a; border-color: #e9cf6a; color: #7a5600; }
.chip-estrella.on { background: #fff3cd; border-color: #e6c766; color: #8a6100; }
/* Subpestañas de sección (Cursos / Eventos): subrayadas y sin caja, para que se lean como
   dos partes de la misma pantalla y no se confundan con los chips de filtro. */
.subtabs { display: flex; gap: 26px; margin: 0 0 14px; border-bottom: 1px solid var(--borde, #e5e7eb);
  /* Solo se desplaza a lo ancho, y en la practica ni eso: con overflow a secas el
     navegador sacaba tambien una barra vertical al lado (Manuel, 25/08/2026). */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { height: 0; width: 0; }
.subtab { display: inline-block; padding: 9px 2px 11px; margin-bottom: -1px; white-space: nowrap;
  color: var(--texto-suave); font-size: 15px; font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.subtab:hover { color: var(--azul); text-decoration: none; }
.subtab.on { color: var(--azul); border-bottom-color: var(--azul); }

/* Todos / Leads / Conseguidos: van pegados a los tres atajos pero son otra cosa —dicen QUIÉN
   sale en la lista, no qué se destaca—, así que llevan una rayita de separación delante. */
.chips-conversion { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--borde, #e5e7eb); }
.chip-conv.on { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .chips-filtro { width: 100%; margin: 6px 0 0; }
  .chips-conversion { margin-left: 0; padding-left: 0; border-left: 0; }
}
/* Los chips de Leads en el móvil, en TRES líneas exactas (Manuel, 02/09/2026):
   «Calientes, Nuevos y Sin contactar en una línea; Todos, Leads y Conseguidos en otra»
   (Reactivados y MiA se quedan con la del medio). Compactados hasta que quepan. */
@media (max-width: 640px) {
  /* El padding-right de 120px reserva sitio al botón «+ Nueva acción» absoluto, pero ese
     botón vive en la PRIMERA fila: a la altura de los chips solo roba ancho y partía las
     tríadas (02/09/2026, segunda captura de Manuel). Aquí abajo, ancho completo. */
  /* .pagehead.pagehead-leads y no .pagehead-leads a secas: la regla de los 120px vive
     MÁS ABAJO en este fichero y a igual peso ganaría por orden (comprobado a 390px en el
     banco de pruebas del 02/09/2026 — cinco líneas en vez de tres). */
  .pagehead.pagehead-leads .pagehead-left { padding-right: 0; }
  .pagehead-leads .chips-filtro {
    display: flex; flex-wrap: wrap; width: 100%; gap: 5px; margin: 6px 0 0;
  }
  .pagehead-leads .chips-filtro .chip {
    padding: 4px 9px; font-size: 12px; margin: 0; white-space: nowrap;
  }
  .pagehead-leads .chips-conversion { margin: 2px 0 0; padding-left: 0; border-left: 0; }
}
/* La estrella y los fuegos comparten la primera columna: apilados y centrados, que la celda
   es estrecha (Manuel, 17/08/2026). */
.col-fuego { text-align: center; white-space: nowrap; }
.col-fuego .lead-nuevo { display: block; line-height: 1.1; font-size: 17px; }
.col-fuego .flame { display: block; line-height: 1.1; }
/* «Nuevo» en amarillo: el que hay que llamar. En cuanto se le contacta pasa a gris. */
.b-nuevo { background: #ffe89a; color: #7a5600; font-weight: 700; }
/* Quien viene a RECUPERAR módulos de otra edición: no está matriculado en esta, así que se
   distingue de un vistazo en la lista de asistentes y en el embudo del evento. */
.b-recupera { background: #ede4ff; color: #5b21b6; font-weight: 600; }
.ev-fila--recupera { background: #faf7ff; }
.ev-asist--recupera { border-left: 3px solid #8b5cf6; }
/* En la ficha, la línea de «recupera» va colgada del curso que sí hizo. */
.cursos-recupera { color: #5b21b6; }
.prof-fieldset { border: 1px solid var(--borde, #e5e7eb); border-radius: 10px; padding: 10px 14px 12px; }
.prof-fieldset legend { font-weight: 600; font-size: 13.5px; padding: 0 6px; }
.lead-alerta { color: #d33; font-size: 15px; cursor: help; }
.chip-sep { border-left: 1px solid var(--borde, #d9dde6); margin: 0 4px; }
/* El chip azul de "+ Nuevo lead" mantenia el texto azul al pasar el raton: ilegible. */
.chip-add:hover { background: #e2ecfd; border-color: #b9cdf2; color: var(--azul); }
.chip.on:hover { color: #fff; }
/* Filtros de Leads: desplegables algo mas estrechos y buscador mas ancho. */
form.filterbar { flex-wrap: wrap; }
form.filterbar select { flex: 0 1 auto; max-width: 172px; }
form.filterbar input[type="search"] { flex: 2 1 260px; min-width: 200px; }

/* WhatsApp siempre en su verde */
.wa-ico { color: #25d366; }
a:hover .wa-ico, a.wa:hover .wa-ico { color: #128c7e; }

/* ---- usuarios conectados en la cabecera ---- */
.online { display: inline-flex; align-items: center; margin-right: 10px; }
.online .uav { position: relative; display: inline-flex; margin-left: -7px; border-radius: 50%; }
.online .uav:first-child { margin-left: 0; }
.online .uav::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: #22c55e; border: 1.5px solid #fff;
}
.uav-img { border-radius: 50%; object-fit: cover; display: block; border: 2px solid #fff; background: #fff; }
.uav-ini {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--azul); color: #fff; font-weight: 600; border: 2px solid #fff;
}
.uav-26 { width: 26px; height: 26px; font-size: 12px; }
.uav-32 { width: 32px; height: 32px; font-size: 14px; }
@media (max-width: 720px) { .online { display: none; } }

/* ---- alternador de vista (lista / pipeline) ---- */
.vista-toggle { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; margin-left: 10px; }
.vista-toggle .vt { display: inline-flex; align-items: center; padding: 7px 10px; color: var(--texto-suave); }
.vista-toggle .vt.on { background: var(--azul); color: #fff; }
.vista-toggle .vt:hover { text-decoration: none; }

/* ---- kanban (pipeline con arrastre) ---- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; align-items: start; padding-bottom: 10px; }
.kb-col { background: #f2f4f8; border-radius: 12px; padding: 10px; min-height: 240px; }
.kb-col h3 { margin: 2px 4px 10px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.kb-col-neg { background: #faf0ef; }
.kb-col-ok { background: #eef8f0; }
.kb-cards { display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.kb-card { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; cursor: grab; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.kb-card:active { cursor: grabbing; }
.kb-card .kb-meta { font-size: 12.5px; color: var(--texto-suave); }
/* El teléfono de la tarjeta: el icono de WhatsApp delante y el número bien legible, que se
   usa tanto para escribir como para llamar (Manuel, 17/08/2026). */
.kb-tel { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 12.5px; color: var(--texto-suave); text-decoration: none; }
.kb-tel .wa-ico { width: 14px; height: 14px; flex: none; }
.kb-tel:hover { color: #128c7e; text-decoration: underline; }
/* la tarjeta arrastrada se ve en azul (como los botones) para seguir el desplazamiento */
.kb-card.kb-arrastrando { opacity: 1; background: var(--azul); border-color: var(--azul); }
.kb-card.kb-arrastrando, .kb-card.kb-arrastrando a, .kb-card.kb-arrastrando strong,
.kb-card.kb-arrastrando .kb-meta, .kb-card.kb-arrastrando .muted,
.kb-card.kb-arrastrando .prio, .kb-card.kb-arrastrando .flame { color: #fff; }
.kb-drop-over { outline: 2px dashed var(--azul); outline-offset: -4px; }
.kb-cerrada { opacity: .3; text-decoration: line-through; transition: opacity .3s; }
.kb-mas { font-size: 13px; padding: 4px; }
.kb-hint { font-size: 13px; padding: 8px; }

/* ---- barra de cambios masivos ---- */
.bulk-bar { position: sticky; bottom: 12px; z-index: 40; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 24px rgba(16,24,40,.16); margin-top: 14px; }
.bulk-fecha { display: inline-flex; gap: 6px; align-items: center; }
.col-check { width: 26px; }

/* ---- panel de Inicio ---- */
/* Las cajas se reparten solas: con cuatro caben en una fila y con seis también, sin tener
   que ir cambiando la clase cada vez que se añade una (Manuel, 27/08/2026). */
.kpis-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .kpis-4 { grid-template-columns: repeat(2, 1fr); } }
/* Lo de cada uno, con un filete azul a la izquierda para distinguirlo de los totales. */
.kpi-mio { border-left: 3px solid var(--azul); }
.kpi-rojo { color: var(--error); }
.kpi-verde { color: var(--ok); }
.kpi-titulo { display: block; color: var(--texto-suave); font-size: 13px; margin-bottom: 4px; }
.kpi-cifra { display: block; font-size: 27px; font-weight: 700; line-height: 1.2; }
.kpi-sube { color: #16a34a; font-size: 13px; font-weight: 600; }
.kpi-baja { color: var(--error); font-size: 13px; font-weight: 600; }
.ini-2col { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .ini-2col { grid-template-columns: 1fr; } }
.ini-verlink { font-size: 13.5px; font-weight: 400; margin-left: 8px; }
.ini-pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; }
.ini-pipe-col { background: #f2f4f8; border-radius: 10px; padding: 8px; }
.ini-pipe-col h3 { font-size: 12.5px; margin: 2px 2px 8px; color: var(--texto-suave); display: flex; gap: 6px; align-items: center; }
.ini-pipe-card { display: block; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 6px 8px; font-size: 13px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Al pasar el cursor, subrayar SOLO el nombre.
   Antes se subrayaba el enlace entero, y como el enlace lleva dentro la fecha y la etiqueta
   MRA/MiD, la raya salía por la izquierda cruzando el hueco entre la fecha y la etiqueta:
   parecía un tachón suelto delante del nombre. El subrayado tiene que decir "esto se pulsa y
   te lleva a esta persona", y quien te lleva a la persona es su nombre. */
.ini-pipe-card:hover { text-decoration: none; }
.ini-pipe-card:hover .ini-pipe-nom { text-decoration: underline; }
/* La etiqueta "★ Nuevo" de los últimos leads: igual que en la pantalla de Leads. */
.ini-nuevo { margin-left: 4px; font-size: 11px; }
.ini-sep { margin-top: 22px; }
.ini-chart svg { width: 100%; height: 130px; display: block; }
.ini-chart-pie { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 4px 0; font-size: 13px; }
.ini-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ini-lista li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.ini-hora { color: var(--texto-suave); font-variant-numeric: tabular-nums; font-size: 13px; }
/* La actividad, en DOS columnas: ocupa todo el ancho de la pantalla y en una sola fila por
   evento quedaba media página en blanco (Manuel, 18/08/2026). Se llena por columnas —primero
   los cinco de arriba y luego los de la derecha— para que se siga leyendo en orden de tiempo. */
.ini-activ { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
  gap: 8px 32px; align-content: start; }
.ini-activ li { flex-wrap: wrap; min-width: 0; }
.ini-activ li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* En la actividad la fecha va DELANTE, en su propia columna: todas alineadas y sin pegarse
   al texto ni irse al otro extremo de la fila (Manuel, 18/08/2026). */
.ini-activ .ini-cuando { margin-left: 0; flex: none; width: 108px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ini-activ { grid-auto-flow: row; grid-template-rows: none; } }
.ini-cuando { font-size: 12px; margin-left: auto; }
.ini-tipo { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; top: -1px; }
.ini-tipo-nota { background: #0d2ce2; }
.ini-tipo-accion { background: #16a34a; }
.ini-tipo-pedido { background: #ff7a00; }
.ini-tipo-lead { background: #a855f7; }
.card-head-acts { display: inline-flex; gap: 8px; align-items: center; }
.descartar-form { display: inline; margin: 0; }

/* ---- modo "en masa": las casillas solo aparecen al activarlo ---- */
.col-check { display: none; }
body.masa-on .col-check { display: table-cell; }
.masa-btn.on { background: var(--azul-claro); color: var(--azul); border-color: var(--azul); }

/* ---- refinado visual (14-jul): mismo lenguaje, más suave y moderno ---- */
:root { --sombra-2: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06); }
.card { border-radius: 14px; box-shadow: var(--sombra-2); border: 1px solid #eceef4; }
.tablecard { border-radius: 14px; }
.tabla thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); font-weight: 600; background: #fafbfe;
}
.tabla tbody tr:hover { background: #f7f9ff; }
.btn { border-radius: 10px; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn-primary { box-shadow: 0 1px 2px rgba(13,44,226,.25); }
.btn-primary:hover { box-shadow: 0 2px 8px rgba(13,44,226,.30); }
.chip { transition: background .15s, border-color .15s, color .15s; }
.topbar { backdrop-filter: saturate(1.4); box-shadow: 0 1px 0 #eceef4, 0 4px 16px rgba(16,24,40,.04); }
.mainnav a.on { background: var(--azul-claro); border-radius: 10px; }
.kpi { border-radius: 16px; }
.kpi .kpi-cifra { letter-spacing: -0.02em; }
.kb-col { background: #f5f7fc; border: 1px solid #eceef4; }
.kb-card { transition: box-shadow .15s, transform .1s; }
.kb-card:hover { box-shadow: 0 3px 10px rgba(16,24,40,.10); }
.cal-dlg { border-radius: 16px; box-shadow: 0 12px 48px rgba(16,24,40,.22); }
.cal-dlg::backdrop { background: rgba(13, 20, 40, .35); backdrop-filter: blur(2px); }
input, select, textarea { border-radius: 9px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 1px;
}
.badge { border-radius: 999px; }
.pagehead { align-items: center; }

/* casilla "en masa" dentro de las tarjetas del pipeline */
.kb-card { position: relative; }
/* El lápiz de la tarjeta del pipeline: abre el "Cerrar / mover" sin arrastrar. Se deja
   hueco a la derecha del título para que no se pisen. */
.kb-card > strong { padding-right: 30px; }
.kb-mod { position: absolute; top: 7px; right: 7px; padding: 1px 7px; font-size: 13px; line-height: 1.5; }
.kb-check { position: absolute; top: 7px; right: 8px; }
body.masa-on .kb-check { display: inline-flex; }
.masa-btn { cursor: pointer; font-family: inherit; }
.masa-btn.on { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }

/* "seleccionar todo" junto a los títulos, visible solo en modo en-masa */
.sel-todo { display: none; font-size: 13px; font-weight: 400; color: var(--texto-suave); align-items: center; gap: 5px; margin-left: 6px; cursor: pointer; }
body.masa-on .sel-todo { display: inline-flex; }
.sel-todo input { margin: 0; }

/* lead caliente */
.flame { cursor: default; }
.chip-fuego.on { background: #fff3e8; border-color: #ff7a00; color: #b45309; font-weight: 600; }

/* línea de tiempo 360º de la ficha */
.tl-item { display: flex; align-items: baseline; gap: 8px; padding: 5px 14px; font-size: 13.5px; color: var(--texto-suave); }
.tl-item .ini-tipo { flex: none; }
.tl-txt { color: var(--texto); }
.tl-cuando { margin-left: auto; font-size: 12px; white-space: nowrap; }
.ini-tipo-matricula { background: #16a34a; }

/* cabeceras ordenables de cursos */
.th-orden { color: inherit; text-decoration: none; white-space: nowrap; }
.th-orden.on { color: var(--azul); }
.th-orden:hover { color: var(--azul); text-decoration: none; }

.num-corto { width: 90px; }

/* nombre + simbolitos en una sola línea */
.nom-icos { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.nom-icos .pmini { display: inline-flex; align-items: center; gap: 8px; }
.th-flecha { color: #b9c0cc; font-size: 11px; }

/* resumen de programas clicable */
.resumen-link { color: inherit; display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 2px 4px; }
.resumen-link:hover { background: var(--azul-claro); text-decoration: none; }

/* buscador: el botón siempre pegado a la derecha del recuadro */
.buscar-row { display: flex; flex: 1 1 260px; gap: 6px; min-width: 240px; align-items: stretch; }
.buscar-row input[type="search"] { flex: 1; min-width: 0; }
.buscar-row .btn { white-space: nowrap; }

.nota-link { color: inherit; }
.nota-link:hover { color: var(--azul); text-decoration: none; }

/* botones rápidos de estado en la cabecera de la ficha */
.estado-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-right: 10px; }
.estado-btns .estado-btn.on { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
/* Rechaza/Baja activo se pinta ROJO: estar de baja no es un estado azul cualquiera. */
.estado-btns .estado-btn-neg.on { background: var(--error); border-color: var(--error); color: #fff; }
/* Inscrito/alumno activo: verde claro, como el badge «Positivo» (Manuel, 24/07/2026). */
.estado-btns .estado-btn-ok.on { background: #e2f3e5; border-color: #a9dcbc; color: #2e7d32; }
.estado-btn-neg:hover { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.estado-btn-ok:hover { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
@media (max-width: 900px) { .estado-btns { margin-bottom: 6px; } }

/* recuadros de «Cursos de interés»: uno por candidatura, con sus botones de estado dentro */
.cand-lista { display: flex; flex-direction: column; gap: 12px; }
.cand-box { padding: 14px 16px; }
.cand-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
/* Quién lleva la candidatura y desde cuándo: línea propia, debajo del nombre del curso. Va
   el último del cand-head para que los fuegos se queden arriba, pegados a la derecha del
   nombre (Manuel, 17/08/2026: «los fueguecitos a la derecha del nombre del curso»). */
.cand-quien { flex-basis: 100%; order: 9; font-size: .88em; margin-top: -2px; }
.cand-head .fuegos-btns { margin-left: auto; }
.cand-head .cand-cambiar { margin-left: 0; }
.cand-titulo { font-size: 1.02em; }
.cand-meta { font-size: .9em; }
.cand-cambiar { margin-left: auto; }
.cand-box .estado-btns { margin-right: 0; }
.cand-estado-ro { margin-top: 4px; }
/* interés simple (sin candidatura): mismo recuadro, más discreto y sin fila de botones */
.cand-box-interes { border-left: 3px solid var(--borde, #d1d5db); }
.cand-box-interes .cand-head { margin-bottom: 0; }

/* acciones con prioridad alta */
.prio { color: var(--error); font-weight: 800; margin-right: 2px; }
/* chip Calientes dentro del título de Leads */
h1 .chip-fuego { font-size: 14px; font-weight: 600; margin-left: 8px; vertical-align: 3px; }

/* ficha de alumno: 2/3 contenido + 1/3 panel económico */
.ficha-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0 22px; align-items: start; }
.ficha-grid > .ficha-main, .ficha-grid > .ficha-aside { min-width: 0; }
@media (max-width: 1100px) { .ficha-grid { grid-template-columns: 1fr; } }
.eco-h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 15px; }
.eco-panel { padding: 12px 14px; }
.eco-barra { height: 14px; border-radius: 7px; background: var(--error-bg); overflow: hidden; }
.eco-barra-relleno { height: 100%; background: #e8a13c; }
.eco-barra-relleno.eco-ok { background: var(--ok); }
/* Barra a tres colores (Manuel, 19/07/2026): verde pagado, rojo vencido y el fondo
   naranja es lo que queda por vencer del coste del máster */
.eco-barra-tri { display: flex; background: #e8a13c; }
.eco-barra-tri .eco-seg { height: 100%; flex: none; }
.eco-seg-pagado { background: var(--ok); }
.eco-seg-vencido { background: #e5484d; }
/* Canal UMA: el 15% de lo pagado que se queda la universidad, en morado (Manuel, 28/07/2026). */
.eco-seg-canon { background: #8b5cf6; }
.eco-badge-canon { background: #f3e8ff; border: 1px solid #c4b5fd; color: #6d28d9; }
.eco-barra-mini { height: 8px; margin: 8px 0 4px; }
/* La barra de la UMA solo cuenta dos cosas: lo devuelto (verde) y lo que nos deben (rojo).
   El resto va en gris —lo que aún no se ha generado—, que en naranja parecía que faltaba
   algo por cobrar y tapaba el rojo (Manuel, 23/08/2026). */
.eco-barra-uma { background: #eef1f4; }
.eco-cifra { margin: 8px 0 0; }
.eco-item { padding: 10px 14px; margin-bottom: 10px; }
.eco-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.eco-item-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; }
.eco-pedidos { padding: 8px 14px; }
.eco-pedido { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--borde, #e5e7eb); font-size: 13.5px; }
.eco-pedido:last-child { border-bottom: 0; }
/* pagos DENTRO del recuadro de su curso (Manuel, 23/07/2026) */
.eco-pagos-curso { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde, #e5e7eb); }
.eco-pagos-tit { font-size: 12px; font-weight: 600; color: var(--gris-txt, #6b7280); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.eco-pagos-curso .eco-pedido { border-bottom: 0; padding: 3px 0; }
.pedido-curso-btn { white-space: nowrap; }
.eco-pagos-ayuda { margin: -4px 0 8px; font-size: 12.5px; }
/* recuadro de un curso con pagos pero SIN matrícula (pago mal colocado, a recolocar) */
.eco-item-huerfano { border-left: 3px solid var(--error, #dc2626); }
/* combobox de un campo (buscador dentro del desplegable) para cursos */
.combo-curso { position: relative; }
.combo-curso-input { width: 100%; }
.combo-curso-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0;
  max-height: 320px; overflow-y: auto; list-style: none; padding: 4px 0;
  background: var(--fondo-card, #fff); border: 1px solid var(--borde, #d1d5db); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); }
/* NINGÚN diálogo puede pasar del alto de la pantalla: si su contenido no cabe, se desplaza
   POR DENTRO. El `overflow: visible` que se puso el 27/07/2026 (para que la lista del
   desplegable de cursos no quedara recortada en diálogos pequeños) dejaba los botones de
   Guardar/Cancelar fuera de la pantalla en las ventanas largas —«Editar contacto» con datos
   de facturación— y no había forma de llegar a ellos (Manuel, 30/07/2026).
   Mientras un desplegable está abierto, el diálogo crece para que la lista quepa entera
   (con tope: en una pantalla baja manda el alto de la pantalla, nunca el min-height). */
dialog.cal-dlg { overflow: auto; max-height: 88vh; max-height: 88dvh; }
.cal-dlg:has(.combo-curso-list:not([hidden])),
.cal-dlg:has(.combo-list.open) { min-height: min(430px, 70vh); }
.combo-curso-opt { padding: 6px 12px; cursor: pointer; font-size: 13.5px; }
.combo-curso-opt:hover { background: var(--azul-suave, #eef2ff); }
.combo-curso-grp { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--gris-txt, #6b7280); }
/* Inscrito (en marcha) DESTACA en azul; Cursos realizados (pasados) más apagado en gris */
.tabla-inscrito { border-left: 3px solid var(--azul, #2563eb); box-shadow: 0 1px 6px rgba(37,99,235,.10); }
.tabla-inscrito .tabla td:first-child a { font-weight: 700; }
.tabla-realizado { border-left: 3px solid var(--borde, #d1d5db); background: var(--fondo-suave, #fafafa); }
.tabla-realizado .tabla { color: var(--texto-suave, #6b7280); }
.tabla-realizado .tabla td:first-child a { color: var(--texto-suave, #6b7280); font-weight: 400; }
/* en un curso YA pasado, el «Pagado» no necesita gritar: verde muy suave, casi gris */
.tabla-realizado .badge.b-activo { background: #eef1ee; color: #7d8f80; }
/* diálogo «No es un lead»: dos opciones (pasar a Otros / eliminar) */
.nolead-op p { margin: .2rem 0 .5rem; font-size: 13.5px; }
.nolead-op .dlg-acts { justify-content: flex-end; }
#dlg-no-lead hr { border: 0; border-top: 1px solid var(--borde, #e5e7eb); margin: 14px 0; }
/* desplegable del histórico (acciones/incidencias todas cerradas) */
.hist-toggle > summary { cursor: pointer; color: var(--texto-suave, #6b7280); font-size: 13.5px; padding: 4px 2px; list-style: revert; }
.hist-toggle > summary:hover { color: var(--azul, #2563eb); }
.hist-toggle[open] > summary { margin-bottom: 6px; }
.eco-borrar { margin-top: 10px; text-align: right; }
/* descripción de acción sin contacto: se abre igualmente */
.btn-link { background: none; border: 0; padding: 0; color: var(--azul); cursor: pointer; font: inherit; text-align: left; }
.btn-link:hover { text-decoration: underline; }
/* anchuras de la barra de pago (la CSP no permite style= en línea): un porcentaje
   ENTERO (0-100), no solo saltos de 5 — el tramo del canon UMA ("morado") se resta al
   verde y el resultado puede caer en cualquier número (p.ej. 34), no solo en un múltiplo
   de 5: con clases a medias faltaba justo esa y el segmento colapsaba a 0 (revisión
   3-sep-2026, caso María Yamilet Grillo #170: el recuadro del curso salía casi sin verde
   aunque el texto ya decía el importe correcto). */
.eco-w0 { width: 0%; }
.eco-w1 { width: 1%; }
.eco-w2 { width: 2%; }
.eco-w3 { width: 3%; }
.eco-w4 { width: 4%; }
.eco-w5 { width: 5%; }
.eco-w6 { width: 6%; }
.eco-w7 { width: 7%; }
.eco-w8 { width: 8%; }
.eco-w9 { width: 9%; }
.eco-w10 { width: 10%; }
.eco-w11 { width: 11%; }
.eco-w12 { width: 12%; }
.eco-w13 { width: 13%; }
.eco-w14 { width: 14%; }
.eco-w15 { width: 15%; }
.eco-w16 { width: 16%; }
.eco-w17 { width: 17%; }
.eco-w18 { width: 18%; }
.eco-w19 { width: 19%; }
.eco-w20 { width: 20%; }
.eco-w21 { width: 21%; }
.eco-w22 { width: 22%; }
.eco-w23 { width: 23%; }
.eco-w24 { width: 24%; }
.eco-w25 { width: 25%; }
.eco-w26 { width: 26%; }
.eco-w27 { width: 27%; }
.eco-w28 { width: 28%; }
.eco-w29 { width: 29%; }
.eco-w30 { width: 30%; }
.eco-w31 { width: 31%; }
.eco-w32 { width: 32%; }
.eco-w33 { width: 33%; }
.eco-w34 { width: 34%; }
.eco-w35 { width: 35%; }
.eco-w36 { width: 36%; }
.eco-w37 { width: 37%; }
.eco-w38 { width: 38%; }
.eco-w39 { width: 39%; }
.eco-w40 { width: 40%; }
.eco-w41 { width: 41%; }
.eco-w42 { width: 42%; }
.eco-w43 { width: 43%; }
.eco-w44 { width: 44%; }
.eco-w45 { width: 45%; }
.eco-w46 { width: 46%; }
.eco-w47 { width: 47%; }
.eco-w48 { width: 48%; }
.eco-w49 { width: 49%; }
.eco-w50 { width: 50%; }
.eco-w51 { width: 51%; }
.eco-w52 { width: 52%; }
.eco-w53 { width: 53%; }
.eco-w54 { width: 54%; }
.eco-w55 { width: 55%; }
.eco-w56 { width: 56%; }
.eco-w57 { width: 57%; }
.eco-w58 { width: 58%; }
.eco-w59 { width: 59%; }
.eco-w60 { width: 60%; }
.eco-w61 { width: 61%; }
.eco-w62 { width: 62%; }
.eco-w63 { width: 63%; }
.eco-w64 { width: 64%; }
.eco-w65 { width: 65%; }
.eco-w66 { width: 66%; }
.eco-w67 { width: 67%; }
.eco-w68 { width: 68%; }
.eco-w69 { width: 69%; }
.eco-w70 { width: 70%; }
.eco-w71 { width: 71%; }
.eco-w72 { width: 72%; }
.eco-w73 { width: 73%; }
.eco-w74 { width: 74%; }
.eco-w75 { width: 75%; }
.eco-w76 { width: 76%; }
.eco-w77 { width: 77%; }
.eco-w78 { width: 78%; }
.eco-w79 { width: 79%; }
.eco-w80 { width: 80%; }
.eco-w81 { width: 81%; }
.eco-w82 { width: 82%; }
.eco-w83 { width: 83%; }
.eco-w84 { width: 84%; }
.eco-w85 { width: 85%; }
.eco-w86 { width: 86%; }
.eco-w87 { width: 87%; }
.eco-w88 { width: 88%; }
.eco-w89 { width: 89%; }
.eco-w90 { width: 90%; }
.eco-w91 { width: 91%; }
.eco-w92 { width: 92%; }
.eco-w93 { width: 93%; }
.eco-w94 { width: 94%; }
.eco-w95 { width: 95%; }
.eco-w96 { width: 96%; }
.eco-w97 { width: 97%; }
.eco-w98 { width: 98%; }
.eco-w99 { width: 99%; }
.eco-w100 { width: 100%; }

/* el panel económico destaca como recuadro propio con banda azul */
.ficha-aside > .bloque { background: #f4f6fd; border: 1px solid var(--azul-claro); border-left: 4px solid var(--azul); border-radius: 12px; padding: 12px 14px 14px; }
.ficha-aside > .bloque > h2 { margin-top: 0; }

/* columna de fuegos: estrecha y centrada, pegada al nombre */
.col-fuego { text-align: center; width: 52px; white-space: nowrap; padding-right: 2px; }
/* botones rápidos de fecha en los diálogos de acción */
.fecha-rapida { display: inline-flex; gap: 6px; margin-top: 5px; }
/* El par fecha + hora de programar una acción: la fecha con su calendario nativo, la hora con
   un desplegable propio de medias horas (Manuel, 20/08/2026). */
.fh-par { display: flex; gap: 8px; margin-top: 5px; }
.fh-par .fh-dia { flex: 3; width: auto; min-width: 0; }
.fh-par .fh-hora { flex: 2; width: auto; min-width: 0; }
/* selector de fuegos en la cabecera de la ficha */
.fuegos-btns { display: inline-flex; gap: 4px; margin-right: 8px; }
.fuegos-btns .fuego-btn.on { background: var(--azul-claro); border-color: var(--azul); }
/* El nivel que dice la puntuación automática: se marca en flojo, para que se distinga del
   que se ha puesto A MANO (azul) y se note al pulsar la ✕ que algo ha cambiado. */
.fuegos-btns .fuego-btn.auto { border-style: dashed; border-color: var(--azul); opacity: .75; }
.fuegos-btns .fuego-btn[disabled] { opacity: .35; cursor: default; }

/* barra de estados en lo alto de la ficha */
.estado-bar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.estado-bar .estado-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-right: 0; }
.estado-bar-descartar { margin-left: auto; }
/* fila del buscador de referidor */
.ref-row .combo { flex: 1; }
.ref-nuevo { margin-top: 5px; }

/* tarjeta de preinscripción en la ficha */
.preins-card { padding: 12px 14px; }
.preins-card .form-2col > div { padding: 2px 0; }
.preins-cv { margin: 10px 0 0; }

/* acción rápida (rayo) en el listado de leads */
.accion-rapida-btn { font-size: 15px; line-height: 1; }
/* chips de cursos de interés en el alta de lead */
.interes-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.interes-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--azul-claro); border-radius: 14px; padding: 3px 6px 3px 10px; font-size: 13px; }
.interes-chip button { border: 0; background: none; cursor: pointer; color: var(--texto-suave); font-size: 15px; line-height: 1; }
/* comerciales inactivos atenuados */
.fila-inactiva td { opacity: .55; }

/* cabecera en dos grupos: izquierda (título + vista) y derecha (crear) */
.pagehead-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagehead-left h1 { margin: 0; }
.pagehead-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pagehead-bottom { display: flex; justify-content: flex-end; margin: 18px 0 4px; }

/* Ajustes -> Incidencias: pares de posibles duplicados */
.dup-par { padding: 12px 14px; margin-bottom: 12px; }
.dup-resuelto { opacity: .6; }
.dup-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .dup-cols { grid-template-columns: 1fr; } }
.dup-col { background: var(--fondo); border-radius: 10px; padding: 10px 12px; }
.dup-dato { font-size: 13.5px; margin-top: 2px; }
.dup-col .descartar-form { margin-top: 8px; }
.dup-acts { margin-top: 10px; display: flex; justify-content: flex-end; }

/* Botón que se va al extremo izquierdo del pie de un diálogo (p. ej. Eliminar,
   separado de Guardar/Cancelar para que no se pulse sin querer). */
.dlg-acts-izq { margin-right: auto; }

/* Registro de actividad (Ajustes -> Registro de actividad) */
.act-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
/* El texto de cada filtro va ENCIMA del campo (columna): así todos los campos quedan al
   mismo nivel y los botones Filtrar / Quitar filtros cuadran con ellos (Manuel, 23/07/2026). */
.act-filtros label { font-size: 13px; color: var(--texto-suave); display: inline-flex; flex-direction: column; gap: 2px; }
.act-filtros select, .act-filtros input[type="date"] { height: 38px; }
.act-filtros .btn { height: 38px; display: inline-flex; align-items: center; }
.act-ver { color: var(--texto-suave); }
.paginacion { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }

/* El <form> al que se engancha el botón Eliminar de un diálogo no pinta nada:
   sin esto deja un hueco al final de la ventana. */
.dlg-form-oculto { display: contents; }

/* Etiquetas de los doctores (ficha y listado) */
.etiquetas-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; background: #eef1f4; color: var(--texto-suave);
  border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.etiqueta.et-verde { background: #e2f3e5; color: #2e7d32; }
.etiqueta.et-azul { background: #e4edfb; color: #1b4fa0; }
.etiqueta.et-naranja { background: #ffe9d6; color: #c2410c; }
.etiqueta.et-morado { background: #efe6fb; color: #6b3fa0; }
.etiqueta.et-rojo { background: #fbe8e6; color: #b3362c; }
.etiqueta-del { display: inline; margin: 0; }
.etiqueta-del button { border: none; background: none; cursor: pointer; color: inherit; opacity: .5;
  font-size: 14px; line-height: 1; padding: 0 3px; border-radius: 999px; }
.etiqueta-del button:hover { opacity: 1; background: rgba(0,0,0,.08); }
.etiqueta-mini { display: inline-block; background: #eef1f4; color: var(--texto-suave); border-radius: 999px;
  padding: 1px 8px; font-size: 11.5px; font-weight: 600; margin-left: 4px; white-space: nowrap; }

/* --- Etiquetas: más contraste (el gris claro no se apreciaba) --- */
.etiqueta { background: #dfe4ea; color: #2b3040; border: 1px solid #c4ccd6; }
.etiqueta.et-verde { background: #cdebd3; color: #1b5e20; border-color: #a5d6ac; }
.etiqueta.et-azul { background: #d3e2fb; color: #14356e; border-color: #a9c5f0; }
.etiqueta.et-naranja { background: #ffdcbf; color: #8f3007; border-color: #f5bb8d; }
.etiqueta.et-morado { background: #e3d5f7; color: #4c2882; border-color: #c9b0ec; }
.etiqueta.et-rojo { background: #fbd5d1; color: #8f251c; border-color: #f0aaa3; }
.etiqueta-del button:hover { background: rgba(0,0,0,.12); }

/* --- Diálogos altos: cabecera y botones siempre a la vista, sin que se corten --- */
/* OJO al [open]: sin él, este display:flex pisa la regla del navegador que oculta un
   <dialog> cerrado (dialog:not([open]){display:none}) y la ventana no se cierra nunca. */
/* Un diálogo alto YA tiene el scroll dentro (en su .dlg-cuerpo), así que él no debe tener
   otro: si lo tiene salen DOS barras, una dentro de otra, y otras dos abajo (Manuel,
   17/08/2026, al mandar un correo desde la ficha de Ingrid Victoria). */
.cal-dlg.dlg-alto[open] { display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
.cal-dlg.dlg-alto > h3 { flex: 0 0 auto; }
.cal-dlg.dlg-alto > .nl-paso, .cal-dlg.dlg-alto > .dlg-cuerpo { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.cal-dlg.dlg-alto > form.nl-paso { padding-bottom: 0; }
/* El cuerpo de la ventana de enviar email también es "alto": el scroll queda dentro y los
   botones de Enviar/Cancelar, pegados abajo y siempre a la vista (Manuel, 16/07/2026). */
.cal-dlg.dlg-alto > .dlg-cuerpo { padding-bottom: 0; overflow-x: hidden; }
/* Y que una URL larga del correo no ensanche la ventana: se parte donde toque en vez de
   empujar el contenido y sacar una barra horizontal. */
.cal-dlg.dlg-alto > .dlg-cuerpo, .cal-dlg.dlg-alto .dlg-cuerpo * { min-width: 0; }
.cal-dlg .dlg-cuerpo p, .cal-dlg .dlg-cuerpo li, .cal-dlg .dlg-cuerpo label,
.cal-dlg .dlg-cuerpo .mail-previo { overflow-wrap: anywhere; }
.cal-dlg textarea { max-width: 100%; box-sizing: border-box; }
.cal-dlg.dlg-alto .dlg-acts { position: sticky; bottom: 0; background: #fff; padding: 12px 0;
  margin-top: 0; border-top: 1px solid var(--borde, #eef0f4); }
/* Formulario de alta más apretado: así cabe entero sin scroll en una pantalla normal. */
#dlg-nuevo-lead > form { gap: 9px; }
#dlg-nuevo-lead .form-2col { gap: 9px 16px; }
#dlg-nuevo-lead label { font-size: 13px; }
#dlg-nuevo-lead input, #dlg-nuevo-lead select { padding-top: 7px; padding-bottom: 7px; }

/* --- Nuevo lead, paso 1: buscar antes de crear --- */
#nl-paso-buscar { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
#nl-paso-buscar > label { display: block; font-weight: 600; font-size: 13.5px; color: #2b3040; }
#nl-buscar { width: 100%; }
.nl-res { display: flex; flex-direction: column; gap: 6px; min-height: 42px; }
.nl-res-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--borde, #e3e6ef); border-radius: 9px; padding: 8px 11px; text-decoration: none; color: inherit; }
.nl-res-item:hover { border-color: var(--azul); background: #f6f9ff; }
.nl-res-nom { font-weight: 600; font-size: 14px; }
.nl-res-meta { color: var(--texto-suave); font-size: 12.5px; }
.nl-res-vacio { color: var(--texto-suave); font-size: 13.5px; padding: 6px 2px; }
.nl-res-abrir { font-size: 12.5px; font-weight: 600; color: var(--azul); white-space: nowrap; }

/* Pie de los KPI de Inicio (comparativa con el mes pasado) */
.kpi-pie { display: block; margin-top: 5px; font-size: 12.5px; color: var(--texto-suave); }

/* Marketing → buscar doctores (segmentador) */
.seg-filtros { padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.seg-fila { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.seg-fila > label { display: block; font-size: 13px; font-weight: 600; color: #2b3040; }
.seg-fila-checks { align-items: center; gap: 16px; }
.seg-checks { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 400; }
.seg-atajos { margin-bottom: 12px; align-items: center; }
.seg-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f6f7fb;
  border: 1px solid var(--borde, #e3e6ef); border-radius: 10px; padding: 9px 13px; margin-bottom: 10px; }
.seg-barra-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.seg-check { width: 34px; text-align: center; }
.seg-wa-lista { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.seg-wa-item { display: block; border: 1px solid var(--borde, #e3e6ef); border-radius: 8px; padding: 7px 10px;
  text-decoration: none; color: inherit; font-size: 13.5px; }
.seg-wa-item:hover { border-color: #25d366; background: #f2fdf6; }
.btn-off { opacity: .45; pointer-events: none; }
.dlg-cuerpo { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
/* La ayuda de un diálogo va DENTRO del formulario y debajo del campo, con letra pequeña: es
   una nota al pie, no el protagonista (Manuel, 17/08/2026). */
.dlg-ayuda { margin: -4px 0 0; color: var(--texto-suave, #5b6472); font-size: 12.5px; line-height: 1.5; }
.dlg-ayuda strong { color: var(--texto, #2b3040); }
.dlg-ayuda .muted { display: block; margin-top: 3px; }
.cal-dlg > form > label, .cal-dlg .dlg-cuerpo > label { margin-top: 2px; }
.cal-dlg > form > label > .combo-curso, .cal-dlg > form > label > input,
.cal-dlg > form > label > select, .cal-dlg > form > label > textarea { margin-top: 5px; }
.dlg-cuerpo > label { display: block; font-weight: 600; font-size: 13.5px; color: #2b3040; }

/* La tarjeta de un duplicado descartado se desvanece en el sitio (sin recargar) */
.dup-par { transition: opacity .3s ease, transform .3s ease; }
.dup-fuera { opacity: 0; transform: translateX(28px); }

/* Inicio ya no tiene columna lateral: todo en una */
.ini-1col { display: block; }
.ini-1col .ini-main { display: block; }
.ini-pipe-2 { grid-auto-columns: minmax(240px, 1fr); }
.ini-pipe-col h3.es-vencida { color: #b3362c; font-weight: 700; }
.ini-pipe-hora { display: inline-block; color: var(--texto-suave); font-size: 11.5px; margin-right: 5px; font-variant-numeric: tabular-nums; }
.ini-pipe-vacio { font-size: 12.5px; margin: 4px 2px; }
.ini-bloque-plano { padding: 0; border: none; background: none; }

/* Botón naranja: destaca sin confundirse con el azul de "guardar" ni con el gris */
.btn-naranja { background: #f97316; border-color: #ea6a06; color: #fff; font-weight: 600; }
.btn-naranja:hover { background: #ea6a06; border-color: #d65f05; color: #fff; }
/* Botón gris: acción secundaria discreta (p. ej. añadir un curso ya pasado) */
.btn-gris { background: #6b7280; border-color: #5b626d; color: #fff; font-weight: 600; }
.btn-gris:hover { background: #5b626d; border-color: #4b5159; color: #fff; }

/* Marketing: la caja para pedirle a la IA */
.ia-caja { padding: 13px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid #f97316; }
.ia-caja > label { font-size: 13.5px; font-weight: 600; color: #2b3040; }
.ia-fila { display: flex; gap: 8px; }
.ia-fila input { flex: 1 1 auto; }
.ia-dice { margin: 0; font-size: 13px; color: #8f3007; background: #fff6ed; border-radius: 8px; padding: 7px 10px; }

/* El nombre del doctor, pulsable para copiarlo */
.copiar-nombre { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: copy;
  border-bottom: 1px dashed transparent; }
.copiar-nombre:hover { border-bottom-color: var(--texto-suave); }
.copiar-nombre.copiado { color: #2e7d32; border-bottom-color: #2e7d32; }
.copiar-nombre.copiado::after { content: ' ✔'; font-size: .7em; vertical-align: super; }
/* Si el navegador no deja copiar hay que decirlo: peor que no copiar es que el usuario pulse,
   no pase nada, y se quede sin saber si lo tiene o no. */
.copiar-nombre.copiar-mal { color: #b91c1c; border-bottom-color: #b91c1c; }
.copiar-nombre.copiar-mal::after { content: ' ✕ cópialo a mano'; font-size: .55em; vertical-align: super; }
/* Que se vea con el tabulador: es un botón y hay quien no usa el ratón. */
.copiar-nombre:focus-visible { outline: 2px solid var(--azul, #0d2ce2); outline-offset: 3px; border-radius: 3px; }

/* Buscador de la pantalla de Cursos */
.filterbar-buscar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filterbar-buscar input[type=search] { flex: 1 1 260px; }

/* Recuadro de la deuda vencida en los paneles económicos. Se pulsa: lleva al listado de
   los que deben, en Marketing. En rojo solo si hay deuda; si no, no hay nada que mirar. */
.kpi-deuda { display: block; color: inherit; }
.kpi-deuda:hover { text-decoration: none; border-color: var(--azul, #0d2ce2); }
.kpi-alerta { border-color: #dc2626; background: #fef2f2; }
.kpi-alerta .kpi-num { color: #b91c1c; }
.stat-deuda:hover { text-decoration: none; }
.stat-alerta { border-color: #dc2626; background: #fef2f2; }
.stat-alerta .stat-n { color: #b91c1c; }
.panel-nota { margin: -4px 0 18px; font-size: 13px; line-height: 1.5; }

/* "Hoy deberías…": el trabajo del día en Inicio. La franja de color de la izquierda dice
   lo urgente que es, sin tener que leer nada: rojo lo de hoy, naranja lo del dinero y las
   listas de espera, gris lo que puede esperar. */
/* En dos columnas: con 12 avisos en una sola, la lista se iba de pantalla y había que bajar
   para verla entera, que es justo lo que no quieres de "lo que hay que hacer hoy".
   Se usan columnas de verdad (columns) y no una rejilla a propósito: los avisos tienen
   alturas distintas —unos llevan una línea de explicación y otros dos— y una rejilla alinea
   por filas, dejando huecos debajo del corto. Las columnas los empaquetan.
   Como la lista va ordenada por urgencia y las columnas se llenan de arriba abajo, LO
   URGENTE CAE ENTERO EN LA IZQUIERDA. No es casualidad: se lee primero. */
.recos { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px;
  column-rule: 1px solid var(--borde, #e3e6ef); }
/* El hueco de 24 px no es decorativo: la raya de separación NO ocupa sitio (se pinta en medio
   del hueco), así que con column-gap:0 caía justo encima de la franja de color del aviso de
   la derecha —los dos en el mismo píxel— y se veían pegados. Medido en el navegador. */
/* Que un aviso no se parta por la mitad entre una columna y la otra. */
.reco { border-bottom: 1px solid var(--borde, #e3e6ef); break-inside: avoid; -webkit-column-break-inside: avoid;
  display: flex; align-items: flex-start; transition: opacity .4s ease, transform .4s ease; }
/* El check: sin cuadro ni recuadro, como lo pidió Manuel. Un ✓ gris que se enciende en
   verde al pasar por encima. Va fuera del enlace: pulsar el nombre lleva a la ficha,
   pulsar el check lo da por hecho. A la DERECHA (order: 2 en el flex, el HTML no cambia)
   y grande: en el móvil se pulsa con el pulgar y un ✓ pequeño pegado al texto son fallos
   seguros. */
.reco-check { background: none; border: none; cursor: pointer; padding: 10px 14px;
  font-size: 22px; line-height: 1; color: #c3cad6; flex: 0 0 auto; order: 2; align-self: center; }
.reco-check:hover { color: #16a34a; transform: scale(1.25); }
.reco-check:focus-visible { outline: 2px solid var(--azul, #0d2ce2); outline-offset: 2px; border-radius: 4px; }
.reco-check-mal { color: #dc2626 !important; }
.reco .reco-link { flex: 1 1 auto; min-width: 0; }
/* Marcada como hecha: se desvanece con suavidad antes de quitarse del todo. */
.reco-hecha { opacity: 0; transform: translateX(14px); }
/* Y la que entra de repuesto, aparece con la misma suavidad. */
.reco-entra { animation: reco-aparece .4s ease; }
@keyframes reco-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Sin la excepción del último: en dos columnas el "último" es el de abajo a la derecha, y
   quitarle solo a ese la raya dejaba la izquierda con una línea suelta y la derecha sin ella.
   Con todas puestas, las dos columnas terminan igual. */
@media (max-width: 900px) {
  /* En el móvil no hay dos columnas que valgan. */
  .recos { columns: 1; column-rule: 0; }
  .reco:last-child { border-bottom: 0; }
}
.reco-link { display: block; padding: 11px 14px 11px 16px; border-left: 4px solid transparent; color: inherit; }
.reco-link:hover { background: var(--fondo-suave, #f6f7fb); text-decoration: none; }
.reco-tit { display: block; font-weight: 600; margin-bottom: 2px; }
.reco-det { display: block; color: var(--texto-suave); font-size: 13px; line-height: 1.45; }
.reco-p1 .reco-link { border-left-color: #dc2626; }
.reco-p2 .reco-link { border-left-color: #f59e0b; }
.reco-p3 .reco-link { border-left-color: #94a3b8; }
.reco-p4 .reco-link { border-left-color: #cbd5e1; }

/* "Doctores (5.355)" a la izquierda de "Marcar todos": el número que ha dado la consulta,
   donde se mira, y no solo arriba del todo en el título de la página. */
.seg-titulo { margin: 0; font-size: 16px; font-weight: 700; }
.seg-titulo .count { color: var(--texto-suave); font-weight: 600; }

/* "Ver opciones avanzadas" en Marketing. Lo normal es preguntarle a la IA con palabras; esto
   es para cuando se quiere marcar a mano. Se abre solo si hay algún filtro puesto (lo hace el
   PHP con el atributo open): un <details> cerrado esconde los campos pero los sigue enviando,
   así que un filtro puesto por la IA tiene que verse sí o sí. */
/* Garantía de que el panel CERRADO no enseña sus campos. Un <details> cerrado ya los oculta
   en cualquier navegador de verdad, pero esto no depende de eso: aquí dentro está la casilla
   "aceptan publicidad" (RGPD), así que si un navegador raro pintara el contenido de un
   <details> cerrado, un filtro se aplicaría a escondidas. Con esto, cerrado es cerrado. Lo
   que está aplicado se lee siempre arriba, en el resumen. */
.seg-avanzadas:not([open]) > *:not(summary) { display: none; }
.seg-avanzadas > summary { cursor: pointer; padding: 4px 0 10px; font-weight: 600; }
.seg-avanzadas > summary:hover { color: var(--azul, #0d2ce2); }
.seg-avanzadas[open] > summary { margin-bottom: 6px; border-bottom: 1px solid var(--borde, #e3e6ef); }
.seg-botones { padding-top: 4px; }

/* Las recomendaciones de la IA, con su franja morada: se distinguen de un vistazo de los
   avisos automáticos, que son reglas y nunca se equivocan. La IA sí puede, y quien la lee
   tiene que saber cuál está leyendo. */
.reco-ia .reco-link { border-left-color: #7c3aed; }
.reco-ia .reco-det { color: #6d28d9; }

/* El aviso de "esto ya no cabe por Outlook" y el botón de mandarlo a Mailchimp. Sale solo
   cuando el envío pasa del tope, para no dar la brasa en los envíos normales. */
.seg-mc { border-top: 1px solid var(--borde, #e3e6ef); margin-top: 14px; padding-top: 12px; }
.seg-mc .muted { font-size: 13px; line-height: 1.5; }
#seg-mc-res { background: var(--fondo-suave, #f6f7fb); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }

/* Cursos: la cabecera en tres columnas — filtros | buscador | + Nuevo curso.
   El buscador va en el centro y ancho, tipo Google: es lo que más se usa de esta pantalla.
   Las columnas de los lados son 'auto' (lo que ocupen) y la del centro se come el resto: así
   el buscador crece en las pantallas grandes en vez de quedarse en un tercio fijo. */
/* Tres columnas IGUALES, no "lo que ocupe cada una": es la única forma de que el buscador
   quede centrado en la pantalla de verdad. Con la columna del botón a medida (131 px) y la de
   los filtros a 517, la caja de búsqueda salía 193 px escorada a la derecha — medido. */
/* Desde que «+ Nuevo curso» subió al título (25/08/2026) aquí abajo solo quedan los
   filtros y el buscador, uno encima del otro y a todo el ancho. */
.cursos-cab { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 12px 18px; align-items: center; margin-bottom: 14px; }
.cursos-filtros { min-width: 0; grid-column: 1 / -1; }
/* Píldoras más apretadas SOLO en esta columna. Al centrar el buscador, la columna de filtros
   se queda en un tercio de la pantalla y las 29 píldoras (marca + 9 categorías + 7 sedes + 10
   años) se apilaban en diez líneas: 403 px de cabecera antes de ver un solo curso. Medido. */
.cursos-filtros .chip { padding: 3px 8px; font-size: 12px; }
/* Todos los grupos de filtros en UNA sola línea (Manuel, 20/07/2026): marca y categorías
   como píldoras, y sede/año/promoción en desplegables compactos; si no cabe, salta solo. */
.cursos-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cursos-filtros .chips { display: inline-flex; margin-bottom: 0; gap: 4px; }
.cursos-filtros .chips + .chips { border-left: 1px solid var(--borde, #e5e7eb); padding-left: 8px; }
.cursos-filtros .eco-antes { margin: 0; }
.cursos-filtros select { width: auto; padding: 4px 8px; font-size: 12px; border-radius: 14px; }
.cursos-buscador { padding-top: 2px; }
.cursos-buscador .filterbar-buscar { margin: 0; }
/* El buscador, a lo ancho de su columna y con la caja más alta: que se vea que es EL sitio
   donde se busca, no un campo más. */
.cursos-buscador input[type="search"] { width: 100%; padding: 10px 14px; border-radius: 999px; font-size: 15px; }
.cursos-encontrados { margin: 8px 0 0; font-size: 13px; }
/* La cuenta de cursos de cada píldora de año, en gris: el año se lee de un vistazo y el
   número está para quien lo busque, sin competir con él. */
.chip-n { color: var(--texto-suave); font-weight: 400; }
.chip.on .chip-n { color: #cfe0ff; }
@media (max-width: 860px) {
  /* En el teléfono, primero BUSCAR: es más rápido que bajar por cuatro filas de píldoras.
     Los filtros, que ocupan media pantalla, debajo. (El botón ya no vive aquí: subió al
     título el 25/08/2026.) */
  .cursos-cab { grid-template-columns: 1fr; gap: 12px; }
  .cursos-buscador { order: -1; }
  .cursos-filtros { order: 0; }
}

/* Económico: la fila de periodos (este año / este curso / próximos) y el desplegable de los
   anteriores, que van juntos en la misma línea. */
.eco-periodos { align-items: center; }
.eco-antes { display: inline-block; margin: 0; }
.eco-antes select { padding: 4px 8px; font-size: 13px; border-radius: 999px; }

/* Marketing: el resumen de los filtros puestos, siempre a la vista aunque el panel avanzado
   esté cerrado. Es la garantía de que nada se aplica a escondidas (RGPD con "aceptan
   publicidad"). Píldoras pastel para que se distingan de los chips-enlace, porque estas no
   se pulsan: solo informan de lo que hay puesto. */
.seg-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.seg-resumen-tit { font-weight: 600; font-size: 13px; }
.seg-resumen-chip { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 999px;
  padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.seg-resumen-limpiar { font-size: 12.5px; margin-left: 4px; }

/* "Estado de <curso>:" delante de los botones de estado de la ficha: dice a qué candidatura
   afectan, que antes solo estaba en el tooltip y nadie lo veía. */
.estado-de { font-size: 13px; color: var(--texto-suave); margin-right: 6px; }
.estado-de strong { color: inherit; }

/* Fusionar desde el buscador de Doctores. Las casillas de las filas están ocultas hasta que
   se pulsa el botón "Fusionar…" de debajo del listado (.fus-activo en el recuadro); con dos
   marcadas aparece .fus-aviso, dentro del mismo recuadro y con la pinta del aviso de
   Ajustes → Incidencias (reutiliza .dup-cab/.dup-cols/.dup-col de allí). */
.fus-uno { margin-right: 6px; display: none; }
.fus-activo .fus-uno { display: inline-block; }
.fus-zona { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 4px 2px; margin-top: 8px; border-top: 1px solid var(--borde); }
.fus-aviso { flex-basis: 100%; border: 1px solid #f59e0b; border-left-width: 4px;
  border-radius: 10px; padding: 12px 14px; background: #fffdf5; }

/* El email de la ficha es un botón: pulsarlo (o su sobre ✉) abre la ventana de enviar.
   Se viste de enlace para que se lea como lo que siempre fue, algo pulsable. */
.email-abre { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); cursor: pointer; }
.email-abre:hover { text-decoration: underline; }
/* Las tres pestañas de Contabilidad (Cobros y deuda / Libro MiD / Libro MRA), en
   naranja para distinguirlas de los filtros azules de debajo (Manuel, 17/07/2026) */
.conta-tabs .chip { border-color: #f59e0b; color: #b45309; }
.conta-tabs .chip:hover { background: #fef3c7; }
.conta-tabs .chip.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
/* Período (curso/año) en la MISMA fila que las pestañas, a la derecha de «Incidencias». */
.conta-topbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.conta-topbar .conta-tabs { margin-bottom: 0; }
.conta-periodo { display: flex; gap: 8px; align-items: center; }
.conta-periodo form { margin: 0; }
.conta-periodo select { max-width: 200px; }

/* Puntitos de color de los másters de MiD en los chips de filtro */
.chip-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.cp-orto { background: #2563eb; }
.cp-int { background: #16a34a; }
.cp-imp { background: #ea580c; }

/* Conmutador de vista mes/lista, calcado del calendario del CRM de MiD */
.cal-vswitch { display: inline-flex; border: 1px solid var(--borde, #e5e7eb); border-radius: 9px; overflow: hidden; margin-left: 4px; }
.cal-vswitch .vsw { display: inline-flex; align-items: center; padding: 8px 10px; color: var(--muted, #6b7280); background: #fff; }
.cal-vswitch .vsw:hover { background: #eef4ff; color: var(--azul); text-decoration: none; }
.cal-vswitch .vsw.on { background: var(--azul); color: #fff; }
.cal-vswitch .ico { width: 16px; height: 16px; }
/* Vista de lista: la pastilla del evento vive dentro de la celda */
.cal-lista .cal-ev { display: inline-flex; max-width: none; cursor: pointer; }
.cal-lista span.cal-ev { cursor: default; }
/* Fila separadora de mes (la lista sigue hasta el último evento) */
.cal-lista .cal-mes-sep td { background: #f4f6fb; color: var(--texto-suave); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 12px; padding: 6px 10px; }

/* Calendario: pantalla de aviso de solape (guardar de todos modos / volver) */
.solape-card { max-width: 720px; }
.solape-lista { margin: 10px 0 16px; padding-left: 4px; list-style: none; display: grid; gap: 6px; }
.solape-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Contabilidad → Incidencias: dos recuadros (MRA y MiD) lado a lado */
.inc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.inc-2col.inc-1col { grid-template-columns: 1fr; }  /* usuario de una sola marca */
@media (max-width: 900px) { .inc-2col { grid-template-columns: 1fr; } }
.inc-2col h2 { display: flex; align-items: center; gap: 8px; }
.inc-add { margin-left: auto; }
.inc-card { padding: 8px 14px; }
.inc-fila { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--borde, #e5e7eb); }
.inc-fila:last-child { border-bottom: 0; }
.inc-txt { flex: 1; font-size: 13.5px; }
.inc-fecha { font-size: 12px; margin-top: 2px; }
.inc-acts { display: flex; gap: 4px; flex-shrink: 0; }
.inc-resueltas { margin-top: 8px; }
.inc-resueltas summary { cursor: pointer; color: var(--muted, #6b7280); font-size: 13px; padding: 4px 0; }
.inc-res .inc-txt { color: var(--muted, #6b7280); text-decoration: line-through; }
.inc-res .inc-fecha { text-decoration: none; }

/* ➤ de "enviar enlace de pago" junto a un pedido pendiente */
.pago-abre { background: var(--azul); color: #fff; border: 0; border-radius: 50%;
  width: 22px; height: 22px; line-height: 22px; font-size: .7rem; padding: 0;
  cursor: pointer; margin-left: .35rem; vertical-align: middle; }
.pago-abre:hover { filter: brightness(1.15); }
/* El icono de sobre dentro del botón redondo de «enviar el enlace de pago». */
.pago-abre-ico { width: 13px; height: 13px; display: block; margin: auto; }
.email-sobre { text-decoration: none; display: inline-block; }
/* «Marcar pagado» de una reserva (solo Economía): pasa a alumno del máster. */
.reserva-pago-form { display: inline; margin-left: .35rem; }
.reserva-pago-btn { background: var(--verde, #16a34a); color: #fff; border: 0;
  border-radius: 6px; padding: 2px 8px; font-size: .72rem; cursor: pointer; vertical-align: middle; }
.reserva-pago-btn:hover { filter: brightness(1.08); }
/* Botón destructivo (eliminar doctor en Ajustes). */
.btn-eliminar { background: #e5484d; color: #fff; border: 0; }
.btn-eliminar:hover { filter: brightness(1.08); }

/* El botón de la esquina de la ficha ("+ Convertir en Lead" si es de Otros, "+ Nueva
   acción" si ya es lead o alumno). Se lleva el hueco de la barra (margin auto) para vivir
   a la derecha, junto a "No es un lead", que entonces ya no necesita el suyo. */
.btn-cta { margin-left: auto; font-weight: 600; }
.btn-cta + .estado-bar-descartar { margin-left: 0; }
.btn-naranja { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn-naranja:hover { background: #d97706; border-color: #d97706; color: #fff; }

/* Las etiquetas de la ficha viven pegadas al nombre, a la izquierda (Manuel, 16/07/2026). */
/* Cabecera de la ficha compacta (Manuel, 28/07/2026: sobraba aire y «+ Nueva acción» quedaba
   descolgado): nombre + etiquetas en la misma línea y los botones pegados a la derecha. */
#etiquetas.pagehead { justify-content: flex-start; align-items: center; gap: 10px; row-gap: 6px; margin-bottom: 6px; }
#etiquetas.pagehead > .etiquetas-bar { margin: 0; }
#etiquetas.pagehead > .btn, #etiquetas.pagehead > form { margin: 0; }
#etiquetas.pagehead > .btn-cta { margin-left: auto; }   /* los botones, a la derecha de su fila */
.ficha-cab { display: flex; align-items: center; gap: 14px; }
.ficha-cab h1 { margin: 0; line-height: 1.15; }
/* El «Vinculado con el alumno nº…» pegado al nombre, sin el hueco de un párrafo suelto. Lleva
   clase propia: entre la cabecera y él hay <dialog> ocultos, así que el selector de hermano
   adyacente no llegaba a aplicarse (Manuel, 28/07/2026). */
.eco-nota-cab { margin-top: 0; margin-bottom: 10px; }
.ficha-cab h1 { margin: 0; }
.ficha-cab .avatar { flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* La baja del alumno sin candidatura, abajo del todo de la ficha. */
.estado-bar-abajo { margin: 22px 0 4px; }

/* El recuadro "Qué puede ver" de la ficha de usuario: las entradas del menú, a casillas. */
.perm-recuadro { border: 1px solid var(--borde, #eef0f4); border-radius: 10px; padding: 10px 14px;
  display: flex; gap: 6px 16px; flex-wrap: wrap; }
.perm-recuadro legend { font-weight: 600; font-size: 13.5px; color: #2b3040; padding: 0 6px; }
.perm-recuadro .check { font-weight: 400; }

/* La botonera del editor de correos (B / Enlace / Botón), pegada al título "Mensaje". */
.ed-mini { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.ed-mini .ed-btn { font-weight: 400; }

/* La zona de adjuntar del diálogo de email: dos botones (biblioteca / ordenador) y el
   resumen de lo elegido. Los documentos de la biblioteca, uno por línea en su ventanita. */
.adj-titulo { display: block; font-weight: 600; font-size: 13.5px; color: #2b3040; margin-bottom: 6px; }
.adj-botones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adj-doc { display: block; padding: 7px 0; border-bottom: 1px solid var(--borde, #eef0f4); font-weight: 400; }
.adj-doc:last-of-type { border-bottom: none; }

/* El aviso "en 5 minutos tienes una acción": abajo a la derecha, clicable. Se queda hasta
   la hora de la acción (o hasta su ×); si hay varios, se apilan. */
.avisos-pila { position: fixed; right: 18px; bottom: 18px; z-index: 400; display: flex;
  flex-direction: column-reverse; gap: 8px; }
/* El aviso de WhatsApp lleva dos renglones —quién y qué ha dicho—, así que hay que respetar
   el salto de línea; el de acciones va en uno solo y no le afecta. */
.aviso-accion { white-space: pre-line; background: #111827; color: #fff; padding: 12px 34px 12px 16px; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.28); cursor: pointer; max-width: 360px; font-size: 14px;
  line-height: 1.4; opacity: 1; transition: opacity .6s; position: relative; }
.aviso-accion.aviso-fuera { opacity: 0; }
.aviso-x { position: absolute; top: 6px; right: 10px; opacity: .7; font-size: 17px; line-height: 1; }
.aviso-x:hover { opacity: 1; }

/* La «huella» de quien ya se inscribió: sigue en la lista de leads y en el calendario para
   poder contarlo, pero apagado — ya no es un lead (Manuel, 22/08/2026). */
.lead-huella > td { opacity: .5; }
.lead-huella:hover > td { opacity: .85; }
.cal-lead-huella { opacity: .5; }
/* El ✅ va en el sitio de los fuegos, y a plena opacidad aunque la fila esté apagada: es lo
   que distingue una CONVERSIÓN de un lead que se enfrió (Manuel, 23/08/2026). */
.lead-huella > td .lead-conversion { opacity: 1; font-size: 15px; }
.cal-pill-ok { color: var(--ok); font-weight: 700; }
.cal-lead-huella .cal-pill-ok { opacity: 1; }

/* «No es un lead»: al final de la ficha y a la derecha, lejos de lo que se pulsa a diario. */
.ficha-salida { display: flex; justify-content: flex-end; margin: 18px 0 8px; }

/* Subir un documento a mano (CV, título…): el <input file> va escondido dentro de la etiqueta,
   que es la que se ve como botón, para que quede a la altura del resto de la línea. */
.doc-subir { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.doc-subir select { padding: 3px 6px; font-size: 12.5px; max-width: 15em; }
.doc-subir-btn { cursor: pointer; }
/* Las pegas de la documentación, en la propia línea del expediente. */
.aviso-doc-inc { flex-basis: 100%; margin-top: 6px; padding: 6px 10px; border-radius: 8px;
  background: #fdeceb; border: 1px solid #f3b6b1; color: #8f251c; font-size: 13px; }

/* Flash amarillo: cambios de estado y bajas ("ojo, esto ha cambiado"). */
.flash-aviso { background: #fff7e0; border: 1px solid #f0d48a; border-left: 4px solid #f59e0b;
  color: #6b4e00; }

/* Las dos salidas del WhatsApp doble, una debajo de otra y generosas de pulsar. */
.wa-eleccion { display: block; text-align: center; padding: 12px; }

/* El libro de Contabilidad: secciones, números a la derecha y el beneficio con peso. */
.conta-tabla td.num, .conta-tabla th.num { text-align: right; white-space: nowrap; }
.conta-seccion td { background: #f6f7fb; font-weight: 700; font-size: 12.5px; letter-spacing: .4px; color: #4b5262; }
/* Acordeón del Libro: la cabecera de cada sección se pulsa para plegar/desplegar. */
tr.conta-seccion { cursor: pointer; }
tr.conta-seccion:hover td { background: #eef1ff; }
.conta-flecha { display: inline-block; width: 1.1em; color: var(--azul, #0d2ce2); font-weight: 700; }
.conta-sec-sub { color: #7b8394; font-weight: 600; }   /* subtotal por mes en la cabecera */
tr.conta-seccion.conta-plegada td { border-bottom: 1px dashed #cbd2e0; }
/* Tarjetas Ingresos/Gastos pulsables (filtro de vista). */
.kpi-click { cursor: pointer; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.kpi-click:hover { border-color: var(--azul, #0d2ce2); }
.kpi-click.on { border-color: var(--azul, #0d2ce2); background: #eef1ff; }
.conta-beneficio td { border-top: 2px solid #2b3040; font-weight: 700; }
/* Exportar la pantalla a imagen (para WhatsApp): botón centrado + cabecera de la captura. */
.export-acts { margin: 18px 0 8px; text-align: center; }
.eco-export { background: #fff; }
.eco-export-cab { font-size: 15px; font-weight: 600; color: var(--texto-suave); margin: 2px 0 12px; }
.conta-rojo { color: var(--error); }

/* Contabilidad reestructurada (Manuel, 23/07/2026): fila secundaria de KPIs (lo que NO es
   gasto del año), nota explicativa, y formularios de reclasificación del desglose. */
.kpis-sec { margin-top: -6px; }
.kpi-mini { padding: 10px 12px; opacity: .9; }
.kpi-mini .kpi-num { font-size: 18px; }
.kpi-mini .kpi-lbl { font-size: 12px; }
.conta-nota { font-size: 12.5px; line-height: 1.5; margin: 6px 2px 14px; }
/* Rayito para crear una acción cuando el alumno no tiene ninguna (ficha de curso). */
.accion-rayo { font-size: 17px; line-height: 1; text-decoration: none; opacity: .5; display: inline-block; transition: opacity .12s, transform .12s; }
.accion-rayo:hover { opacity: 1; transform: scale(1.2); }
/* Números KPI en naranja (p.ej. "Falta por pagar" en la ficha de curso). */
.kpi-naranja { color: #d97706; }
.conta-recat-form { margin: 0; }
.conta-recat-campos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.conta-recat-campos label { display: flex; flex-direction: column; font-size: 12px; color: var(--texto-suave); gap: 3px; }
.conta-recat-campos select, .conta-recat-campos input { min-width: 170px; }
.conta-editmov > summary { display: inline-block; list-style: none; }
.conta-editmov > summary::-webkit-details-marker { display: none; }
.conta-editmov[open] { position: relative; }
.conta-editmov[open] .conta-recat-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.conta-editmov[open] .conta-recat-form select, .conta-editmov[open] .conta-recat-form input { min-width: 150px; }

/* Banco: filtro ingresos (verde) / gastos (rojo) + colores de importe (la CSP prohíbe estilos en línea) */
.chip-ing { background: #eafaf0; border-color: #9fd4b0; color: #1b7f3a; }
.chip-ing.on { background: #1b7f3a; border-color: #1b7f3a; color: #fff; font-weight: 600; }
.chip-gas { background: #fdecea; border-color: #eeb4af; color: #b3261e; }
.chip-gas.on { background: #b3261e; border-color: #b3261e; color: #fff; font-weight: 600; }
.td-imp { text-align: right; font-variant-numeric: tabular-nums; }
.imp-pos { color: #1b7f3a; }
.imp-neg { color: #b3261e; }

/* Contabilidad: dos niveles de pestañas (marca arriba, sección debajo) */
.conta-secciones { margin-top: -6px; }
.conta-secciones .chip { font-size: 13px; }

/* Panel · "Román": novedades de 30 días (resumen por marca + feed cronológico) */
.roman-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px; }
.roman-marca { padding: 14px 16px; }
.roman-marca h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.roman-mra { border-top: 3px solid var(--azul); }
.roman-mid { border-top: 3px solid #ff7a00; }
/* Las cifras del resumen, repartidas y centradas dentro de su recuadro: cada una con su
   rótulo debajo y alineada con las de la otra marca (Manuel, 23/08/2026). */
.roman-nums { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-around; align-items: flex-start; }
.roman-num { display: flex; flex-direction: column; align-items: center; text-align: center;
  color: inherit; padding: 6px 10px; border-radius: 8px; flex: 1 1 0; min-width: 5.5em; }
a.roman-num:hover { background: var(--azul-claro); text-decoration: none; }
a.roman-num.on { background: var(--azul-claro); box-shadow: inset 0 0 0 2px var(--azul); }
.roman-num .rn-n { font-size: 26px; font-weight: 700; line-height: 1; }
.roman-num .rn-l { font-size: 12px; color: var(--gris, #6b7280); margin-top: 3px; }
.roman-filtro { font-weight: 400; font-size: 14px; color: var(--gris, #6b7280); }
.roman-filtro-x { font-size: 13px; margin-left: 4px; }
.roman-feed { display: flex; flex-direction: column; }
.roman-dia { font-weight: 700; font-size: 13px; color: var(--gris, #6b7280); text-transform: uppercase; letter-spacing: .03em; margin: 14px 0 6px; }
.roman-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: inherit; border-left: 3px solid transparent; }
.roman-item:hover { background: var(--azul-claro); text-decoration: none; }
.roman-item.roman-t-inscrito { border-left-color: var(--ok); }
.roman-item.roman-t-reserva { border-left-color: #16a34a; }
.roman-item.roman-t-preinscrito { border-left-color: #8b5cf6; }
.roman-item.roman-t-informado { border-left-color: #ec4899; }
.roman-item.roman-t-nuevo { border-left-color: var(--azul); }
.roman-item.roman-t-avance { border-left-color: #ff7a00; }
.roman-item.roman-t-baja { border-left-color: #e5484d; }
.roman-hora { font-variant-numeric: tabular-nums; color: var(--gris, #6b7280); font-size: 12px; min-width: 38px; }
.roman-ico { font-size: 15px; }
.roman-nombre { font-weight: 600; }
.roman-txt { color: var(--gris, #444); font-size: 14px; }
.roman-prog { color: var(--gris, #6b7280); }
/* Registro de actividad con la estética del feed: separadores finos y las filas que no son
   enlace (acciones que no van a una ficha) sin resaltado ni cursor de mano. */
.act-feed .act-item { border-bottom: 1px solid var(--borde, #eef0f4); border-radius: 0; }
.act-feed .act-item:last-child { border-bottom: none; }
.act-feed div.act-item { cursor: default; }
.act-feed div.act-item:hover { background: transparent; }
.act-feed .roman-txt { flex: 1; min-width: 0; }
.roman-quien { margin-left: auto; font-size: 12px; color: var(--gris, #6b7280); white-space: nowrap; }
@media (max-width: 640px) {
  .roman-item { flex-wrap: wrap; }
  .roman-quien { margin-left: 0; width: 100%; }
}

/* Datos de facturación: fieldset con titular distinto del doctor (quien paga) */
.fact-fs { border: 1px solid var(--linea, #e5e7eb); border-radius: 10px; padding: 10px 14px 4px; margin: 4px 0 12px; }
.fact-fs > legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--gris, #6b7280); }
.fact-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.fact-check input { width: auto; }
.fact-titular-ver { margin-bottom: 4px; }

/* «Intereses» del doctor: las ocho disciplinas, en dos columnas para que quepan sin scroll */
.areas-fs { border: 1px solid var(--linea, #e5e7eb); border-radius: 10px; padding: 10px 14px 12px; margin: 4px 0 12px; }
.areas-fs > legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--gris, #6b7280); }
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.areas-grid .check { font-size: 14px; }
@media (max-width: 620px) { .areas-grid { grid-template-columns: 1fr; } }

/* Aviso tras admitir: preguntar si enviar el email al candidato */
.preins-aviso-envio { background: #fffaeb; border-left: 4px solid #f79009; padding: 14px 16px;
  margin-bottom: 12px; line-height: 1.6; }
.preins-aviso-botones { display: inline-flex; gap: 8px; margin-left: 10px; vertical-align: middle; }
/* Pedido «procesando» = cobrado, pendiente de revisar en la web: verde más claro que pagado */
.b-pagado-claro { background: #edfaf2; color: #4caf7d; font-weight: 600; }
/* Cotejo del título universitario: el nombre leído (OCR) no es el del formulario */
.cotejo-banner { border: 1px solid #dc2626; background: #fef2f2; margin-bottom: 20px; }
.cotejo-banner > p:first-child strong { color: #b91c1c; }
.cotejo-lista { margin: 8px 0 8px 18px; line-height: 1.7; }
/* Nº de ficha del doctor en el listado: discreto, pero suficiente para no confundir a dos
   doctores con el mismo nombre al fusionar o al eliminar (Manuel, 30/07/2026). */
.doc-num { color: var(--texto-suave, #8a93a5); font-size: 12px; font-variant-numeric: tabular-nums; }
/* La casilla de fusionar heredaba el input{width:100%} de los formularios y se comía la
   columna entera, empujando el nombre y su nº a la línea de abajo (revisión, 30/07/2026). */
.fus-uno { width: auto; }

/* Ficha del doctor (05/08/2026): bloque «Cursos» compacto — el detalle económico de cada
   curso vive en el panel Económico, aquí solo la lista con sus botones. */
.cursos-resumen { display: flex; flex-direction: column; gap: 8px; }
.cursos-linea { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; line-height: 1.7; }
.cursos-et { flex: none; color: var(--texto-suave, #6b7280); font-size: 13px; }
.cursos-linea-pasado { opacity: .72; }
.cursos-pie { margin: 2px 0 0; font-size: 12.5px; }
@media (max-width: 1100px) { .cursos-flecha { display: none; } }  /* mismo corte que .ficha-grid */
/* Historial: lo más reciente en negrita, y los bloques largos plegados */
.tl-reciente { font-weight: 700; color: var(--texto, #26303d); }
.tl-grupo { margin: 2px 0 2px 2px; }
.tl-grupo .tl-item { margin-left: 10px; }
.nota-larga > summary { cursor: pointer; color: var(--texto, #26303d); list-style: revert; }
.nota-larga > summary:hover { color: var(--azul, #2563eb); }
.nota-larga[open] > summary { color: var(--texto-suave, #6b7280); margin-bottom: 6px; }
.preins-datos { margin-bottom: 6px; }
.ini-tipo-email { background: #0ea5e9; }

/* La negrita de «lo más reciente» tiene que ganar dentro de la tarjeta de una anotación */
.nota-card .muted.tl-reciente { color: var(--texto, #26303d); font-weight: 700; }
/* Un email es una palabra larguísima sin espacios: que parta y no desborde en el móvil */
.tl-item { flex-wrap: wrap; }
.tl-txt { min-width: 0; overflow-wrap: anywhere; }

/* Ficha 05/08/2026: Cursos y Tareas a media columna, y cabecera fija al bajar */
.ficha-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* La columna izquierda lleva dos bloques apilados (interés y cursos) y la derecha, las
   tareas (Manuel, 17/08/2026). */
.ficha-col { display: flex; flex-direction: column; min-width: 0; }
.ficha-col > .bloque:last-child { margin-bottom: 0; }
.ficha-dos > .bloque { min-width: 0; }
@media (max-width: 1100px) { .ficha-dos { grid-template-columns: 1fr; } }
.tareas-sub { font-size: 14px; margin: 14px 0 6px; color: var(--texto-suave, #6b7280);
  display: flex; align-items: center; gap: 8px; }
.tareas-sub:first-of-type { margin-top: 2px; }
.ficha-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 18px; background: #fff;
  border-bottom: 1px solid var(--borde, #d1d5db); box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.fs-nombre { font-weight: 700; }
/* La búsqueda fluida de Doctores: mientras llega el refresco, la lista respira (01/09/2026). */
#resultados-doc.doc-buscando { opacity: .45; transition: opacity .15s; }
/* Las chapas de especialidad del buscador: Ortodoncista / Implantólogo (31/08/2026). */
.b-espec { background: #e0f2fe; color: #075985; }
/* Enganchar ficha a una acción huérfana, desde la celda (Manuel, 31/08/2026). */
.accion-poner-contacto { display: flex; gap: 6px; align-items: center; }
.accion-poner-contacto .combo { min-width: 170px; flex: 1 1 auto; }
.accion-poner-contacto .combo-input { font-size: 13px; padding: 6px 24px 6px 10px; }
/* La miniatura del buscador de Doctores: solo quien tiene foto (Manuel, 31/08/2026). */
.doc-mini { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  vertical-align: middle; margin-right: 7px; }
.fs-arriba { margin-left: auto; text-decoration: none; font-size: 18px; line-height: 1;
  padding: 2px 8px; border-radius: 8px; }
.fs-arriba:hover { background: var(--azul-claro, #eef2ff); text-decoration: none; }
#historial > h2 .chip { font-size: 12.5px; vertical-align: middle; }

/* Ficha v3 (05/08/2026), remates de la revisión: las dos columnas solo cuando el sitio da
   de sí DE VERDAD (con panel Económico la columna principal es 2/3 y las tablas no cabían),
   y si las mitades quedan estrechas, las tablas se ven como fichas apiladas, sin scroll.
   Si el navegador no entiende @container, se queda en una columna: como estaba antes. */
.ficha-dos-cont { container-type: inline-size; }
.ficha-dos { grid-template-columns: 1fr; }
@container (min-width: 700px) { .ficha-dos { grid-template-columns: 1fr 1fr; } }
@container (min-width: 700px) and (max-width: 1299px) {
  .ficha-dos .tabla thead { display: none; }
  .ficha-dos .tabla, .ficha-dos .tabla tbody, .ficha-dos .tabla tr, .ficha-dos .tabla td { display: block; width: 100%; }
  .ficha-dos .tabla tr { border-bottom: 1px solid var(--borde); padding: 10px 6px; }
  .ficha-dos .tabla td { border: none; padding: 3px 8px; }
  .ficha-dos .tabla td[data-label]:not(:empty)::before { content: attr(data-label) ": "; color: var(--texto-suave); font-size: 12px; }
  .ficha-dos .tabla td:empty { display: none; }
}
/* La cabecera fija no debe tapar el título al saltar a un ancla (#historial, #preins…) */
.bloque[id] { scroll-margin-top: 60px; }
/* …y va alineada con el contenido de la página, no a sangre */
.ficha-sticky { padding: 8px 0; box-shadow: 0 2px 14px rgba(16,24,40,.12);
  transition: opacity .15s ease, transform .15s ease; }
.ficha-sticky[hidden] { display: flex; opacity: 0; transform: translateY(-100%); pointer-events: none; }
.fs-in { max-width: 1720px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 10px; }
@media (max-width: 700px) {
  .fs-in { padding: 0 14px; gap: 8px; flex-wrap: nowrap; }
  .fs-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ficha-sticky .badge { flex: none; }
  .fs-tipo { display: none; }   /* en el móvil manda el nombre y lo que debe */
}
/* Anotación con un email pegado: la conversación anterior, plegada aparte */
.nota-cita { margin-top: 6px; }
.nota-cita > summary { cursor: pointer; color: var(--texto-suave, #6b7280); font-size: 12.5px; list-style: revert; }
.nota-cita > summary:hover { color: var(--azul, #2563eb); }
.nota-cita-txt { border-left: 3px solid var(--borde, #d1d5db); padding-left: 10px; margin-top: 6px;
  color: var(--texto-suave, #6b7280); font-size: 13px; }

/* «Más datos del doctor»: el resto de la ficha de contacto, plegado */
.datos-mas { margin-top: 6px; }
.datos-mas > summary { font-size: 13px; }
/* Alumno dado de baja: su contabilidad queda congelada (no se le reclama) */
.eco-congelado { background: #fbe8e6; border-left: 4px solid #b3362c; padding: 10px 12px;
  border-radius: 8px; font-size: 13px; line-height: 1.55; margin: 0 0 12px; }

/* ===== Eventos MRA (pestaña de Calendario, 06/08/2026) ===================== */
/* Listado: una barrita del color de la edición a la izquierda de la fecha, para que los
   tres fines de semana de un mismo máster se reconozcan de un vistazo. */
/* El color sale de las clases .cal-ev--cN, que fijan border-left-color (fuerte) y un
   fondo pálido a juego: la barrita usa el borde y la píldora, las dos cosas. */
.ev-tabla .ev-barra { display: inline-block; width: 0; height: 15px; border-left: 5px solid;
  border-radius: 3px; margin-right: 8px; vertical-align: -3px; }
.ev-tabla .ev-hora, .ev-tabla .ev-dir, .ev-tabla .ev-curso, .ev-tabla .ev-aforo { display: block; font-size: 12px; }
.ev-tabla .ev-tipo { margin-left: 6px; }
.ev-edicion { display: inline-block; margin-left: 6px; padding: 1px 8px 1px 6px; border-radius: 7px;
  border-left: 4px solid; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ev-tabla .ev-fila--pasada td { color: var(--texto-suave, #6b7280); }
.ev-tabla .ev-fila--pasada strong { font-weight: 600; }
.ev-pasados > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; }
.ev-pasados > summary::-webkit-details-marker { display: none; }
.ev-pasados > summary h2 { display: inline; margin: 0; }
.ev-pasados > summary::before { content: '▸'; color: var(--texto-suave, #6b7280); }
.ev-pasados[open] > summary::before { content: '▾'; }
.ev-anios { margin: 10px 0; }

/* Cabecera del panel: cuatro fichas (cuándo/dónde, profesor, alergias y números) */
.ev-cabecera { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ev-info { padding: 14px 16px; }
.ev-info h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave, #6b7280); }
.ev-info-l { margin: 0 0 8px; line-height: 1.5; }
.ev-info--aviso { background: #fff7ed; border-left: 4px solid #f59e0b; }
.ev-alergias { margin: 0; padding-left: 18px; line-height: 1.6; }
.ev-cifra { font-size: 15px; margin: 0 0 6px; }
.ev-cifra strong { font-size: 26px; }
.ev-desglose { margin: 0; padding-left: 18px; color: var(--texto-suave, #6b7280); font-size: 13px; line-height: 1.7; }
.ev-lleno { color: #b3362c; font-weight: 600; }
.ev-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.ev-acts form { margin: 0; }

/* Las tarjetas del embudo de asistencia */
.ev-kanban .ev-asist { display: flex; flex-direction: column; gap: 4px; }
.ev-asist-per { display: flex; align-items: center; gap: 8px; }
.ev-asist-per .avatar { flex: 0 0 auto; }
.ev-asist .ev-alergia { font-size: 12px; color: #b45309; background: #fff7ed; border-radius: 6px;
  padding: 2px 6px; line-height: 1.4; }
.ev-asist-acts { margin: 2px 0 0; }
.ev-asist-acts select { width: 100%; font-size: 12px; padding: 3px 6px; }
.ev-asist-conf { font-size: 12px; margin-top: 2px; }
.ev-conf-quien { margin: 0 0 6px; }
.ev-asist-mas { display: flex; gap: 10px; flex-wrap: wrap; }
.ev-asist-mas .btn-link { font-size: 12px; }
.btn-link--del { color: #b3362c; }

/* Hoja de firmas: en papel, sin menú ni botones y con hueco para firmar */
.hoja-firmas .hoja-firma { min-width: 180px; border-bottom: 1px solid #cbd5e1; }
@media print {
  .topbar, #mobile-menu, .foot, .pagehead .btn, .ev-acts, .chips { display: none !important; }
  .hoja-head .btn { display: none !important; }
  .card { box-shadow: none; border: 1px solid #e5e7eb; }
}
.b-ok { background: #dcfce7; color: #166534; }
.b-error { background: #fdecea; color: #a02a1c; }
/* Ajustes → Plantillas → WhatsApp · Meta */
.wa-meta-refrescar { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.wa-meta-cuerpo { max-width: 460px; font-size: 13px; line-height: 1.4; color: var(--texto); }
.cal-dlg.dlg-ancho { max-width: 820px; }
/* Los eventos del doctor, dentro del recuadro de Cursos de su ficha */
.ficha-eventos { margin-top: 10px; }
/* Sustituyen a estilos en línea de la ficha (la CSP no permite style="…") */
.fd-total { text-align: right; }
.fd-total--neg { color: #b3261e; }
.dlg-nota { grid-column: 1 / -1; font-size: 12px; margin: .1rem 0 .3rem; }
.form-inline { display: inline; }

/* Pestañas de Eventos: en azul, para que no parezcan un botón de acción (naranja) */
.cal-tabs { margin-bottom: 16px; }
.cal-tabs .chip.on { background: var(--azul, #0d2ce2); border-color: var(--azul, #0d2ce2); color: #fff; }
/* El «+» de cada recuadro del evento: editar sin salir de la cabecera */
.ev-info h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ev-mas { border: 1px solid var(--borde, #e5e7eb); background: #fff; color: var(--azul, #0d2ce2);
  width: 22px; height: 22px; border-radius: 6px; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.ev-mas:hover { background: #eef4ff; }
/* Los interesados, la primera columna del embudo */
.kb-col-lead h3 { color: #b45309; }
.ev-fila--lead td { background: #fffdf5; }
.ev-kpis { margin-bottom: 12px; }
/* Los eventos dentro del recuadro de Cursos de la ficha */
.ficha-evento-fila .btn-link { margin-left: 10px; font-size: 12px; }

/* La página pública donde el doctor dice si viene */
.conf-caja { max-width: 560px; margin: 20px auto 44px; background: #fff; border-radius: 14px;
  padding: 26px 28px; box-shadow: 0 2px 14px rgba(0,0,0,.07); }
/* La pantalla del doctor no tiene barra arriba: la caja se centra con lo que hay, sin dejar
   un hueco muerto encima (Manuel, 20/08/2026). */
.wrap-doctor { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 18px; }
.wrap-doctor .conf-caja { margin: 0; width: 100%; }
.conf-caja h1 { margin: 0 0 14px; font-size: 22px; }
.conf-datos { line-height: 1.6; margin: 0 0 18px; }
.conf-acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.conf-btn { padding: 12px 20px; font-size: 15px; }
/* Los dos botones del doctor, con las palabras y los colores de Manuel (09/09/2026). */
.conf-btn--si { background: #15803d; border-color: #15803d; color: #fff; font-weight: 700; }
.conf-btn--si:hover { background: #166534; border-color: #166534; color: #fff; }
.conf-btn--no { background: #d92d20; border-color: #d92d20; color: #fff; font-weight: 700; }
.conf-btn--no:hover { background: #b42318; border-color: #b42318; color: #fff; }
.conf-otra { margin: 0 0 14px; }
.conf-otra .btn-link { font-size: 13px; color: var(--texto-suave); }
.conf-msg { border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.conf-msg--si { background: #dcfce7; color: #166534; }
.conf-msg--no { background: #fee2e2; color: #991b1b; }
.conf-estado { background: #f4f6fb; border-radius: 8px; padding: 8px 12px; }
/* …y la de «ya no me interesa este máster»: los dos caminos, separados */
.conf-sep { border: 0; border-top: 1px solid #e6e8ef; margin: 22px 0 18px; }
.conf-baja label { display: block; margin: 10px 0 4px; font-size: 14px; }
.conf-baja select, .conf-baja textarea { width: 100%; padding: 9px 10px; font: inherit;
  border: 1px solid #d6d9e3; border-radius: 8px; background: #fff; }
.conf-baja textarea { resize: vertical; }
.conf-baja .conf-btn { margin-top: 12px; }
/* Las otras especialidades: se elige una y se manda */
.conf-otras { margin: 6px 0 4px; }
.conf-otras p { margin: 0 0 8px; }
.conf-op { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid #e0e3ea; border-radius: 9px; cursor: pointer; }
.conf-op:hover { border-color: #b9c0cf; background: #fafbfd; }
.conf-op input { margin-top: 3px; }
.conf-op small { display: block; }
/* Las líneas que explican cada opción: se leen, pero no pesan como el botón que acompañan */
.conf-caja .conf-nota { font-size: 12.5px; line-height: 1.45; margin: 2px 0 16px; color: #7b818d; }
/* La baja, en rojo: es la que no tiene vuelta atrás fácil (Manuel, 20/08/2026) */
.conf-btn-baja { background: #dc2626; border-color: #dc2626; color: #fff; }
.conf-btn-baja:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.ficha-foto-btn { font-size: 12px; margin-left: 8px; }
.curso-eventos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Las fechas (eventos) de cada curso, colgando de él en la ficha del doctor */
.ficha-evento-fila { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-left: 18px; font-size: 13px; }
/* Los interesados del embudo: en gris oscuro, para distinguirlos de un vistazo de los alumnos */
.ev-lead-nom, .ev-lead-nom:hover { color: #374151; }

/* ---- El ida y vuelta con la Universidad de Málaga, dentro del recuadro del curso ---- */
.eco-uma { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #dfe6ea; }
.eco-uma-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 6px; }
.eco-uma-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.eco-uma-mov { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; padding: 3px 0; border-bottom: 1px solid #f2f5f7; }
.eco-uma-mov:last-child { border-bottom: none; }
.eco-uma-imp { font-weight: 600; margin-left: auto; }
.eco-uma-in { color: var(--ok); }
.eco-pagos-todos { margin: -4px 0 8px; }

/* ---- El aviso de acciones al entrar ---- */
.aviso-acc { max-width: 460px; text-align: center; position: relative; padding: 30px 34px 34px; }
.aviso-acc h3 { margin: 0 0 20px; font-size: 22px; }
.aviso-acc-x { position: absolute; top: 12px; right: 14px; background: none; border: 0;
  font-size: 22px; line-height: 1; color: var(--texto-suave); cursor: pointer; padding: 4px 6px; }
.aviso-acc-x:hover { color: var(--texto); }
.aviso-acc-linea { margin: 10px 0; font-size: 17px; }
.aviso-acc-vencidas { color: var(--error); font-weight: 600; }
/* El botón, despegado del borde de abajo: pegado se lee como si estuviera cortado. */
.aviso-acc-acts { margin: 30px 0 6px; display: flex; justify-content: center; }
.aviso-acc-acts .btn { padding: 12px 30px; font-size: 15.5px; }

/* ---- Móvil (Manuel, 12/08/2026) ---- */
@media (max-width: 700px) {
  /* La cabecera se veía BORROSA: el backdrop-filter fuerza una capa de composición y en
     los móviles con escala fraccional difumina el texto. Fondo sólido y a correr. */
  .topbar { backdrop-filter: none; background: #fff; }
  /* La tarjeta de candidatura se rompía: cada pieza a su fila, y los botones con sitio. */
  .cand-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .cand-head .cand-meta { order: 3; }
  .cand-head .fuegos-btns { order: 2; }
  .cand-head .cand-cambiar { order: 4; align-self: flex-start; }
  .fuegos-btns { display: flex; flex-wrap: wrap; gap: 6px; }
  .estado-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-right: 0; }
  .estado-btns .estado-btn { flex: 1 1 calc(50% - 6px); text-align: center; padding: 8px 6px; }
  .cand-box { padding: 12px; }
}

/* App instalada en el iPhone («Añadir a pantalla de inicio»): al hacer scroll, iOS pinta un
   cristal esmerilado detrás de la barra de estado (reloj/batería) con el contenido que pasa
   por debajo — la «parte de arriba borrosa» del móvil (Manuel, 12/08/2026). El desenfoque de
   un color liso es el mismo color: una banda FIJA grafito bajo esa zona lo deja nítido, y el
   reloj (blanco, por black-translucent) se lee perfectamente sobre ella. En Android la zona
   segura mide 0 y todo esto no hace nada. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0px); }
  body::before { content: ''; position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px); background: #1c1c1f; z-index: 998; }
  .ficha-sticky { top: env(safe-area-inset-top, 0px); }
}
@media (max-width: 700px) {
  /* A 16px el iPhone no hace zoom al tocar un campo (con el zoom, las barras fijas quedan
     borrosas hasta recargar). Los buscadores y selectores pequeños suben a 16 en el móvil. */
  input, select, textarea, .combo-curso-input, .combo-input,
  .filterbar-doc .filterbar-buscar input[type="search"],
  .cursos-buscador input[type="search"] { font-size: 16px; }
}

/* Leads en el móvil (Manuel, 12/08/2026): «+ Nueva acción» arriba a la derecha, los
   filtros de dos en dos y el buscador a la altura de un campo normal. El buscador salía
   ALTÍSIMO porque al poner .filterbar en columna su flex-basis de 260px (pensado como
   ancho) pasaba a ser la altura. */
@media (max-width: 700px) {
  /* En columna, la regla general «align-items: center» de más arriba centraba el
     título: aquí manda flex-start. El hueco derecho es para el botón absoluto. */
  .pagehead-leads { position: relative; padding-right: 0; align-items: flex-start; }
  .pagehead-leads .pagehead-left { padding-right: 120px; }
  .pagehead-leads .pagehead-acts { position: absolute; top: 0; right: 0; }
  .pagehead-leads .pagehead-acts .btn { padding: 7px 12px; font-size: 13.5px; }
  /* El chip de Calientes a su propia línea: arriba solo quedan «Leads» y el botón. */
  .pagehead-leads h1 .chip-fuego { display: block; width: fit-content; margin: 8px 0 0; }
  form.filterbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  form.filterbar select { max-width: none; width: 100%; margin: 0; }
  form.filterbar .buscar-row { grid-column: 1 / -1; display: flex; gap: 8px; }
  form.filterbar input[type="search"] { flex: 1 1 auto; min-width: 0; height: 44px; }
  form.filterbar .buscar-row .btn { flex: 0 0 auto; }
}

/* Menú ⋯ de cada pago del Económico (Manuel, 12/08/2026): tres iconos por pago —
   ➤ enviar, ✓ pagar/completar y este menú con lo demás. */
.ped-menu { position: relative; display: inline-block; vertical-align: middle; }
.ped-menu > summary { list-style: none; cursor: pointer; display: inline-block; padding: 1px 8px;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff; font-weight: 700;
  line-height: 1.3; color: var(--texto-suave); }
.ped-menu > summary::-webkit-details-marker { display: none; }
.ped-menu > summary:hover { background: var(--azul-claro, #eef2ff); color: var(--texto); }
.ped-menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 70;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px; min-width: 180px;
  padding: 4px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); }
.ped-menu-lista form { margin: 0; }
.ped-menu-lista button { display: block; width: 100%; text-align: left; background: none;
  border: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px;
  color: var(--texto); font-family: inherit; }
.ped-menu-lista button:hover { background: var(--azul-claro, #eef2ff); }
.ped-menu-lista .ped-menu-borrar { color: #b3261e; }
.ped-menu-lista .ped-menu-borrar:hover { background: #fdecea; }
.eco-pedido .ped-icono { padding: 1px 8px; }

/* La zona derecha de la fila del pago (antes un span, ahora div por HTML válido). */
.eco-pedido-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Leads: las candidaturas de un mismo doctor, una debajo de otra dentro de su fila. */
.lead-cand + .lead-cand { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--borde, #e5e7eb); }

/* Los documentos fijos de una plantilla de correo. */
.plantilla-docs { border: 1px solid var(--borde, #e5e7eb); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.plantilla-docs legend { font-size: 13.5px; font-weight: 600; padding: 0 6px; }
.plantilla-docs .adj-doc { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }

/* Contabilidad → Profesores (Manuel, 24/08/2026). */
.prof-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prof-mal { color: var(--error); font-weight: 600; }
.card.stat.stat-mal .stat-n { color: var(--error); }
.prof-buscador { gap: 8px; }
.prof-aviso { background: var(--error-bg); color: var(--error); border: 1px solid #f0cdc8;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.prof-tabla-head { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding: 14px 18px 0; }
.prof-tabla-head h3 { margin: 0; }
.prof-tabla-head .chips { margin-bottom: 0; }
.prof-encajar, .prof-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.prof-encajar select { padding: 4px 6px; font-size: 13px; }
.prof-inline input[type="date"] { padding: 4px 6px; font-size: 13px; }
.prof-pdf { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.prof-acciones { margin-top: 12px; }
.prof-enviar { border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 12px; }
.prof-enviar-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 14px; margin: 8px 0 12px; }
.prof-enviar textarea { width: 100%; }

/* ============ Notas · Directorio · Peticiones (Manuel, 25/08/2026) ============ */

/* El tablón: post-it en rejilla, que es como se leen de un vistazo. */
.notas-tablon { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; align-items: start; margin-bottom: 18px; }
.nota { background: var(--carta); border: 1px solid var(--borde); border-left: 4px solid var(--borde);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); }
.nota-fijada { background: #fffdf3; border-color: #f0e2b0; }
.nota-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nota-fecha { margin-left: auto; font-size: 12.5px; }
.nota-titulo { margin: 0 0 6px; font-size: 15.5px; }
.nota-texto { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.nota-doctor { display: inline-block; margin-top: 10px; font-size: 13px; }
.nota-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--borde); font-size: 12.5px; }
.nota-btns { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nota-inline { display: inline; }
.nota-check { display: flex; gap: 8px; align-items: center; margin: 10px 0; font-weight: 600; }
.nota-acciones { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.nota-chincheta { font-size: 13px; }

/* Peticiones: el voto a la izquierda, como en los foros de ideas. */
.pet-marcador { margin-bottom: 16px; }
.pet-marcador-cifras { display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.pet-marcador-cifras strong { font-size: 26px; color: var(--azul); }
.pet-barra { background: #eef1f4; }
.peticiones { display: flex; flex-direction: column; gap: 10px; }
.peticion { display: flex; gap: 14px; background: var(--carta); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); }
.peticion-cerrada { opacity: .68; }
.pet-voto { flex: 0 0 auto; }
.pet-voto-btn { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 52px; padding: 6px 4px; background: #f6f7fa; border: 1px solid var(--borde);
  border-radius: 10px; cursor: pointer; color: var(--texto-suave); font-family: inherit; }
.pet-voto-btn:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.pet-voto-btn.on { background: var(--azul-claro, #eaf0ff); border-color: var(--azul); color: var(--azul); }
.pet-voto-btn:disabled { cursor: default; opacity: .55; }
.pet-voto-flecha { font-size: 11px; line-height: 1; }
.pet-voto-n { font-size: 17px; font-weight: 700; line-height: 1; }
.pet-cuerpo { flex: 1 1 auto; min-width: 0; }
.pet-titulo { margin: 0 0 6px; font-size: 15.5px; }
.pet-titulo a { color: inherit; text-decoration: none; }
.pet-titulo a:hover { color: var(--azul); }
.pet-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.pet-detalle { margin: 10px 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.pet-cierre { margin: 8px 0; font-size: 13.5px; }
.pet-comentario { margin: 8px 0; padding: 8px 12px; background: #f6f7fa; border-radius: 8px; font-size: 13.5px; }
.pet-comentar { display: flex; gap: 6px; margin: 10px 0; }
.pet-comentar input[type="text"] { flex: 1 1 auto; min-width: 0; }
.pet-mandos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.pet-mandos select, .pet-mandos input[type="text"] { padding: 4px 6px; font-size: 13px; }
.pet-mandos label { display: flex; gap: 6px; align-items: center; font-size: 13px; }

@media (max-width: 700px) {
  .notas-tablon { grid-template-columns: 1fr; }
  .peticion { flex-direction: column; }
  .pet-voto-btn { flex-direction: row; gap: 8px; min-width: 0; width: fit-content; }
}

/* Filtros y buscador en la misma línea (Manuel, 25/08/2026): las dos cosas acotan lo
   que se ve, así que no tienen por qué ir en pisos distintos. */
.notas-filtros { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.notas-filtros .chips { margin-bottom: 0; }
.notas-buscador { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.notas-buscador input[type="search"] { width: 260px; max-width: 46vw; }
@media (max-width: 700px) {
  .notas-buscador { margin-left: 0; width: 100%; }
  .notas-buscador input[type="search"] { flex: 1 1 auto; width: auto; max-width: none; }
}

/* Los diez colores del tablón. Papel suave y no color plano: la nota se tiene que leer.
   Cada uno lleva su fondo, su borde y una franja izquierda más subida. Van acotados a
   .nota para que la misma clase pueda usarse en el selector sin teñir la etiqueta. */
.nota.nota-c-amarillo { background: #fff8d6; border-color: #efe0a0; border-left-color: #e3c74d; }
.nota.nota-c-naranja  { background: #ffeeda; border-color: #f2d0a6; border-left-color: #e08b2e; }
.nota.nota-c-rosa     { background: #ffe9f0; border-color: #f3c6d5; border-left-color: #dd6f96; }
.nota.nota-c-rojo     { background: #ffe4e2; border-color: #f0bab5; border-left-color: #d9544c; }
.nota.nota-c-morado   { background: #f0e9fe; border-color: #d5c7f5; border-left-color: #7c4ddb; }
.nota.nota-c-azul     { background: #e4eeff; border-color: #bed3f5; border-left-color: #2f6ee0; }
.nota.nota-c-turquesa { background: #ddf5f4; border-color: #a9dedb; border-left-color: #17a2a0; }
.nota.nota-c-verde    { background: #e3f6e5; border-color: #b3ddb9; border-left-color: #2e9e46; }
.nota.nota-c-lima     { background: #eef7d4; border-color: #cde09a; border-left-color: #8aae1f; }
.nota.nota-c-gris     { background: #eef0f3; border-color: #d3d8df; border-left-color: #7a8697; }

/* La fijada ya no cambia de color: se distingue por la chincheta y por ir la primera,
   y así el color sigue diciendo lo que quiso decir quien la escribió. */
.nota-fijada { box-shadow: 0 0 0 2px rgba(227, 199, 77, .55), var(--sombra); }

/* Elegir color: círculos que se ven, no una lista con los nombres escritos. */
.nota-colores { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.nota-colores legend { font-size: 13.5px; font-weight: 600; padding: 0 6px; }
.nota-color { display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 2px 10px 2px 0; cursor: pointer; font-weight: 400; }
.nota-color input { position: absolute; opacity: 0; width: 0; height: 0; }
.nota-color-bola { display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .16); transition: transform .1s, box-shadow .1s; }
.nota-color:hover .nota-color-bola { transform: scale(1.08); }
.nota-color input:checked + .nota-color-bola { box-shadow: 0 0 0 3px var(--azul); border-color: #fff; }
.nota-color input:focus-visible + .nota-color-bola { outline: 2px solid var(--azul); outline-offset: 3px; }
.nota-color-nombre { font-size: 11.5px; color: var(--texto-suave); }
.nota-color input:checked ~ .nota-color-nombre { color: var(--azul); font-weight: 600; }

.nota-color.nota-c-amarillo .nota-color-bola { background: #fff8d6; border-color: #e3c74d; }
.nota-color.nota-c-naranja  .nota-color-bola { background: #ffeeda; border-color: #e08b2e; }
.nota-color.nota-c-rosa     .nota-color-bola { background: #ffe9f0; border-color: #dd6f96; }
.nota-color.nota-c-rojo     .nota-color-bola { background: #ffe4e2; border-color: #d9544c; }
.nota-color.nota-c-morado   .nota-color-bola { background: #f0e9fe; border-color: #7c4ddb; }
.nota-color.nota-c-azul     .nota-color-bola { background: #e4eeff; border-color: #2f6ee0; }
.nota-color.nota-c-turquesa .nota-color-bola { background: #ddf5f4; border-color: #17a2a0; }
.nota-color.nota-c-verde    .nota-color-bola { background: #e3f6e5; border-color: #2e9e46; }
.nota-color.nota-c-lima     .nota-color-bola { background: #eef7d4; border-color: #8aae1f; }
.nota-color.nota-c-gris     .nota-color-bola { background: #eef0f3; border-color: #7a8697; }

/* El «+» para añadir un tipo al directorio (Manuel, 25/08/2026). Es un <details>, para
   que abra y cierre sin depender de que el navegador ejecute nada. */
.dir-cat { display: flex; gap: 6px; align-items: flex-start; margin-top: 5px; }
.dir-cat > select { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.dir-cat-nueva { position: relative; flex: 0 0 auto; }
.dir-cat-nueva > summary { display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--borde); border-radius: 9px;
  background: #fff; color: var(--azul); font-size: 20px; line-height: 1; cursor: pointer;
  list-style: none; user-select: none; }
.dir-cat-nueva > summary::-webkit-details-marker { display: none; }
.dir-cat-nueva > summary:hover { border-color: var(--azul); background: var(--azul-claro, #eaf0ff); }
.dir-cat-nueva[open] > summary { border-color: var(--azul); background: var(--azul); color: #fff; }
.dir-cat-nueva-caja { position: absolute; right: 0; top: 44px; z-index: 30; width: 280px;
  padding: 12px; background: var(--carta, #fff); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 28, 48, .14); }
.dir-cat-nueva-caja input { width: 100%; margin: 0 0 6px; }
.dir-cat-nueva-caja p { margin: 0; font-size: 12px; line-height: 1.4; }
@media (max-width: 700px) {
  .dir-cat-nueva-caja { right: auto; left: 0; width: min(280px, 78vw); }
}

/* La previsión que pone Manuel, con color propio: es lo que dice cuándo toca cada
   petición, y en gris se perdía entre el estado y el resto (Manuel, 25/08/2026). */
.pet-prev { font-weight: 600; }
/* «En breve» en verde y no en rojo (Manuel, 25/08/2026): es una buena noticia —eso se
   hace pronto—, no un aviso de que algo va mal. */
.pet-prev-breve { background: #e3f6e5; color: #2e7d32; }
.pet-prev-corto { background: #fff3d6; color: #8a5a00; }
.pet-prev-largo { background: #eaeef4; color: #4a5567; }

/* Los mandos de la petición, cada cosa en su bloque y sin pisarse. */
.pet-mandos > form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pet-mandos > form + form { padding-left: 12px; border-left: 1px solid var(--borde); }

/* Chat de prueba del agente de admisiones (Ajustes → Probar el agente) */
.ia-chat { margin-bottom: 16px; }
.ia-chat p { margin: 0 0 10px; padding: 10px 13px; border-radius: 12px; max-width: 78%; line-height: 1.45; }
.ia-yo { background: #e8efff; margin-left: auto; }
.ia-agente { background: #eef1f4; }

/* Las cifras del panel del Agente de ventas: número a la derecha, lo que importa en azul. */
.tabla-cifras td { padding: 5px 2px; border: 0; }
.tabla-cifras .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tabla-cifras .destaca { color: var(--azul); font-size: 17px; }

/* Una casilla con su texto al lado, no debajo (Manuel, 29/08/2026). */
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }

/* Los tres botones de repasar una conversación de MiA. */
.ia-repaso { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; }

/* Las secciones de la pantalla del agente, con aire entre ellas: son cinco cuadros largos
   seguidos y pegados no se sabe dónde acaba uno y empieza el siguiente. */
.secciones > .card { margin-bottom: 30px; }
.secciones > .card:last-child { margin-bottom: 0; }
.secciones > .card > h2:first-child,
.secciones > .card > details > summary h2 { margin-top: 0; }

/* Respuestas: plegado, que son cuarenta y tapaban lo demás. */
.acordeon > summary { cursor: pointer; list-style: none; }
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary h2 { display: inline-block; margin: 0; }
.acordeon > summary::before { content: '▸'; margin-right: 9px; color: var(--texto-suave); }
.acordeon[open] > summary::before { content: '▾'; }
.acordeon[open] > summary { margin-bottom: 14px; }

/* La foto del profesor dentro de una conversación de MiA. */
.ia-foto { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; margin-top: 8px; }

/* Doctores: sentinela del scroll infinito (Manuel, 02/09/2026: sin números de página). */
.doc-mas { text-align: center; padding: 1rem 0 .5rem; font-size: 13px; }
.doc-mas-cargando { opacity: .5; }
.doc-mas-cargando a::after { content: ' …'; }

/* Historial: de un vistazo hay que saber QUÉ es cada entrada —anotación a mano, correo o
   WhatsApp— sin ponerse a leer (Manuel, 08/09/2026: «hazlo visual, fácil y cómodo»). Antes
   solo había un puntito de color de 9 px, que no dice nada. Ahora cada tipo lleva su
   distintivo: icono sobre su propio fondo, y en las anotaciones además la palabra. */
.tl-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; align-self: flex-start;
           border-radius: 7px; padding: 2px 7px; font-size: 11.5px; font-weight: 600;
           line-height: 1.55; white-space: nowrap; }
.tl-chip .ico { width: 14px; height: 14px; }
.tl-chip-whatsapp { background: #e7f9ef; color: #0f766e; }
.tl-chip-whatsapp .wa-ico { color: #25d366; }
.tl-chip-email { background: #e6f4fd; color: #0369a1; }
.tl-chip-email .ico { color: #0ea5e9; }
.tl-chip-mano { background: #e8ebfd; color: #0d2ce2; }
.tl-chip-mano .ico { color: #0d2ce2; }
/* MiA, el dosier y los formularios de la web: los ha provocado el DOCTOR, así que se ven,
   pero no se disfrazan de anotación de nadie (Manuel, 08/09/2026). */
.tl-chip-mia { background: #f1ebfe; color: #5b21b6; }
.tl-chip-mia .ico { color: #7c3aed; }
.tl-chip-dosier { background: #fdf0e4; color: #9a4a06; }
.tl-chip-dosier .ico { color: #ea8a2e; }
.tl-chip-web { background: #eef7ec; color: #3f6212; }
.tl-chip-web .ico { color: #65a30d; }
/* El goteo del propio CRM, en gris: está, pero no llama la atención. */
.tl-chip-crm { background: #eef0f3; color: #55606e; }
.tl-chip-crm .ico { color: #8a93a0; }
/* El parte de trabajo del asistente: gris OSCURO, no azul, que no es una anotación de
   nadie del equipo (Manuel, 11/09/2026). */
.tl-chip-mantenimiento { background: #e7e9ed; color: #3a424f; }
.tl-chip-mantenimiento .ico { color: #4b5563; }
/* En la cabecera de la anotación el distintivo va pegado a la fecha, con su respiro. */
.nota-head .tl-chip { margin-right: 8px; vertical-align: -5px; }
/* Y una pincelada en el canto de la tarjeta: a media pantalla de distancia ya se ve cuál es
   una anotación del equipo y cuál un correo, sin leer una palabra. */
.nota-card { border-left: 3px solid #0d2ce2; }
.nota-card.nota-email { border-left-color: #0ea5e9; }
.nota-card.nota-mia { border-left-color: #7c3aed; }
.nota-card.nota-dosier { border-left-color: #ea8a2e; }
.nota-card.nota-web { border-left-color: #65a30d; }
.nota-card.nota-crm { border-left-color: #c9cfd8; }
.nota-card.nota-mantenimiento { border-left-color: #4b5563; }
/* La conversación plegada: el resumen es una línea más de la cronología, no un titular. */
.tl-grupo > summary .tl-chip { margin-right: 4px; vertical-align: -4px; }
.ini-tipo-whatsapp { background: #25d366; }

/* ---- WhatsApp dentro del CRM (Manuel, 08/09/2026: «que el CRM sea el WhatsApp Web») ----
   El icono verde de la ficha ya no es un enlace a wa.me, es un botón que abre la
   conversación aquí. Se le quita todo el aspecto de botón para que siga siendo el icono de
   siempre. */
.wa-abrir { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 0;
            vertical-align: -4px; }
.wa-abrir:hover .wa-ico { color: #128c7e; }

.wa-dlg { width: min(640px, 94vw); box-sizing: border-box; padding: 14px 18px 12px; }   /* aire por los lados (Manuel, 09/09/2026) */
.wa-dlg > h3 { display: flex; align-items: center; gap: 8px; }
.wa-dlg > h3 .ico { width: 20px; height: 20px; }
.wa-sub { font-size: 12.5px; font-weight: 400; margin-left: auto; }
/* El hilo es lo que crece y lo único que hace scroll: el diálogo alto ya reparte el alto.
   Columna flexible y no bloques sueltos: así cada burbuja mide LO QUE OCUPA SU TEXTO y se
   pega al lado que le toca, en vez de estirarse hasta el borde (Manuel, 08/09/2026). */
.wa-hilo { flex: 1 1 auto; overflow-y: auto; min-height: 220px;
           display: flex; flex-direction: column; align-items: flex-start;
           /* El beige de WhatsApp con su papel pintado. El dibujo va como SVG incrustado y no
              como fichero: la CSP del CRM solo admite `img-src 'self' data:`, así que una
              imagen de fuera no se cargaría (Manuel, 08/09/2026). */
           background-color: #efeae2; border-radius: 10px; padding: 16px 14px;
           background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23d8d0c4' stroke-width='1.1' stroke-linecap='round'%3E%3Ccircle cx='13' cy='14' r='4.5'/%3E%3Crect x='40' y='8' width='13' height='10' rx='2'/%3E%3Cpath d='M8 44l5-5 5 5'/%3E%3Cpath d='M30 34h10M30 38h6'/%3E%3Ccircle cx='55' cy='48' r='3.5'/%3E%3Cpath d='M60 22l4 4-4 4'/%3E%3Cpath d='M18 62h9'/%3E%3C/g%3E%3C/svg%3E"); }
.wa-dia { align-self: center; font-size: 11.5px; color: #54656f; margin: 12px 0 10px;
          background: #ffffffd9; padding: 4px 11px; border-radius: 8px; box-shadow: 0 1px 1px rgba(11, 20, 26, .06); }
.wa-msg { max-width: 76%; background: #fff; color: #111b21; border-radius: 8px;
          padding: 7px 10px 7px; margin-bottom: 6px; box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
          border-top-left-radius: 2px; }
.wa-msg::after { content: ''; display: block; clear: both; }
.wa-msg-mio { background: #d9fdd3; align-self: flex-end;
              border-top-left-radius: 8px; border-top-right-radius: 2px; }
/* El texto va EN LÍNEA a propósito: así la hora, que flota a la derecha detrás de él, se
   coloca en el mismo renglón cuando cabe y baja sola cuando no. Es exactamente lo que hace
   WhatsApp y es lo que hace que se vea suyo (Manuel, 08/09/2026). */
.wa-txt { display: inline; font-size: 14.2px; line-height: 1.42; white-space: pre-wrap;
          overflow-wrap: anywhere; }
.wa-pie { float: right; font-size: 11px; color: #667781; margin: 0 0 0 10px;
          position: relative; top: 5px; white-space: nowrap; }
.wa-leido { color: #53bdeb; }
.wa-fallo { color: #c0392b; }
.wa-adjunto { font-size: 12px; color: var(--texto-suave); font-style: italic; margin-top: 3px; }
/* Lo que dice una nota de voz. En cursiva y con una barrita al lado: se lee como una cita,
   porque eso es —lo que el servidor ha entendido, no lo que escribió el doctor. */
/* ---- La caja de escribir: herramientas, plantillas y ficheros ---- */
/* El renglón de arriba de la caja: emojis a la izquierda, herramientas a la derecha. Las
   herramientas no se encogen nunca; lo que cede sitio es la fila de emojis (Manuel,
   08/09/2026). */
.wa-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wa-herramientas { display: flex; gap: 6px; margin-left: auto; flex: none; }
/* La lista de plantillas sale ENCIMA de la caja y con tope de alto: con quince respuestas
   preparadas, sin tope, empujaba la conversación fuera de la pantalla. */
/* Fondo tintado y sombra: sobre la tarjeta blanca del chat, en blanco no se distinguía
   dónde empezaba el panel (Manuel, 09/09/2026). Lo mismo en .wa-adjuntar. */
.wa-sugerencias { max-height: 210px; overflow-y: auto; margin-bottom: 6px; padding: 4px;
                  background: #e2e8f5; border: 1px solid #b9c6e0; border-radius: 10px;
                  box-shadow: 0 4px 14px rgba(13,44,226,.10); }
/* Cada plantilla es una tarjeta blanca separada: seguidas y sin borde no se veía que eran
   varias (Manuel, 09/09/2026). */
.wa-sug { display: block; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
          font-family: inherit; padding: 8px 10px; border-radius: 8px; margin: 4px 0;
          background: #ffffff; border: 1px solid #cfd8ea; }
.wa-sug:hover { border-color: var(--azul); box-shadow: 0 2px 8px rgba(13,44,226,.12); }
.wa-sug-atajo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
                color: #0f766e; font-weight: 700; margin-right: 7px; }
.wa-sug-nom { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.wa-sug-txt { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 2px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-sug-vacio { margin: 6px 8px; font-size: 13px; color: var(--texto-suave); }
/* «Enlazar con esta ficha», en el buscador de duplicados del lead nuevo: solo sale cuando se
   viene de una conversación de WhatsApp sin ficha. */
.nl-res-enlazar { display: block; width: 100%; margin: 2px 0 10px; }

/* El fichero que espera turno detrás del mensaje. */
.wa-cola { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 10px;
           background: #e7f9ef; border-radius: 8px; font-size: 12.5px; color: #0f5132; }
.wa-cola-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-cola-quitar { flex: none; border: 0; background: none; cursor: pointer; color: #0f5132;
                  font-size: 14px; line-height: 1; padding: 2px 4px; }
.wa-adjuntar { margin-bottom: 6px; padding: 8px 10px; background: #eef2f9;
               border: 1px solid #cfd8ea; border-radius: 10px;
               box-shadow: 0 4px 14px rgba(13,44,226,.10); }
.wa-adjuntar-tit { margin: 0 0 6px; font-size: 12.5px; color: var(--texto-suave); }
.wa-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-doc { border: 1px solid #cfd8ea; background: #ffffff; border-radius: 8px;
          padding: 5px 9px; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.wa-doc:hover { background: #e9f5ee; }
.wa-doc[disabled] { opacity: .5; cursor: wait; }
.wa-subir { display: block; margin-top: 8px; font-size: 12.5px; color: var(--texto-suave); }
.wa-subir input { display: block; margin-top: 4px; font-size: 12.5px; }

/* El monoespaciado de WhatsApp dentro de la burbuja, sin que se salga de ancho. */
.wa-txt code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
               background: rgba(0, 0, 0, .05); padding: 0 3px; border-radius: 4px; }
.wa-dicho { display: block; margin-top: 5px; padding-left: 8px; border-left: 2px solid #cfd8dc;
            font-size: 13px; font-style: italic; color: #47606d; white-space: pre-wrap; }
.wa-vacio { align-self: center; color: #54656f; font-size: 13.5px; padding: 24px 16px;
            text-align: center; }
.wa-aviso { font-size: 12.5px; margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; }
.wa-aviso-ok { background: #e7f9ef; color: #0f766e; }
.wa-aviso-cerrado { background: #fdecea; color: #a02a1c; }
.wa-aviso .wa-btn-meta { margin: 0 6px; vertical-align: middle; }
/* El panel de «Enviar plantilla» (plantillas de Meta, ventana cerrada). Mismo aire que los
   paneles de la caja: tintado y con sombra, para que se vea que flota. */
.wa-meta { margin: 8px 0 0; padding: 10px 12px; background: #e2e8f5; border: 1px solid #b9c6e0;
           border-radius: 10px; box-shadow: 0 4px 14px rgba(13,44,226,.10); font-size: 13px; }
.wa-meta-tit { margin: 0 0 8px; color: var(--texto-suave); font-size: 12.5px; }
.wa-meta-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wa-meta-fila select { flex: 1 1 220px; min-width: 0; font-family: inherit; font-size: 13px;
                       padding: 6px 8px; border: 1px solid #cfd8ea; border-radius: 8px; background: #fff; }
.wa-meta-libre { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 7px 9px;
                 border: 1px solid #cfd8ea; border-radius: 8px; margin-bottom: 8px; resize: vertical; }
.wa-meta-prev { background: #fff; border: 1px solid #cfd8ea; border-radius: 8px; padding: 9px 11px;
                white-space: pre-wrap; line-height: 1.45; margin-bottom: 8px; }
.wa-meta-aviso { margin: 0 0 8px; color: #a02a1c; font-size: 12.5px; }
.wa-meta-acciones { display: flex; gap: 8px; }
.wa-caja { margin-top: 10px; }
.wa-caja-fila { display: flex; gap: 8px; align-items: flex-end; }
/* Los emojis que usa Yosune, encima de donde se escribe. Se sacaron contando los 9.813
   mensajes que ha escrito a mano; no son los «populares» de nadie, son los suyos. */
.wa-emojis { display: flex; flex-wrap: wrap; gap: 1px; flex: 1; min-width: 0; }
.wa-emoji { border: 0; background: none; cursor: pointer; padding: 3px 5px; border-radius: 6px;
            font-size: 19px; line-height: 1.15; }
.wa-emoji:hover { background: #e9f5ee; }
.wa-emoji:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
/* El botón no se encoge y la caja de texto sí: al revés, en el móvil «Enviar» se salía. */
.wa-mandar { flex: none; }
.wa-texto { min-width: 0; }
/* El botón de enviar, en el verde de WhatsApp y no en el azul del CRM: aquí se está en
   WhatsApp, y el ojo lo agradece. */
.wa-mandar.btn-primary { background: #25d366; border-color: #25d366; color: #fff; }   /* texto en blanco (Manuel, 09/09/2026) */
.wa-mandar.btn-primary:hover { background: #1eb455; border-color: #1eb455; }
.wa-texto { flex: 1; resize: vertical; font-family: inherit; font-size: 14px; padding: 8px 10px;
            border: 1px solid var(--borde); border-radius: 10px; }
.wa-pie-dlg { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 640px) {
  /* A pantalla completa pero CON márgenes: sin el box-sizing y el padding propios, las
     burbujas se pegaban a los bordes y «Enviar» y «Cerrar» se salían por la derecha
     (Manuel, 08/09/2026). */
  .wa-dlg { width: 100vw; max-width: 100vw; box-sizing: border-box; padding: 12px 12px 14px;
            margin: 0; }
  .wa-dlg > h3 { flex-wrap: wrap; margin-bottom: 8px; }
  .wa-dlg > h3 .wa-sub { flex-basis: 100%; margin-left: 0; }
  .wa-hilo { padding: 12px 8px; }
  .wa-msg { max-width: 88%; }
  .wa-caja-fila { gap: 6px; }
  /* En el móvil no se parten en tres renglones: una sola fila que se arrastra con el dedo,
     y las herramientas debajo para que no le coman el sitio. */
  .wa-emojis { flex-wrap: nowrap; overflow-x: auto; }
  .wa-barra { flex-wrap: wrap; }
  .wa-herramientas { margin-left: 0; }
  .wa-texto { font-size: 16px; }   /* 16 px o iOS hace zoom solo al escribir */
}
/* La foto dentro de la burbuja: manda el ancho de la burbuja, no el de la foto. */
/* La foto no manda sobre la burbuja: se limita el alto para que una foto vertical no se
   coma la conversación entera. */
.wa-img { display: block; max-width: 100%; max-height: 300px; width: auto; border-radius: 8px;
          margin-bottom: 6px; }
.wa-adjunto-enl { display: inline-block; font-size: 12.5px; margin-top: 3px; }

/* ---- La bandeja de WhatsApp (whatsapp.php) ----
   Tres columnas: conversaciones · chat · ficha del doctor. La tercera es la razón de ser de
   esto: WhatsApp Web nunca podrá decirte quién es el que te escribe (Manuel, 08/09/2026). */
.wa-bandeja { display: grid; grid-template-columns: minmax(0, 310px) minmax(0, 1fr) minmax(0, 275px);
              gap: 14px; align-items: start; }
.wa-col-lista { min-width: 0; background: var(--carta); border: 1px solid var(--borde);
                border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px; }
.wa-buscar { width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1px solid var(--borde);
             border-radius: 20px; font-family: inherit; font-size: 13.5px; margin-bottom: 8px; }
.wa-lista { max-height: calc(100vh - 265px); overflow-y: auto; }
/* box-sizing y min-width son obligatorios aquí: sin ellos la fila no se deja encoger y en
   el móvil la lista entera se salía de la pantalla (Manuel, 08/09/2026). */
.wa-conv { display: block; width: 100%; box-sizing: border-box; min-width: 0; text-align: left;
           background: none; border: 0; border-bottom: 1px solid var(--borde); padding: 9px 8px;
           cursor: pointer; font-family: inherit; border-radius: 8px; }
.wa-conv:hover { background: var(--fondo); }
.wa-conv.on { background: var(--azul-claro); }
/* Las de teléfonos desconocidos se ven algo más apagadas, pero se abren y se leen. */
.wa-conv-sinficha .wa-conv-nom { color: var(--texto-suave); font-weight: 500; }
.wa-conv-alto, .wa-conv-bajo { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* min-width:0 en el hijo que se recorta: si no, los tres puntos no aparecen nunca y el texto
   empuja la fila a lo ancho. Es la trampa clásica de flexbox. */
.wa-conv-nom { font-weight: 600; font-size: 13.8px; color: var(--texto); flex: 1; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-conv-hora { font-size: 11px; color: var(--texto-suave); flex: none; }
.wa-conv-ult { font-size: 12.5px; color: var(--texto-suave); flex: 1; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Las tres líneas de la fila existen SIEMPRE, tengan texto o no: una conversación sin vista
   previa o sin chapa se quedaba más baja que las de al lado y la lista salía descuadrada
   (Manuel, 08/09/2026). */
.wa-conv-bajo { min-height: 19px; }
.wa-conv-marca { display: block; min-height: 16px; font-size: 10.5px; color: #9aa3ae;
                 letter-spacing: .03em; }
/* El globo verde de siempre: cuántos hay sin leer. */
.wa-sinleer { flex: none; background: #25d366; color: #06301a; font-size: 11px; font-weight: 700;
              border-radius: 10px; padding: 1px 7px; }
/* Un punto para «esta espera respuesta» aunque ya esté leída: es la señal que importa. */
.wa-espera-pt { flex: none; color: #ea8a2e; font-size: 12px; }
.wa-conv-espera .wa-conv-nom { color: #9a4a06; }

.wa-col-centro { min-width: 0; }
.wa-lista, .wa-conv-marca { min-width: 0; }
.wa-sin-elegir { background: var(--carta); border: 1px solid var(--borde); border-radius: var(--radio);
                 box-shadow: var(--sombra); padding: 40px 20px; text-align: center;
                 color: var(--texto-suave); }
.wa-panel { display: flex; flex-direction: column; height: calc(100vh - 215px); min-height: 420px;
            background: var(--carta); border: 1px solid var(--borde); border-radius: var(--radio);
            box-shadow: var(--sombra); padding: 12px; }
.wa-panel[hidden] { display: none; }
.wa-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex: 0 0 auto; }
/* «Revisado» va a la derecha del todo de la cabecera del chat. El naranja es el de la casa
   (.btn-naranja, el mismo de «+ Nueva acción»): aquí solo se coloca, no se pinta. */
.wa-revisado { margin-left: auto; flex: none; }
.wa-cab .ico { width: 20px; height: 20px; }
.wa-titulo { font-weight: 700; font-size: 15px; }
.wa-cab .wa-sub { margin-left: auto; font-size: 12.5px; }
/* La estrella de «importante»: en la cabecera del chat (botón) y en la fila de la lista. */
.wa-estrella { border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
               color: #b5b9c4; padding: 0 4px; }
.wa-estrella:hover { color: #f59e0b; }
.wa-estrella.on { color: #f59e0b; }
.wa-equipo { border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1;
  padding: 0 2px; filter: grayscale(1); opacity: .45; }
.wa-equipo:hover { opacity: .8; }
.wa-equipo.on { filter: none; opacity: 1; }
.wa-conv-estrella { display: none; color: #f59e0b; margin-right: 4px; }
.wa-conv-estrella.on { display: inline; }

.wa-ficha { background: var(--carta); border: 1px solid var(--borde); border-radius: var(--radio);
            box-shadow: var(--sombra); padding: 14px; font-size: 13px; }
.wa-ficha:empty { display: none; }
.wa-ficha h3 { margin: 0 0 10px; font-size: 15px; }
.wa-ficha p { margin: 0 0 8px; color: var(--texto); }
.wa-ficha-et { display: block; font-size: 11px; color: var(--texto-suave); text-transform: uppercase;
               letter-spacing: .04em; }

@media (max-width: 1200px) {
  .wa-bandeja { grid-template-columns: 270px minmax(0, 1fr); }
  /* En pantalla estrecha la ficha estorba más de lo que ayuda: el enlace del chat basta. */
  .wa-ficha { display: none; }
}
@media (max-width: 860px) {
  .wa-bandeja { grid-template-columns: 1fr; }
  .wa-lista { max-height: 320px; }
  .wa-panel { height: 70vh; }
}

/* ---- Panel de control · WhatsApp sin responder ----
   Un doctor que escribe y al que nadie contesta es una matrícula que se va. La espera es lo
   primero que se lee, y en rojo cuando pasa de un día (Manuel, 08/09/2026). */
.wa-pend { padding: 6px 10px; }
.wa-pend-fila { display: flex; align-items: center; gap: 12px; padding: 8px 4px;
                border-bottom: 1px solid var(--borde); font-size: 13.5px; }
.wa-pend-fila:last-child { border-bottom: 0; }
.wa-pend-espera { flex: none; min-width: 46px; text-align: center; font-weight: 700;
                  font-size: 12px; color: #9a4a06; background: #fdf0e4; border-radius: 7px;
                  padding: 3px 7px; }
.wa-pend-urge .wa-pend-espera { color: #a02a1c; background: #fdecea; }
.wa-pend-nom { flex: none; min-width: 170px; font-weight: 600; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.wa-pend-txt { flex: 1; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.wa-pend-acts { flex: none; display: flex; gap: 6px; align-items: center; }
.wa-pend-form { display: inline; }
@media (max-width: 780px) {
  .wa-pend-fila { flex-wrap: wrap; }
  .wa-pend-nom { min-width: 0; }
  .wa-pend-txt { flex: 1 0 100%; order: 3; }
}

/* ---- La conversación de WhatsApp en el historial de la ficha ----
   Una conversación no se lee en un desplegable cerrado: los últimos mensajes se ven y el
   resto queda a un clic (Manuel, 08/09/2026). Burbujas pequeñas, no renglones. */
.nota-card.nota-whatsapp { border-left-color: #25d366; }
.tl-wa-msg { max-width: 82%; width: fit-content; background: #fff; border: 1px solid #e6e9ec;
             border-radius: 9px; padding: 6px 9px 4px; margin: 0 0 5px; }
.tl-wa-mio { background: #e9fbe4; border-color: #d3f2ca; margin-left: auto; }
.tl-wa-txt { display: block; font-size: 13.5px; line-height: 1.4; color: var(--texto);
             overflow-wrap: anywhere; white-space: pre-wrap; }
.tl-wa-pie { display: block; font-size: 10.5px; color: var(--texto-suave); text-align: right; }
.tl-wa-antes { margin-bottom: 6px; }
.tl-wa-antes > summary { font-size: 12.5px; }
/* Los dos filtros de la bandeja, centrados y en dos filas: de qué número arriba, de quién
   debajo (Manuel, 08/09/2026). */
.wa-filtros { display: flex; flex-direction: column; align-items: center; gap: 6px;
              margin: 0; }
.wa-filtro-fila { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.wa-filtro-fila .wa-nueva { margin-right: 10px; }
/* Empezar una conversación nueva: el panel de buscar la ficha, encima de la lista. */
.wa-nueva-panel { margin: 0 0 8px; padding: 10px 12px; background: #e2e8f5; border: 1px solid #b9c6e0;
                  border-radius: 10px; box-shadow: 0 4px 14px rgba(13,44,226,.10); font-size: 13px; }
.wa-nueva-tit { display: flex; align-items: center; margin: 0 0 8px; color: var(--texto-suave); font-size: 12.5px; }
.wa-nueva-cerrar { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 18px;
                   line-height: 1; color: var(--texto-suave); padding: 0 2px; }
.wa-nueva-q { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #cfd8ea;
              border-radius: 8px; font-family: inherit; font-size: 13.5px; margin-bottom: 8px; }
.wa-nueva-res { max-height: 260px; overflow-y: auto; }
.wa-nueva-res .muted { margin: 4px 0; }
.wa-nueva-ficha { display: block; width: 100%; box-sizing: border-box; text-align: left; border: 1px solid #cfd8ea;
                  background: #fff; border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer;
                  font-family: inherit; }
.wa-nueva-ficha:hover { border-color: var(--azul); }
.wa-nueva-ficha[disabled] { opacity: .55; cursor: not-allowed; }
.wa-nueva-nom { display: block; font-weight: 600; font-size: 13.5px; color: var(--texto); }
.wa-nueva-pista { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.wa-lista-vacia { padding: 18px 12px; text-align: center; color: var(--texto-suave); font-size: 13px; }
.wa-lista-vacia p { margin: 0 0 10px; }
.wa-et-alumno { color: #166534; font-weight: 600; }
.wa-et-lead { color: #7c3aed; font-weight: 600; }
@media (max-width: 720px) {
  .wa-filtros { width: 100%; }
}

/* ---- El aviso que no se apaga solo: WhatsApp esperando respuesta ----
   La barra del menú se tiñe mientras haya un doctor sin contestar, y se apaga cuando alguien
   le escribe o marca «Ya le he llamado» (Manuel, 08/09/2026). Es un borde, no un fondo rojo:
   se ve desde la otra punta del despacho sin gritar ni tapar el menú. */
.topbar.topbar-wa { box-shadow: inset 0 -3px 0 #e0342b; }
.topbar.topbar-wa .mainnav a[href^="whatsapp.php"] { color: #c0281f; font-weight: 600; }
.topbar.topbar-wa .mainnav a[href^="whatsapp.php"] .ico { color: #e0342b; }
/* El globo con el número, en el propio menú. */
.nav-globo { display: inline-block; min-width: 17px; margin-left: 5px; padding: 0 5px;
             background: #e0342b; color: #fff; border-radius: 9px; font-size: 11px;
             font-weight: 700; line-height: 17px; text-align: center; vertical-align: 1px; }
.btn-wa-espera { border-color: #e0342b; color: #c0281f; font-weight: 600; }
.wa-atendida-form { margin: 0; }
/* Contestadas por MiA y por nadie más: violeta, el color con el que ya se marca a MiA. */
.wa-et-mia { flex: none; background: #f1ebfe; color: #5b21b6; font-size: 10.5px; font-weight: 700;
             border-radius: 7px; padding: 1px 6px; }
/* Plantillas que manda un robot: existen, pero no se eligen a mano. */
.pl-robot { display: inline-block; margin-left: 7px; background: #eef0f3; color: #55606e;
            border-radius: 7px; padding: 1px 7px; font-size: 11px; font-weight: 600; }

/* ---- La ficha del doctor en la bandeja de WhatsApp ----
   Foto, en qué anda y lo último que ha pasado. Es la columna que WhatsApp Web no puede
   tener, así que merece la pena que diga algo (Manuel, 08/09/2026). */
.wa-ficha-foto { display: block; width: 74px; height: 74px; border-radius: 50%; object-fit: cover;
                 margin: 0 auto 10px; border: 2px solid var(--borde); }
/* El nombre, centrado bajo la foto, como en una ficha de verdad (Manuel, 08/09/2026). */
.wa-ficha-nom { margin: 0 0 10px; font-size: 15px; line-height: 1.3; text-align: center; }
.wa-ficha-nom a { text-decoration: none; }
.wa-ficha-nom a:hover { text-decoration: underline; }
/* La flechita de «se abre en otra pestaña»: pequeña y detrás del nombre. */
.wa-ficha-ir { margin-left: 5px; font-size: 12px; color: var(--texto-suave); }
.wa-ficha-h { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
              color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: 10px; }
.wa-hist { margin-bottom: 9px; font-size: 12.5px; line-height: 1.4; }
.wa-hist-cuando { display: block; font-size: 11px; color: var(--texto-suave); }
.wa-hist-txt { color: var(--texto); overflow-wrap: anywhere; }
/* Los mismos distintivos del historial, en el resumen de la bandeja. */
.tl-chip-whatsapp, .tl-chip-web, .tl-chip-dosier, .tl-chip-mia, .tl-chip-email, .tl-chip-mano { }
/* El resumen del doctor: la etiqueta y la fecha en una línea, y el texto debajo. */
.wa-hist-et { margin-right: 6px; vertical-align: 1px; }
.wa-hist-cuando { display: inline; }
.wa-hist-txt { display: block; margin-top: 2px; }
/* La pantalla de WhatsApp respira menos por arriba: el título y los filtros no necesitan
   tanto sitio y lo que interesa es ver la conversación (Manuel, 08/09/2026). */
.wa-bandeja { margin-top: 2px; }
/* Título a la izquierda y filtros en el centro EXACTO de la página, en la misma línea. Las
   dos columnas de los lados miden lo mismo (1fr), así que la del medio cae en el centro
   aunque el título sea más ancho o más estrecho. */
body.pag-whatsapp .pagehead { display: grid; grid-template-columns: 1fr auto 1fr;
                              align-items: center; margin-bottom: 8px; }
body.pag-whatsapp .pagehead h1 { margin-bottom: 0; }
body.pag-whatsapp main.wrap { padding-top: 4px; }
@media (max-width: 900px) {
  /* En estrecho no caben en la misma línea: se apilan como antes. */
  body.pag-whatsapp .pagehead { display: flex; }
  body.pag-whatsapp .wa-filtros { width: 100%; margin-top: 6px; }
}
/* Las chapas del doctor en la bandeja, centradas bajo su nombre. */
.wa-ficha-chapas { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
                   margin: -4px 0 12px; }

/* ---- El simulador de MiA (Ajustes › Conocimiento del agente) ----
   Un chat de prueba: se parece al de WhatsApp para que lo que se ve aquí se lea igual que lo
   que le llegará al doctor, pero sin el fondo verde, que esto no es WhatsApp. */
.sim h2 { display: flex; align-items: center; gap: 8px; }
.sim h2 .sim-marca { margin-left: auto; font-size: 13px; padding: 3px 6px; }
.sim-hilo { display: flex; flex-direction: column; gap: 8px; min-height: 180px; max-height: 46vh;
            overflow-y: auto; padding: 12px; margin: 10px 0; background: var(--fondo);
            border: 1px solid var(--borde); border-radius: 10px; }
.sim-msg { max-width: 80%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
           white-space: pre-wrap; word-break: break-word; }
.sim-doctor { align-self: flex-end; background: var(--azul-claro); border-bottom-right-radius: 4px; }
.sim-mia { align-self: flex-start; background: var(--carta); border: 1px solid var(--borde);
           border-bottom-left-radius: 4px; }
.sim-aviso, .sim-error { align-self: center; max-width: 100%; font-size: 12.5px; text-align: center;
                         color: var(--texto-suave); background: none; }
.sim-error { color: #a02a1c; }
.sim-esperando { opacity: .6; font-style: italic; }
/* «Mejorar esta respuesta» solo aparece bajo lo que dice MiA: es la salida cuando se equivoca
   y lleva al formulario de abajo con la pregunta ya puesta. */
.sim-mejorar { display: block; margin-top: 6px; font-size: 12px; }
.sim-caja { display: flex; gap: 8px; align-items: flex-end; }
.sim-texto { flex: 1; min-width: 0; resize: vertical; font-family: inherit; font-size: 14px;
             padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.sim-enviar { flex: none; }

/* La foto del chat, ampliada al pulsarla (09/09/2026). */
.wa-img-zoom { cursor: zoom-in; }
dialog.wa-lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh;
                     cursor: zoom-out; overflow: hidden; }
dialog.wa-lightbox::backdrop { background: rgba(0,0,0,.85); }
dialog.wa-lightbox img { display: block; max-width: 94vw; max-height: 94vh; border-radius: 8px;
                         box-shadow: 0 10px 40px rgba(0,0,0,.6); }

/* Enlaces dentro de las burbujas del chat (09/09/2026). */
.wa-enlace { color: #0b57d0; text-decoration: underline; word-break: break-all; }
.wa-burbuja-mia .wa-enlace, .wa-mio .wa-enlace { color: #0b57d0; }


/* --- Pasar lista en la puerta (lista.php): pensado para un iPad en horizontal o vertical --- */
.lista-body { background: #f4f6fb; }
.wrap-doctor .lista-app { width: 100%; max-width: 720px; align-self: flex-start; margin: 16px auto 0; }
.lista-cab { text-align: center; margin: 0 0 22px; }
.lista-cab h1 { font-size: 26px; margin: 0 0 4px; }
.lista-label { display: block; font-size: 22px; font-weight: 600; margin: 8px 0 10px; }
.lista-q { width: 100%; box-sizing: border-box; font: inherit; font-size: 26px; padding: 16px 18px;
  border: 2px solid #b9c6e0; border-radius: 14px; background: #fff; }
.lista-q:focus { outline: none; border-color: var(--azul, #0d2ce2); }
.lista-res { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-persona { width: 100%; text-align: left; font: inherit; font-size: 22px; padding: 16px 18px;
  border-radius: 14px; border: 1px solid #d5dbe8; background: #fff; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; gap: 10px; }
.lista-persona:active { background: #eef2ff; }
.lista-firmado { font-size: 14px; color: #166534; background: #dcfce7; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.lista-vacio { color: #6b7280; text-align: center; margin-top: 14px; font-size: 18px; }
.lista-pregunta { font-size: 24px; text-align: center; margin: 10px 0 18px; line-height: 1.4; }
.lista-acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lista-btn { font-size: 20px; padding: 16px 26px; border-radius: 14px; }
.lista-lienzo-caja { border: 2px dashed #94a3b8; border-radius: 14px; background: #fff; margin: 0 0 14px; overflow: hidden; }
.lista-lienzo { display: block; touch-action: none; }
.lista-ok { font-size: 64px; color: #16a34a; text-align: center; line-height: 1; margin: 6px 0 10px; }
.lista-error { color: #991b1b; background: #fee2e2; border-radius: 8px; padding: 10px 12px; text-align: center; margin: 0 0 12px; }
.ev-lista-enlace { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; }
.hoja-firma-img { max-height: 44px; max-width: 170px; vertical-align: middle; }
.hoja-firma-hora { font-size: 11px; margin-left: 6px; }

/* Recuadro de dinero que se pulsa y enseña quién debe (evento y ficha del curso, 09/09/2026). */
.kpi-pulsa { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--blanco, #fff); border: 1px solid var(--borde, #e3e6ef); border-radius: 10px; padding: 14px 16px; }
.kpi-pulsa:hover { border-color: #b9c6e0; background: #f7f9ff; }
.kpi-pulsa .kpi-num { display: block; font-size: 26px; font-weight: 700; }
.kpi-pulsa .kpi-lbl { display: block; color: var(--texto-suave); font-size: 13px; }

/* Aviso de que ha entrado un WhatsApp mientras mirabas la bandeja (Manuel, 10/09/2026). */
.wa-novedades { display: block; width: 100%; margin: 0 0 8px; padding: 9px 12px; border: 0;
  border-radius: 8px; background: #0d2ce2; color: #fff; font: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; text-align: center; }
.wa-novedades:hover { background: #0a24b8; }