/* ==========================================================================
   Directorio Médico — Hospital MAC Periférico Sur
   Lenguaje visual derivado del Manual de Identidad MAC (rev. 04/12/24).
   Blanco dominante, reglas finas, turquesa como color interactivo,
   verde como marcador de pertenencia. Sin tarjetas flotantes ni degradados
   decorativos: es un directorio, debe leerse como un directorio.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca (Manual §5.1) */
  --verde-claro: #C1D569;  --verde: #9FBF44;  --verde-tinta: #96C121;
  --turq-claro:  #6EC2BC;  --turq:  #23B3AF;

  --verde-50:#F7F9F1; --verde-100:#ECF1DF; --verde-200:#DAE4BE; --verde-300:#C7D897;
  --verde-500:#9FBF44; --verde-600:#809A35; --verde-700:#637829; --verde-800:#4A591E; --verde-900:#333E15;

  --turq-50:#F0FAFA; --turq-100:#DCF4F4; --turq-200:#B7ECEA; --turq-300:#8BE4E2;
  --turq-500:#23B3AF; --turq-600:#1C8F8C; --turq-700:#166F6D; --turq-800:#105251; --turq-900:#0B3938;

  --g-50:#F8FAFA; --g-100:#F1F4F4; --g-200:#E3E8E8; --g-300:#CBD4D4; --g-400:#9AA8A8;
  --g-500:#6E7C7C; --g-600:#556161; --g-700:#414B4B; --g-800:#2B3333; --g-900:#1A2020;

  --exito:#2E7D5B; --exito-bg:#E8F5EE;
  --alerta:#B26A00; --alerta-bg:#FDF3E2;
  --error:#B3261E; --error-bg:#FDECEA;

  /* Roles */
  --fondo: #FFFFFF;
  --fondo-alt: var(--g-50);
  --fondo-hueco: #FBFCFC;
  --texto: var(--g-900);
  --texto-suave: var(--g-600);
  --texto-tenue: var(--g-500);
  --marca-texto: var(--turq-700);
  --linea: var(--g-200);
  --linea-suave: #EDF1F1;
  --foco: var(--turq-600);
  --realce: var(--turq-50);
  --sombra-flotante: 0 12px 32px rgba(11,57,56,.14);
  --sombra-menu: 0 6px 24px rgba(11,57,56,.13);

  --display: "Bitter", "Clarendon Text Pro", "Roboto Slab", Georgia, serif;
  --ui: "Montserrat", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Consolas, monospace;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --alto-cabecera: 60px;
  --ancho-rail: 252px;
  --ancho-lista: 400px;
}

:root[data-tema="oscuro"] {
  --fondo:#101717; --fondo-alt:#161F1F; --fondo-hueco:#131B1B;
  --texto:#E9EEEE; --texto-suave:#A7B4B4; --texto-tenue:#8A9797;
  --marca-texto: var(--turq-300);
  --linea:#26302F; --linea-suave:#1E2726;
  --foco: var(--turq-400, #5DDFDC);
  --realce: #14302F;
  --g-50:#161F1F; --g-100:#1B2524; --g-200:#26302F;
  --exito-bg:#12261D; --alerta-bg:#2A2011; --error-bg:#2C1614;
  --sombra-flotante: 0 12px 32px rgba(0,0,0,.5);
  --sombra-menu: 0 6px 24px rgba(0,0,0,.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--marca-texto); }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px;
}

/* Gesto de marca: el tracking amplio de "H O S P I T A L E S" */
.tracking { letter-spacing: .38em; text-transform: uppercase; }

/* ---------- 2. Marca ---------- */
.logo-mac { display: block; height: 30px; width: auto; }
.filete-marca {
  flex: 0 0 3px; height: 3px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--turq-claro) 0%, var(--turq) 34%, var(--verde) 68%, var(--verde-claro) 100%);
}

/* ==========================================================================
   ACCESO
   ========================================================================== */
.acceso {
  min-height: 100dvh; display: grid; grid-template-columns: 1fr;
  place-items: center; padding: 24px; background: var(--fondo-alt);
  position: relative; overflow: hidden;
}
.acceso::before {
  content: ""; position: absolute; inset: auto -12% -30% auto;
  width: min(720px, 92vw); aspect-ratio: 1.527; opacity: .05;
  background: url("/brand/mac-isotipo-turquesa.svg") center/contain no-repeat;
  pointer-events: none;
}
.acceso-caja {
  position: relative; width: min(420px, 100%); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 40px 36px 32px; box-shadow: var(--sombra-flotante);
}
.acceso-caja .logo-mac { height: 44px; margin-bottom: 28px; }
.acceso h1 { font-family: var(--display); font-size: 26px; line-height: 1.2; margin: 0 0 6px; font-weight: 600; }
.acceso p.sub { margin: 0 0 26px; color: var(--texto-suave); font-size: 14px; }
.acceso label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.acceso input[type=password] {
  width: 100%; padding: 13px 14px; border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--fondo); font-size: 16px; letter-spacing: .06em;
}
.acceso input[type=password]:focus { border-color: var(--turq-600); }
.acceso .aviso { margin-top: 14px; font-size: 13px; color: var(--error);
  background: var(--error-bg); border-radius: var(--r-sm); padding: 9px 12px; display: none; }
.acceso .aviso.visible { display: block; }
.acceso footer { margin-top: 26px; font-size: 11px; color: var(--texto-tenue); line-height: 1.6; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--turq-700); color: #fff; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--turq-800); }
.btn--ancho { width: 100%; padding: 13px; margin-top: 20px; font-size: 15px; }
.btn--fantasma { background: transparent; color: var(--texto); border-color: var(--linea); }
.btn--fantasma:hover { background: var(--g-100); border-color: var(--g-300); }
.btn--peligro { background: var(--error); }
.btn--peligro:hover { background: #8E1E17; }
.btn--sutil { background: transparent; color: var(--texto-suave); padding: 8px 10px; }
.btn--sutil:hover { background: var(--g-100); color: var(--texto); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   ESTRUCTURA DE LA APLICACIÓN
   ========================================================================== */
.app { display: flex; flex-direction: column; height: 100dvh; }

.cabecera {
  flex: 0 0 auto; display: flex; align-items: center; gap: 18px;
  height: var(--alto-cabecera); padding: 0 18px;
  background: var(--fondo); border-bottom: 1px solid var(--linea);
}
.cabecera-marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cabecera-marca .sep { width: 1px; height: 26px; background: var(--linea); }
.cabecera-titulo { min-width: 0; }
.cabecera-titulo b {
  display: block; font-family: var(--display); font-weight: 600; font-size: 15px;
  line-height: 1.1; letter-spacing: -.01em;
}
.cabecera-titulo span {
  display: block; font-size: 9.5px; color: var(--texto-tenue); margin-top: 3px;
  letter-spacing: .28em; text-transform: uppercase;
}

/* Buscador */
.buscador { flex: 1 1 auto; max-width: 560px; position: relative; }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--texto-tenue); pointer-events: none; }
.buscador input {
  width: 100%; padding: 9px 76px 9px 36px; border: 1px solid var(--linea);
  border-radius: var(--r-pill); background: var(--fondo-alt); font-size: 14px;
}
.buscador input:focus { background: var(--fondo); border-color: var(--turq-600); }
.buscador kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--ui); font-size: 10.5px; font-weight: 600; color: var(--texto-tenue);
  border: 1px solid var(--linea); border-radius: 4px; padding: 2px 6px; background: var(--fondo);
  pointer-events: none;
}
.buscador input:not(:placeholder-shown) ~ kbd { display: none; }
.buscador .limpiar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--texto-tenue); cursor: pointer;
  padding: 4px 6px; border-radius: var(--r-pill); display: none; line-height: 1;
}
.buscador input:not(:placeholder-shown) ~ .limpiar { display: block; }

.cabecera-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Menú desplegable */
.menu { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 244px; z-index: 60;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-md);
  box-shadow: var(--sombra-menu); padding: 6px; display: none;
}
.menu.abierto .menu-panel { display: block; }
.menu-panel button, .menu-panel a {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: transparent; border-radius: var(--r-sm);
  cursor: pointer; font-size: 14px; color: var(--texto); text-decoration: none;
}
.menu-panel button:hover, .menu-panel a:hover { background: var(--g-100); }
.menu-panel hr { border: 0; border-top: 1px solid var(--linea-suave); margin: 6px 4px; }
.menu-panel .rotulo {
  padding: 8px 11px 4px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-tenue); font-weight: 700;
}

/* Cuerpo de tres columnas */
.cuerpo { flex: 1 1 auto; display: grid; grid-template-columns: var(--ancho-rail) var(--ancho-lista) 1fr; min-height: 0; }
/* Sin esto, un hijo de grid nunca baja de su ancho de contenido mínimo
   y la lista desborda horizontalmente en pantallas angostas. */
.cuerpo > * { min-width: 0; }

/* ---------- Rail de filtros ---------- */
.rail {
  border-right: 1px solid var(--linea); background: var(--fondo-hueco);
  overflow-y: auto; padding: 16px 0 40px; scrollbar-width: thin;
}
.rail-grupo { padding: 0 14px; margin-bottom: 22px; }
.rail-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-tenue); margin: 0 0 9px; padding: 0 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.rail-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 7px 8px; border: 0; background: transparent; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13.5px; color: var(--texto); line-height: 1.35;
}
.rail-item:hover { background: var(--g-100); }
.rail-item .etq { flex: 1 1 auto; min-width: 0; }
.rail-item .num {
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--texto-tenue);
  flex: 0 0 auto; font-weight: 600;
}
.rail-item[aria-pressed="true"] {
  background: var(--realce); color: var(--marca-texto); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--turq-600);
}
.rail-item[aria-pressed="true"] .num { color: var(--turq-600); }
.rail-item .punto { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }

.rail-buscar {
  width: calc(100% - 12px); margin: 0 6px 8px; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--fondo);
}

/* ---------- Lista ---------- */
.lista-envoltura { position: relative; display: flex; min-width: 0; min-height: 0; border-right: 1px solid var(--linea); }
.lista { flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.lista-barra {
  flex: 0 0 auto; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea-suave);
  font-size: 12px; color: var(--texto-suave);
}
.lista-barra .cuenta { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.lista-barra select {
  margin-left: auto; border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: 12px; background: var(--fondo);
}

.letra {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px;
  scroll-margin-top: 0;
  padding: 7px 16px 6px; background: var(--fondo-alt);
  border-top: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave);
  font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--marca-texto);
  letter-spacing: .1em;
}
.letra::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--linea); }

.fila {
  /* Al saltar a una fila con el teclado o al seleccionarla, que no quede
     escondida debajo del encabezado de letra, que va pegado arriba. */
  scroll-margin-top: 30px; scroll-margin-bottom: 8px;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 10px 14px 11px; border: 0; background: transparent;
  border-bottom: 1px solid var(--linea-suave); cursor: pointer; position: relative;
}
.fila:hover { background: var(--g-50); }
.fila[aria-current="true"] { background: var(--realce); }
.fila[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--turq-600);
}
.fila-nombre {
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila-nombre .tratamiento { color: var(--texto-tenue); font-weight: 500; }
.fila-meta {
  display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 11.5px;
  color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila-meta .esp { color: var(--marca-texto); font-weight: 600; }
.fila-meta .tel { font-variant-numeric: tabular-nums; color: var(--texto-tenue); }
/* Las acciones flotan sobre el borde derecho: así no le roban ancho al
   nombre ni al teléfono mientras nadie las está usando. */
.fila-acciones {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .12s;
  padding-left: 34px;
  background: linear-gradient(90deg, transparent 0%, var(--g-50) 30%);
}
.fila:hover .fila-acciones, .fila:focus-within .fila-acciones { opacity: 1; pointer-events: auto; }
.fila[aria-current="true"] .fila-acciones { background: linear-gradient(90deg, transparent 0%, var(--realce) 30%); }
.icono-btn {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--texto-suave); cursor: pointer;
}
.icono-btn:hover { background: var(--fondo); border-color: var(--linea); color: var(--marca-texto); }
.icono-btn svg { width: 15px; height: 15px; }
.icono-btn.wa:hover { color: #128C7E; }

/* Marcador de pertenencia al cuerpo médico MAC */
.sello-mac {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde-500); display: inline-block;
}

/* Índice alfabético lateral */
.indice {
  flex: 0 0 22px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0; padding: 4px 0; background: var(--fondo);
  border-left: 1px solid var(--linea-suave); user-select: none;
}
.indice button {
  border: 0; background: transparent; cursor: pointer; padding: 0; width: 18px;
  font-size: 9.5px; font-weight: 700; line-height: 1.32; color: var(--texto-tenue);
  border-radius: 3px; font-variant-numeric: tabular-nums;
}
.indice button:hover { background: var(--turq-100); color: var(--turq-700); }
.indice button[disabled] { color: var(--g-300); cursor: default; }

/* ---------- Detalle ---------- */
.detalle { overflow-y: auto; scrollbar-width: thin; background: var(--fondo); position: relative; }
.detalle-vacio {
  height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 40px; text-align: center; color: var(--texto-tenue);
}
.detalle-vacio img { width: 92px; opacity: .18; }
.detalle-vacio p { margin: 0; font-size: 13.5px; max-width: 30ch; line-height: 1.6; }
.detalle-vacio .atajos { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  font-size: 11.5px; margin-top: 4px; }
.detalle-vacio .atajos kbd {
  border: 1px solid var(--linea); border-radius: 4px; padding: 1px 5px;
  font-family: var(--ui); font-weight: 600; font-size: 10.5px; margin-right: 4px;
}

.ficha { max-width: 720px; padding: 30px 34px 60px; }
.ficha-tapa { display: flex; align-items: flex-start; gap: 16px; }
.ficha-tapa .crece { flex: 1 1 auto; min-width: 0; }
.ficha h2 {
  font-family: var(--display); font-size: 29px; line-height: 1.15; margin: 0;
  font-weight: 600; letter-spacing: -.015em; overflow-wrap: anywhere;
}
.ficha h2 .tratamiento { color: var(--texto-tenue); font-weight: 400; font-size: .72em; }
.ficha-rol {
  margin: 9px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--marca-texto);
}
.ficha-sub { margin: 6px 0 0; font-size: 14px; color: var(--texto-suave); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pastilla {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600;
  background: var(--g-100); color: var(--texto-suave); border: 1px solid transparent;
}
.pastilla--mac { background: var(--verde-100); color: var(--verde-800); }
.pastilla--turq { background: var(--turq-100); color: var(--turq-800); }
.pastilla--aviso { background: var(--alerta-bg); color: var(--alerta); }

.acciones-ficha { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 4px; }

.bloque { margin-top: 30px; }
.bloque-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-tenue); margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--linea);
}
.tel-fila {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid var(--linea-suave);
}
.tel-fila .num {
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: .01em; color: var(--texto);
}
.tel-fila .etq { font-size: 11px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .08em; }
.tel-fila .acc { margin-left: auto; display: flex; gap: 4px; }

.datos { display: grid; grid-template-columns: 148px 1fr; gap: 9px 16px; font-size: 14px; }
.datos dt { color: var(--texto-tenue); font-size: 12px; padding-top: 2px; }
.datos dd { margin: 0; overflow-wrap: anywhere; }

.nota-libre {
  background: var(--fondo-alt); border-left: 3px solid var(--verde-300);
  padding: 12px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14px;
  color: var(--texto-suave); line-height: 1.6; white-space: pre-wrap;
}

/* ==========================================================================
   PANELES (papelera, respaldos, bitácora, formulario)
   ========================================================================== */
.velo {
  position: fixed; inset: 0; background: rgba(11,57,56,.32); z-index: 100;
  display: none; align-items: flex-start; justify-content: center; padding: 5vh 20px;
  overflow-y: auto; backdrop-filter: blur(2px);
}
.velo.abierto { display: flex; }
.hoja {
  width: min(720px, 100%); background: var(--fondo); border-radius: var(--r-lg);
  box-shadow: var(--sombra-flotante); overflow: hidden; border: 1px solid var(--linea);
}
.hoja--ancha { width: min(1000px, 100%); }
.hoja-cabecera {
  display: flex; align-items: center; gap: 12px; padding: 18px 24px 16px;
  border-bottom: 1px solid var(--linea);
}
.hoja-cabecera h3 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 600; }
.hoja-cabecera p { margin: 3px 0 0; font-size: 12.5px; color: var(--texto-suave); }
.hoja-cuerpo { padding: 22px 24px; max-height: 66vh; overflow-y: auto; }
.hoja-pie {
  display: flex; align-items: center; gap: 10px; padding: 14px 24px;
  border-top: 1px solid var(--linea); background: var(--fondo-alt);
}
.hoja-pie .crece { flex: 1 1 auto; }

/* Formulario */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--completo { grid-column: 1 / -1; }
.campo label { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--fondo); font-size: 14px; width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--turq-600); }
.campo textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.campo .pista { font-size: 11.5px; color: var(--texto-tenue); }

.tel-editor { display: flex; flex-direction: column; gap: 8px; }
.tel-linea { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 8px; align-items: center; }
.tel-linea input { padding: 9px 11px; }
.tel-linea label.wa {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--texto-suave); white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 500;
}

/* Tablas de administración */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-tenue); font-weight: 700; padding: 0 10px 8px; border-bottom: 1px solid var(--linea);
}
.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla tr:hover td { background: var(--g-50); }
.tabla .num { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.tabla .acc { text-align: right; white-space: nowrap; }
.tabla .destacada td { background: var(--verde-50); }
:root[data-tema="oscuro"] .tabla .destacada td { background: #1A2417; }

.vacio-suave { padding: 34px 10px; text-align: center; color: var(--texto-tenue); font-size: 13.5px; }

/* Avisos flotantes */
.avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aviso-flotante {
  background: var(--g-900); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; box-shadow: var(--sombra-flotante); animation: sube .18s ease;
  display: flex; align-items: center; gap: 10px; max-width: 90vw;
}
.aviso-flotante.exito { background: var(--exito); }
.aviso-flotante.error { background: var(--error); }
.aviso-flotante button { pointer-events: auto; border: 0; background: rgba(255,255,255,.18);
  color: #fff; border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; cursor: pointer; font-weight: 600; }
@keyframes sube { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
.solo-movil { display: none; }
.filtros-movil { display: none; }

@media (max-width: 1180px) {
  :root { --ancho-rail: 216px; --ancho-lista: 340px; }
  .ficha { padding: 26px 24px 60px; }
}

@media (max-width: 940px) {
  .cuerpo { grid-template-columns: 1fr; }
  .rail { display: none; }
  .lista-envoltura { border-right: 0; }
  .detalle {
    position: fixed; inset: 0; z-index: 90; display: none;
    background: var(--fondo); padding-top: 0;
  }
  .detalle.abierto { display: block; }
  .solo-movil { display: inline-flex; }
  .filtros-movil {
    display: flex; gap: 6px; overflow-x: auto; padding: 9px 12px;
    border-bottom: 1px solid var(--linea); background: var(--fondo);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .filtros-movil::-webkit-scrollbar { display: none; }
  .chip {
    flex: 0 0 auto; padding: 6px 13px; border-radius: var(--r-pill); font-size: 12.5px;
    border: 1px solid var(--linea); background: var(--fondo); color: var(--texto-suave);
    cursor: pointer; font-weight: 600; white-space: nowrap;
  }
  .chip[aria-pressed="true"] { background: var(--turq-700); border-color: var(--turq-700); color: #fff; }
  /* En pantalla táctil no hay hover: las acciones vuelven al flujo. */
  .fila { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-acciones {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    padding-left: 0; background: none;
  }
  /* En el móvil el espacio manda: se quedan llamar y WhatsApp; el favorito
     vive en la ficha. Así el teléfono cabe completo en la línea. */
  .fila-acciones [data-acc="fav"] { display: none; }
  .fila-meta { font-size: 11px; }

  /* La cabecera se parte en dos filas: marca + acciones arriba, buscador abajo. */
  .cabecera {
    height: auto; padding: 9px 12px 10px; gap: 8px 10px; flex-wrap: wrap;
    align-items: center;
  }
  .cabecera-marca { order: 1; }
  .cabecera-acciones { order: 2; margin-left: auto; }
  .buscador { order: 3; flex: 1 0 100%; max-width: none; }
  .cabecera-titulo b { font-size: 14px; }
  .cabecera-marca .sep { display: none; }
  .buscador kbd { display: none; }
  /* Manual §4: por debajo de 76 px el imagotipo deja de ser legible → isotipo. */
  #logo-marca { content: url("/brand/mac-isotipo-color.svg"); height: 26px; }
  :root[data-tema="oscuro"] #logo-marca { content: url("/brand/mac-isotipo-blanco.svg"); }
  .filtros-movil { flex: 0 0 auto; min-width: 0; max-width: 100%; }
  .lista-barra { flex: 0 0 auto; }
  .oculta-movil { display: none; }
  .ficha { padding: 20px 18px 80px; }
  .ficha h2 { font-size: 25px; }
  .campos { grid-template-columns: 1fr; }
  .tel-linea { grid-template-columns: 1fr auto; grid-template-areas: "num acc" "etq wa"; }
  .indice { flex: 0 0 20px; }
  .velo { padding: 0; }
  .hoja { border-radius: 0; min-height: 100dvh; width: 100%; }
  .hoja-cuerpo { max-height: none; }
}

/* ==========================================================================
   IMPRESIÓN — un directorio de pared, en papel
   ========================================================================== */
@media print {
  .cabecera, .rail, .indice, .fila-acciones, .lista-barra, .velo, .avisos, .filtros-movil { display: none !important; }
  .cuerpo { display: block; }
  .lista-envoltura, .lista, .detalle { overflow: visible; border: 0; }
  body { font-size: 10.5pt; }
  .fila { break-inside: avoid; padding: 5px 0; }
  .letra { position: static; background: transparent; }
  .detalle { display: none; }
}

/* Aviso del apartado "Sin clasificar" */
#nota-seccion {
  padding: 11px 16px; font-size: 12.5px; line-height: 1.55;
  color: var(--alerta); background: var(--alerta-bg);
  border-bottom: 1px solid var(--linea);
}