@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Paleta neutra (base del sistema) - con un leve tinte cálido, no gris frío puro ---- */
  --gris-25: #FCFBF9;
  --gris-50: #F9F7F4;
  --gris-100: #F2EEE8;
  --gris-200: #E5E0D8;
  --gris-300: #D2CBBF;
  --gris-400: #A39C8E;
  --gris-500: #756D5F;
  --gris-600: #55503F;
  --gris-700: #3E3A2E;
  --gris-800: #2A281F;
  --gris-900: #1C1B15;

  /* ---- Verde profundo (color de marca principal) ---- */
  --azul-50: #EFF4F1;
  --azul-100: #DCE7E1;
  --azul-500: #1F4D3D;
  --azul-600: #163A2D;
  --azul-700: #102B21;

  /* ---- Azul petróleo (acento secundario) ---- */
  --dorado: #2B5A66;
  --dorado-claro: #5D8994;
  --dorado-brillante: #93B4BB;

  /* ---- Semánticos (discretos, sin competir con la marca) ---- */
  --verde-500: #3E8266;
  --verde-bg: #E9F3EE;
  --amarillo-500: #A67C2E;
  --amarillo-bg: #F7EFDE;
  --rojo-500: #B5544A;
  --rojo-bg: #F5E9E7;

  /* ---- Alias funcionales usados en toda la app (no renombrar) ---- */
  --tinta: var(--gris-800);
  --pergamino: var(--gris-50);
  --pergamino-oscuro: var(--gris-100);
  --negro: var(--gris-900);
  --negro-suave: var(--gris-700);
  --linea: var(--gris-200);
  --rojo-error: var(--rojo-500);
  --verde-ok: var(--verde-500);
  --superficie: #FFFFFF;
  --superficie-hover: var(--gris-50);
  --texto-tenue: var(--gris-500);

  --fuente-display: 'Inter', -apple-system, sans-serif;
  --fuente-cuerpo: 'Inter', -apple-system, sans-serif;

  --radio-sm: 6px;
  --radio: 10px;
  --radio-lg: 14px;

  --sombra-sm: 0 1px 2px rgba(31, 77, 61, 0.04);
  --sombra: 0 1px 3px rgba(31, 77, 61, 0.06), 0 1px 2px rgba(31, 77, 61, 0.04);
  --sombra-md: 0 4px 12px rgba(31, 77, 61, 0.07), 0 2px 4px rgba(31, 77, 61, 0.04);
  --sombra-lg: 0 12px 32px rgba(31, 77, 61, 0.12), 0 4px 10px rgba(31, 77, 61, 0.05);

  --transicion: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-lenta: 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Tema oscuro ---------- */
html[data-tema="oscuro"] {
  --gris-25: #0F0E0B;
  --gris-50: #15130F;
  --gris-100: #1C1A15;
  --gris-200: #2C291F;
  --gris-300: #423D2E;
  --gris-400: #6E6858;
  --gris-500: #97917E;
  --gris-600: #BAB4A2;
  --gris-700: #D5D0C1;
  --gris-800: #EBE8DF;
  --gris-900: #F7F5EF;

  --azul-50: #16261F;
  --azul-100: #1F3A2E;
  --azul-500: #6FA98E;
  --azul-600: #8DBEA5;
  --azul-700: #AFD2BE;

  --verde-bg: #1B3327;
  --amarillo-bg: #33290F;
  --rojo-bg: #362019;

  --superficie: #17150F;
  --superficie-hover: #1F1C15;
  --texto-tenue: var(--gris-500);
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

html[data-tema="oscuro"] body { background: var(--gris-50); }

* { box-sizing: border-box; }

html { color-scheme: light; }
html[data-tema="oscuro"] { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  background: var(--pergamino);
  color: var(--tinta);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transicion-lenta), color var(--transicion-lenta);
}

h1, h2, h3 { font-family: var(--fuente-display); font-weight: 700; margin: 0; letter-spacing: -0.015em; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 0.9rem;
}

::selection { background: var(--azul-100); color: var(--azul-700); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gris-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gris-400); }

/* ---------- Pantalla de login ---------- */

.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(31, 77, 61, 0.14), transparent 50%),
    var(--gris-900);
  position: relative;
  overflow: hidden;
}

.tarjeta-login {
  background: var(--superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  padding: 52px 44px 36px;
  width: 100%;
  max-width: 400px;
  animation: aparecer var(--transicion-lenta);
}

.tarjeta-login .marca {
  text-align: center;
  margin-bottom: 38px;
}

.marca-logo-login {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto;
}

#form-login button[type="submit"] { margin-top: 6px; padding: 11px 18px; width: 100%; }

.login-pie {
  text-align: center;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.login-pie span {
  font-size: 0.72rem;
  color: var(--gris-400);
  letter-spacing: 0.02em;
}

.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}
.campo label:has(+ input:required, + select:required, + textarea:required)::after {
  content: " *";
  color: var(--rojo-500);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--gris-400); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
}
.campo input:disabled, .campo select:disabled { background: var(--gris-100); color: var(--gris-400); cursor: not-allowed; }

/* Validación visual nativa (HTML5 required/type=email/etc.) - no cambia
   ninguna regla de negocio, solo refleja lo que el propio navegador ya
   valida al intentar enviar el formulario. */
.campo input:invalid:not(:placeholder-shown):not(:focus),
.campo select:invalid:not(:focus),
.campo input.campo-con-error,
.campo select.campo-con-error,
.campo textarea.campo-con-error {
  border-color: var(--rojo-500);
}
.campo input:invalid:not(:placeholder-shown):not(:focus):hover { border-color: var(--rojo-500); }
.campo-mensaje-error {
  font-size: 0.76rem;
  color: var(--rojo-500);
  margin-top: 5px;
  font-weight: 500;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radio-sm);
  border: none;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--transicion), filter var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

.boton-primario { background: var(--azul-500); color: white; box-shadow: var(--sombra-sm); }
.boton-primario:hover { background: var(--azul-600); }
.boton-dorado { background: var(--dorado); color: white; box-shadow: var(--sombra-sm); }
.boton-dorado:hover { background: #1E4650; }
.boton-fantasma { background: var(--superficie); color: var(--gris-700); border: 1px solid var(--gris-300); }
.boton-fantasma:hover { background: var(--gris-100); border-color: var(--gris-400); color: var(--gris-900); }
.boton-secundario { background: var(--gris-100); color: var(--gris-800); }
.boton-secundario:hover { background: var(--gris-200); }
.boton-exito { background: var(--verde-500); color: white; box-shadow: var(--sombra-sm); }
.boton-exito:hover { background: #157D50; }
.boton-advertencia { background: var(--amarillo-500); color: white; box-shadow: var(--sombra-sm); }
.boton-advertencia:hover { background: #95610A; }
.boton-peligro { background: var(--rojo-500); color: white; }
.boton-peligro:hover { background: #B7301F; }
.boton-icono {
  background: transparent;
  color: var(--gris-600);
  padding: 7px;
  border-radius: var(--radio-sm);
  width: 32px;
  height: 32px;
}
.boton-icono svg { width: 16px; height: 16px; }
.boton-icono:hover { background: var(--gris-100); color: var(--gris-900); }

.mensaje-error {
  background: var(--rojo-bg);
  color: var(--rojo-500);
  padding: 10px 14px;
  border-radius: var(--radio-sm);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 18px;
  border: 1px solid rgba(214, 64, 47, 0.18);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mensaje-error::before {
  content: "!";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rojo-500);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- App principal ---------- */

.oculto { display: none !important; }

.app-shell { display: flex; height: 100vh; overflow: hidden; }

.barra-lateral {
  width: 232px;
  min-width: 232px;
  height: 100vh;
  background: var(--gris-900);
  color: white;
  padding: 20px 14px 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.barra-lateral.colapsado,
html[data-sidebar-colapsado="1"] .barra-lateral {
  width: 68px;
  min-width: 68px;
  padding-left: 10px;
  padding-right: 10px;
}

.btn-colapsar-sidebar svg { width: 14px; height: 14px; transition: transform 200ms; }

#logo-sidebar-cont { text-align: center; }
.logo-sidebar { max-width: 100%; max-height: 44px; margin-bottom: 10px; border-radius: var(--radio-sm); }
.barra-lateral.colapsado #logo-sidebar-cont { display: none; }

.barra-lateral .marca-app {
  font-family: var(--fuente-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  padding: 6px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.barra-lateral .marca-app-icono { flex-shrink: 0; width: 24px; height: auto; filter: brightness(0) invert(1); }
.marca-app-textos { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; white-space: nowrap; }
.marca-app-subtitulo { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.03em; color: var(--gris-400); text-transform: uppercase; }
.barra-lateral.colapsado .marca-app-textos { display: none; }

.barra-lateral .rol-usuario {
  font-size: 0.7rem;
  color: var(--gris-400);
  margin-bottom: 16px;
  padding: 10px 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.barra-lateral.colapsado .rol-usuario { text-align: center; padding: 10px 0 0; }

.nav-scroll {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.nav-scroll::-webkit-scrollbar { width: 5px; }
.nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.nav-scroll::-webkit-scrollbar-track { background: transparent; }

.nav-grupo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; min-width: 0; }
.nav-grupo:last-child { margin-bottom: 0; }
.nav-grupo-titulo {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gris-500);
  padding: 0 10px;
  margin-bottom: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-lateral.colapsado .nav-grupo-titulo { opacity: 0; height: 1px; margin: 4px 0; padding: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radio-sm);
  color: var(--gris-400);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.87rem;
  position: relative;
  min-width: 0;
  transition: background 200ms, color 200ms, padding-left 200ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item .nav-icono { flex-shrink: 0; display: flex; opacity: 0.8; transition: opacity 200ms; }
.nav-item .nav-icono svg { width: 17px; height: 17px; }
.nav-item:hover { background: rgba(255,255,255,0.07); color: white; padding-left: 14px; }
.nav-item:hover .nav-icono { opacity: 1; }
.nav-item.activo {
  background: rgba(255,255,255,0.09);
  color: white;
  font-weight: 600;
}
.nav-item.activo .nav-icono { opacity: 1; color: var(--dorado-claro); }
.nav-item.activo::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--dorado-claro);
  border-radius: 0 3px 3px 0;
}

.barra-lateral.colapsado .nav-item { justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; }
.barra-lateral.colapsado .nav-item:hover { padding-left: 0; }
.barra-lateral.colapsado .nav-item.activo::before { left: -10px; }
.barra-lateral.colapsado [data-tooltip]:hover::after {
  left: calc(100% + 10px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.barra-lateral-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.barra-lateral-pie-tema { color: var(--gris-400); flex-shrink: 0; }
.barra-lateral-pie-tema:hover { background: rgba(255,255,255,0.08); color: white; }

.barra-lateral-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  transition: background 200ms;
}
.barra-lateral-usuario:hover { background: rgba(255,255,255,0.08); }
.barra-lateral-usuario .barra-superior-usuario-nombre { color: white; }
.barra-lateral-usuario .barra-superior-usuario-rol { color: var(--gris-400); }
.barra-lateral-usuario .barra-superior-usuario-datos { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.barra-lateral.colapsado .barra-lateral-pie { flex-direction: column; gap: 10px; }
.barra-lateral.colapsado .barra-lateral-usuario { justify-content: center; padding: 5px; }
.barra-lateral.colapsado .barra-lateral-usuario .barra-superior-usuario-datos { display: none; }

.panel-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 56px;
  flex-shrink: 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.barra-superior-izq {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.barra-superior-app {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gris-800);
  white-space: nowrap;
}

.barra-superior-separador { color: var(--gris-300); }

.barra-superior-buscador {
  position: relative;
  flex: 1;
  max-width: 380px;
  margin: 0 20px;
  display: flex;
  align-items: center;
}
.barra-superior-buscador svg {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--gris-400);
  pointer-events: none;
}
.barra-superior-buscador input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--gris-300);
  border-radius: 999px;
  background: var(--pergamino);
  color: var(--tinta);
  font-size: 0.83rem;
  transition: border-color var(--transicion), background var(--transicion);
}
.barra-superior-buscador input:focus {
  outline: none;
  border-color: var(--azul-500);
  background: var(--superficie);
}
#buscador-global-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  max-height: 400px;
  overflow-y: auto;
  z-index: 60;
  padding: 6px;
}
.buscador-global-cargando { padding: 14px; font-size: 0.83rem; color: var(--texto-tenue); text-align: center; }
.buscador-global-grupo { margin-bottom: 6px; }
.buscador-global-grupo-titulo {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris-500);
  padding: 6px 8px 2px;
}
.buscador-global-item {
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--gris-800);
  border-radius: var(--radio-sm);
  cursor: pointer;
}
.buscador-global-item:hover { background: var(--azul-50); color: var(--azul-700); }

.barra-superior-iglesia {
  font-size: 0.85rem;
  color: var(--texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-superior-der { display: flex; align-items: center; gap: 6px; }
.barra-superior-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transicion);
}
.barra-superior-usuario:hover { background: var(--gris-100); }
.barra-superior-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--azul-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.barra-superior-usuario-datos { display: flex; flex-direction: column; line-height: 1.25; }
.barra-superior-usuario-nombre { font-size: 0.8rem; font-weight: 600; color: var(--gris-800); }
.barra-superior-usuario-rol { font-size: 0.68rem; color: var(--texto-tenue); text-transform: capitalize; }

.contenido {
  flex: 1;
  padding: 30px 40px;
  max-width: 1200px;
  overflow-y: auto;
  animation: aparecer var(--transicion-lenta);
}
.vista-entrando { animation: entrarVista 200ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes entrarVista {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.encabezado-vista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  flex-wrap: wrap;
  gap: 12px;
}
.encabezado-vista h2 { font-size: 1.5rem; color: var(--negro); font-weight: 800; }
.encabezado-vista p { color: var(--texto-tenue); font-size: 0.88rem; margin-top: 3px; }
.acciones-encabezado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.barra-herramientas {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.barra-herramientas input, .barra-herramientas select {
  padding: 8px 12px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.barra-herramientas input:focus, .barra-herramientas select:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
}

/* ---------- Tablas ---------- */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--superficie);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--linea);
}
th {
  text-align: left;
  background: var(--pergamino-oscuro);
  padding: 13px 18px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris-600);
  font-weight: 700;
  border-bottom: 1px solid var(--linea);
}
th:first-child { border-top-left-radius: var(--radio-lg); }
th:last-child { border-top-right-radius: var(--radio-lg); }
td {
  padding: 14px 18px;
  border-top: 1px solid var(--linea);
  font-size: 0.87rem;
  color: var(--tinta);
  vertical-align: middle;
}
tbody tr:first-child td { border-top: none; }
tbody tr { transition: background var(--transicion); }
tr:hover td { background: var(--superficie-hover); }
table.zebra tbody tr:nth-child(even) td { background: var(--pergamino); }
table.zebra tbody tr:nth-child(even):hover td { background: var(--superficie-hover); }

.tabla-scroll-fijo { max-height: 560px; overflow-y: auto; border-radius: var(--radio-lg); }
.tabla-scroll-fijo table { border-radius: 0; }
.tabla-scroll-fijo th { position: sticky; top: 0; z-index: 1; }

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.etiqueta-estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.estado-activo { background: var(--verde-bg); color: var(--verde-500); }
.estado-visitante { background: var(--amarillo-bg); color: var(--amarillo-500); }
.estado-inactivo { background: var(--gris-100); color: var(--gris-500); }
.estado-de_baja { background: var(--gris-100); color: var(--gris-500); }
.estado-finalizado { background: var(--gris-100); color: var(--gris-500); }
.estado-cancelado { background: var(--rojo-bg); color: var(--rojo-500); }

.acciones-fila { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acciones-fila button {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--gris-600);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radio-sm);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.acciones-fila button:hover {
  background: var(--azul-50);
  color: var(--azul-700);
  border-color: var(--azul-100);
}

/* ---------- Modal ---------- */

.fondo-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 25, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300; /* CRÍTICO: antes era 50, quedaba por debajo de la barra de
                   pestañas (240), el fondo del panel "Más" (250) y el panel
                   mismo (260) - en el teléfono la navegación tapaba/interceptaba
                   toques sobre el modal, impidiendo cerrarlo con normalidad. */
  animation: aparecerFondo var(--transicion);
}
@keyframes aparecerFondo { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  background: var(--superficie);
  border-radius: var(--radio-lg);
  padding: 26px 28px;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--sombra-lg);
  animation: entrarModal var(--transicion-lenta);
}
/* Botón X universal (Fase de corrección crítica de cierre de modales):
   se inyecta por JS en todos los modales de la app, en desktop y en
   teléfono por igual - siempre visible, no depende de hacer scroll hasta
   el botón Cancelar del final del formulario. */
.btn-cerrar-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  border: none;
  border-radius: 50%;
  color: var(--gris-700);
  cursor: pointer;
  z-index: 6;
  flex-shrink: 0;
}
.btn-cerrar-modal-x:hover { background: var(--gris-200); color: var(--gris-900); }
.btn-cerrar-modal-x svg { width: 16px; height: 16px; }
@keyframes entrarModal {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h3 { color: var(--negro); margin-bottom: 20px; font-size: 1.2rem; }
.modal-ancho { max-width: 820px; }
.fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acciones-modal {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

/* ---------- Primer Contacto: selector de cantidad de fichas ---------- */
.fila-opciones-cantidad-ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.opcion-cantidad-ficha {
  flex-direction: column;
  gap: 2px;
  padding: 10px;
}
.opcion-cantidad-ficha span { font-size: 0.72rem; color: var(--texto-tenue); font-weight: 400; }
.opcion-cantidad-ficha.activo {
  border-color: var(--dorado);
  background: rgba(43, 90, 102, 0.08);
  color: var(--dorado);
}
.opcion-cantidad-ficha.activo span { color: var(--dorado); opacity: 0.75; }

.lista-asistencia {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--linea);
  overflow: hidden;
}
.fila-asistencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--linea);
  transition: background var(--transicion);
}
.fila-asistencia:hover { background: var(--superficie-hover); }
.fila-asistencia:first-child { border-top: none; }
.fila-asistencia .nombre-persona { font-weight: 500; }
.interruptor-presente {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--negro);
}
.interruptor-presente input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--azul-500); }

.barra-guardar-asistencia {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--pergamino-oscuro);
  border-top: 1px solid var(--linea);
}
.contador-presentes { font-size: 0.85rem; color: var(--negro); font-weight: 600; }

/* ---------- Tarjetas / Dashboard ---------- */

.tarjetas-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.tarjeta-resumen {
  background: var(--superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--linea);
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  transition: transform var(--transicion-lenta), box-shadow var(--transicion-lenta), border-color var(--transicion);
}
.tarjeta-resumen:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
  border-color: var(--gris-300);
}

.tarjeta-resumen .etiqueta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  margin-bottom: 8px;
  font-weight: 700;
}
.tarjeta-resumen .monto {
  font-family: var(--fuente-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--negro);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Insignia de ícono por variante - puramente decorativa (CSS), no toca la
   generación de tarjetas en app.js: alcanza para dar identidad visual
   consistente a las ~25 tarjetas del Dashboard sin repetir esa edición
   tarjeta por tarjeta. */
.tarjeta-resumen::after {
  content: "";
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: var(--gris-100);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3C/svg%3E");
}
.tarjeta-resumen.ingreso::after {
  background-color: var(--verde-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231B9C63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15V5M5.5 9.5 10 5l4.5 4.5'/%3E%3C/svg%3E");
}
.tarjeta-resumen.egreso::after {
  background-color: var(--rojo-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23D6402F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5v10M5.5 10.5 10 15l4.5-4.5'/%3E%3C/svg%3E");
}
.tarjeta-resumen.balance::after {
  background-color: var(--azul-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231F4D3D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M10 6.8v6.4M12.2 8.5c-.3-.8-1-1.2-2-1.2-1.1 0-2 .6-2 1.5 0 2 4.2.9 4.2 2.9 0 .9-.9 1.5-2 1.5-1 0-1.7-.4-2-1.2'/%3E%3C/svg%3E");
}

.kpi-toggle-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--gris-100);
  color: var(--gris-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transicion), background var(--transicion), color var(--transicion);
}
.kpi-toggle-btn svg { width: 13px; height: 13px; }
.tarjeta-resumen:hover .kpi-toggle-btn { opacity: 1; }
.kpi-toggle-btn:hover { background: var(--rojo-bg); color: var(--rojo-500); }
.tarjeta-resumen.kpi-oculto { display: none; }
.tarjeta-resumen.tarjeta-clickeable { cursor: pointer; }
.tarjeta-resumen.tarjeta-clickeable:hover { border-color: var(--azul-500); }

.dashboard-saludo {
  background: linear-gradient(135deg, var(--azul-50), var(--superficie));
  border: 1px solid var(--azul-100);
  border-radius: var(--radio-lg);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.dashboard-saludo h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--negro);
  margin-bottom: 4px;
}
.dashboard-saludo p {
  font-size: 0.88rem;
  color: var(--gris-600);
  margin: 0;
}

.dashboard-acciones-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.dashboard-acciones-rapidas .boton { font-size: 0.82rem; padding: 8px 14px; }
.accion-rapida-icono { display: none; } /* en desktop el botón se ve igual que siempre, solo texto */

.dashboard-checklist {
  list-style: none;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dashboard-checklist li {
  font-size: 0.88rem;
  color: var(--gris-700);
}

.centro-accion-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.centro-accion-grid .tarjeta-atencion:last-child { grid-column: 1 / -1; }
.centro-accion-grid .ancha-panel { grid-column: 1 / -1; }

.panel-ejecutivo-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.panel-ejecutivo-resumen .tarjeta-resumen { padding: 14px 16px; }
.flecha-variacion { font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.flecha-variacion.flecha-up { color: var(--verde-500); }
.flecha-variacion.flecha-down { color: var(--rojo-500); }
.flecha-variacion.flecha-igual { color: var(--gris-400); }

.lista-proximos-30 { max-height: 280px; overflow-y: auto; }

.grid-tendencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.mini-tendencia-titulo { font-size: 0.74rem; color: var(--texto-tenue); margin-bottom: 8px; font-weight: 600; }
.mini-tendencia-barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 2px;
}
.mini-tendencia-barra {
  flex: 1;
  min-height: 2px;
  background: var(--azul-500);
  border-radius: 2px 2px 0 0;
  opacity: 0.75;
  transition: opacity var(--transicion);
}
.mini-tendencia-barra:hover { opacity: 1; }

.modal-ancho-medio { max-width: 640px; }

.grid-tarjetas-incorporacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.tarjeta-incorporacion {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
  background: var(--superficie);
}
.tarjeta-incorporacion:hover { border-color: var(--azul-500); box-shadow: var(--sombra-md); transform: translateY(-2px); }
.tarjeta-incorporacion-icono { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.tarjeta-incorporacion-titulo { font-weight: 700; font-size: 0.9rem; color: var(--gris-900); margin-bottom: 4px; }
.tarjeta-incorporacion p { font-size: 0.78rem; color: var(--texto-tenue); line-height: 1.4; }
.tarjeta-incorporacion-proximamente { cursor: default; opacity: 0.55; }
.tarjeta-incorporacion-proximamente:hover { border-color: var(--linea); box-shadow: none; transform: none; }

.lista-acciones-siguientes { display: flex; flex-direction: column; gap: 8px; }

.tarjeta-atencion {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  padding: 22px 24px;
}
.tarjeta-atencion h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-600);
  margin-bottom: 14px;
}

.lista-atencion { display: flex; flex-direction: column; gap: 8px; }
.item-atencion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radio);
  border-left: 3px solid var(--gris-300);
  background: var(--pergamino);
}
.item-atencion.prioridad-alta { border-left-color: var(--rojo-500); }
.item-atencion.prioridad-media { border-left-color: var(--amarillo-500); }
.item-atencion.prioridad-baja { border-left-color: var(--gris-400); }
.item-atencion-icono { font-size: 1.05rem; flex-shrink: 0; }
.item-atencion-texto {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--gris-800);
}
.badge-prioridad {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.badge-prioridad-alta { background: var(--rojo-bg); color: var(--rojo-500); }
.badge-prioridad-media { background: var(--amarillo-bg); color: var(--amarillo-500); }
.badge-prioridad-baja { background: var(--gris-100); color: var(--gris-600); }
.item-atencion .boton { flex-shrink: 0; font-size: 0.78rem; padding: 5px 12px; }

.grid-proximos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.grid-proximos-titulo {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-500);
  margin-bottom: 6px;
}
.fila-proximo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--gris-800);
  padding: 5px 0;
  border-top: 1px solid var(--linea);
}
.fila-proximo:first-of-type { border-top: none; }
.fila-proximo span { color: var(--texto-tenue); flex-shrink: 0; font-size: 0.76rem; }

.barras-vinculacion { display: flex; flex-direction: column; gap: 10px; }
.fila-barra-vinculacion { display: flex; align-items: center; gap: 10px; }
.fila-barra-etiqueta { font-size: 0.8rem; color: var(--gris-700); width: 150px; flex-shrink: 0; }
.fila-barra-fondo { flex: 1; height: 10px; border-radius: 999px; background: var(--gris-100); overflow: hidden; }
.fila-barra-relleno { height: 100%; border-radius: 999px; transition: width var(--transicion-lenta); }
.fila-barra-cantidad { font-size: 0.8rem; font-weight: 700; color: var(--gris-800); width: 24px; text-align: right; flex-shrink: 0; }

.tarjetas-ministerio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.tarjeta-ministerio {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--linea);
  padding: 18px 20px;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-ministerio:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.tarjeta-ministerio h3 { font-size: 1.02rem; color: var(--negro); margin-bottom: 4px; font-weight: 700; }
.tarjeta-ministerio p { font-size: 0.85rem; color: var(--texto-tenue); margin: 0 0 12px; }
.tarjeta-ministerio .acciones-fila { justify-content: flex-start; }

.fila-miembro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--linea);
}
.fila-miembro:first-child { border-top: none; }
.etiqueta-lider {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--dorado);
  text-transform: uppercase;
  margin-left: 6px;
  letter-spacing: 0.03em;
}

.etiqueta-confirmado { color: var(--verde-500); font-weight: 600; }
.etiqueta-pendiente { color: var(--texto-tenue); font-weight: 600; }

.seccion-dashboard { margin-bottom: 30px; }
.seccion-dashboard h3 {
  font-size: 0.95rem;
  color: var(--gris-600);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.tabs-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 24px;
}
.tab-dashboard-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}
.tab-dashboard-btn:hover { color: var(--texto); }
.tab-dashboard-btn.activo {
  color: var(--dorado);
  border-bottom-color: var(--dorado);
}

.logo-sidebar { max-width: 100%; max-height: 56px; display: block; margin-bottom: 10px; }
.logo-preview { max-width: 200px; max-height: 120px; border-radius: var(--radio); border: 1px solid var(--linea); display: block; background: var(--superficie); padding: 8px; }

.vacio {
  text-align: center;
  padding: 40px 20px 36px;
  color: var(--texto-tenue);
  background: var(--superficie);
  border-radius: var(--radio);
  border: 1px dashed var(--gris-300);
  font-size: 0.9rem;
  line-height: 1.5;
}
.vacio::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  background-color: var(--gris-100);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239AA1AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='11' rx='1.5'/%3E%3Cpath d='M3 8.5h14M7 3v3'/%3E%3C/svg%3E");
}

.oculto-visualmente {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.modal-perfil360-ancho { max-width: 1240px; width: 96vw; max-height: 94vh; }

.perfil360-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.perfil360-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: var(--sombra-sm);
}
.perfil360-header-datos { flex: 1; min-width: 220px; }
.perfil360-header-datos h2 { font-size: 1.25rem; color: var(--negro); font-weight: 800; }
.perfil360-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 0.83rem;
  color: var(--texto-tenue);
}
.perfil360-acciones-rapidas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 420px;
}
.perfil360-acciones-rapidas .boton { padding: 6px 11px; font-size: 0.78rem; }

/* ==========================================================
   Camino de Integración — Journey Timeline (Perfil 360°)
   Filosofía: esto acompaña un recorrido, no administra un
   checklist. Verde = alcanzado, Azul = próximo paso sugerido,
   Gris = pendiente. Nada de tabla ni de lista plana.
   ========================================================== */
.camino-integracion {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  padding: 20px 22px;
  margin: 18px 0;
}
.camino-integracion-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-600);
  margin-bottom: 14px;
}

/* Bloque "Próximo paso sugerido" - visible pero no invasivo */
.camino-proximo-paso {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(31, 77, 61, 0.08);
  border: 1px solid rgba(31, 77, 61, 0.18);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.camino-proximo-icono { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.camino-proximo-etiqueta { font-size: 0.72rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.camino-proximo-nombre { font-size: 0.95rem; font-weight: 700; color: var(--negro); }
.camino-proximo-completo { color: var(--verde-500); font-weight: 700; }

/* La línea del recorrido: cada hito es una fila con un nodo circular
   conectado al siguiente por una línea vertical continua. */
.camino-timeline { display: flex; flex-direction: column; }
.camino-hito { display: flex; gap: 14px; position: relative; cursor: pointer; }
.camino-hito-columna { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.camino-hito-nodo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  border: 2px solid var(--gris-300);
  background: var(--superficie);
  color: var(--gris-400);
  transition: transform var(--transicion);
}
.camino-hito-linea { width: 2px; flex: 1; min-height: 22px; background: var(--gris-300); }
.camino-hito:last-child .camino-hito-linea { display: none; }
.camino-hito-info { padding: 4px 0 20px; flex: 1; min-width: 0; }
.camino-hito:last-child .camino-hito-info { padding-bottom: 4px; }
.camino-hito-etiqueta { font-size: 0.92rem; font-weight: 700; color: var(--negro); }
.camino-hito-meta { font-size: 0.76rem; color: var(--texto-tenue); margin-top: 2px; }
.camino-hito:hover .camino-hito-nodo { transform: scale(1.08); }

/* Estado: completado (verde) */
.camino-hito.estado-completado .camino-hito-nodo { border-color: var(--verde-500); background: var(--verde-500); color: white; }
.camino-hito.estado-completado .camino-hito-linea { background: var(--verde-500); }

/* Estado: próximo paso / actual (azul) */
.camino-hito.estado-actual .camino-hito-nodo { border-color: var(--azul-500); color: var(--azul-500); box-shadow: 0 0 0 3px rgba(31, 77, 61, 0.14); }
.camino-hito.estado-actual .camino-hito-etiqueta { color: var(--azul-500); }

/* Panel de edición inline de cada hito (fecha, observaciones, estado) */
.camino-hito-editor {
  margin-top: 10px;
  padding: 12px;
  background: var(--pergamino);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  display: none;
}
.camino-hito.abierto .camino-hito-editor { display: block; }
.camino-hito-editor .campo { margin-bottom: 10px; }
.camino-hito-editor .campo:last-child { margin-bottom: 0; }
.camino-hito-editor label { font-size: 0.78rem; }
.camino-hito-editor-acciones { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }

.perfil360-resumen-auto {
  background: var(--pergamino);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--azul-500);
  border-radius: var(--radio);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.perfil360-resumen-auto p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gris-800);
}
.perfil360-acciones-sugeridas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chip-sugerencia {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--azul-700);
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-radius: 999px;
  padding: 4px 11px;
}

.perfil360-indicadores-cualitativos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.indicador-cualitativo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radio-sm);
  border-left: 3px solid var(--gris-300);
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.indicador-cualitativo-etiqueta { font-size: 0.74rem; color: var(--texto-tenue); }
.indicador-cualitativo-valor { font-size: 0.74rem; font-weight: 700; }
.indicador-cualitativo.indicador-excelente { border-left-color: var(--verde-500); }
.indicador-cualitativo.indicador-excelente .indicador-cualitativo-valor { color: var(--verde-500); }
.indicador-cualitativo.indicador-bueno { border-left-color: var(--azul-500); }
.indicador-cualitativo.indicador-bueno .indicador-cualitativo-valor { color: var(--azul-500); }
.indicador-cualitativo.indicador-atención { border-left-color: var(--amarillo-500); }
.indicador-cualitativo.indicador-atención .indicador-cualitativo-valor { color: var(--amarillo-500); }
.indicador-cualitativo.indicador-pendiente { border-left-color: var(--gris-400); }
.indicador-cualitativo.indicador-pendiente .indicador-cualitativo-valor { color: var(--gris-500); }

.perfil360-tarjeta-destacada { border-top: 2px solid var(--azul-500); }

.tarjeta-vinculacion { border-top: 3px solid var(--gris-300); }
.tarjeta-vinculacion.color-verde { border-top-color: var(--verde-500); }
.tarjeta-vinculacion.color-azul { border-top-color: var(--azul-500); }
.tarjeta-vinculacion.color-ambar { border-top-color: var(--amarillo-500); }
.tarjeta-vinculacion.color-rojo { border-top-color: var(--rojo-500); }

.vinculacion-resumen { display: flex; align-items: center; gap: 18px; }
.vinculacion-puntaje {
  font-family: var(--fuente-display);
  font-size: 2.4rem;
  font-weight: 800;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  color: var(--gris-700);
}
.color-verde .vinculacion-puntaje { background: var(--verde-bg); color: var(--verde-500); }
.color-azul .vinculacion-puntaje { background: var(--azul-50); color: var(--azul-500); }
.color-ambar .vinculacion-puntaje { background: var(--amarillo-bg); color: var(--amarillo-500); }
.color-rojo .vinculacion-puntaje { background: var(--rojo-bg); color: var(--rojo-500); }

.vinculacion-nivel { font-size: 1rem; font-weight: 700; color: var(--gris-900); margin-bottom: 4px; }
.vinculacion-texto p { font-size: 0.85rem; color: var(--texto-tenue); line-height: 1.5; }

.lista-desglose-vinculacion { display: flex; flex-direction: column; gap: 6px; }
.item-desglose { font-size: 0.83rem; padding: 4px 0; }
.item-desglose-ok { color: var(--gris-800); }
.item-desglose-ok span { color: var(--verde-500); font-weight: 700; }
.item-desglose-pendiente { color: var(--texto-tenue); }
.item-desglose-pendiente span { color: var(--gris-400); }

.vinculacion-nota {
  font-size: 0.72rem;
  color: var(--texto-tenue);
  font-style: italic;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}

.badge-tipo-sugerencia {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.badge-tipo-accion_recomendada { background: var(--azul-50); color: var(--azul-500); }
.badge-tipo-oportunidad { background: var(--verde-bg); color: var(--verde-500); }
.badge-tipo-recordatorio { background: var(--amarillo-bg); color: var(--amarillo-500); }

.acciones-tarea-automatizacion { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

.tablero-reglas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.tarjeta-regla-automatizacion {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 14px 16px;
  box-shadow: var(--sombra-sm);
}
.tarjeta-regla-automatizacion.estado-regla-activo { border-left-color: var(--verde-500); }
.tarjeta-regla-automatizacion.estado-regla-pausado { border-left-color: var(--amarillo-500); }
.tarjeta-regla-automatizacion.estado-regla-deshabilitado { border-left-color: var(--gris-400); opacity: 0.7; }
.tarjeta-regla-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.etiqueta-estado-regla {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gris-100);
  color: var(--gris-600);
}
.etiqueta-regla-activo { background: var(--verde-bg); color: var(--verde-500); }
.etiqueta-regla-pausado { background: var(--amarillo-bg); color: var(--amarillo-500); }
.selector-estado-regla {
  font-size: 0.72rem;
  padding: 3px 6px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--gris-700);
}
.tarjeta-regla-titulo { font-size: 0.87rem; font-weight: 600; color: var(--gris-900); margin-bottom: 8px; }
.tarjeta-regla-metrica {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--texto-tenue);
  margin-bottom: 6px;
}
.tarjeta-regla-fecha { font-size: 0.72rem; color: var(--texto-tenue); border-top: 1px solid var(--linea); padding-top: 6px; }

.grid-estado-general {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
}
.grid-estado-general .fila-proximo:nth-child(2n+1) { border-top: 1px solid var(--linea); }

.perfil360-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.perfil360-indicador {
  background: var(--pergamino);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 10px 8px;
  text-align: center;
}
.perfil360-indicador-valor {
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--azul-600);
}
.perfil360-indicador-etiqueta {
  font-size: 0.68rem;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.perfil360-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.perfil360-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: 20px 22px;
  box-shadow: var(--sombra-sm);
}
.perfil360-tarjeta h4 {
  color: var(--azul-600);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  font-weight: 700;
  overflow: hidden;
}
.perfil360-tarjeta.ancha { grid-column: 1 / -1; }
.perfil360-barra-progreso {
  height: 6px;
  border-radius: 999px;
  background: var(--gris-100);
  overflow: hidden;
  margin-bottom: 8px;
}
.perfil360-barra-progreso-relleno {
  height: 100%;
  background: var(--azul-500);
  border-radius: 999px;
  transition: width var(--transicion-lenta);
}
.timeline-compacta { max-height: 260px; overflow-y: auto; padding-right: 4px; }

.modal-persona-seccion-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris-500);
  margin: 22px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linea);
}
.modal-persona-seccion-titulo:first-child { margin-top: 0; }

.modal-persona-acordeon {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 8px;
  background: var(--pergamino);
  overflow: hidden;
}
.modal-persona-acordeon summary {
  padding: 11px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-800);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  transition: background var(--transicion);
}
.modal-persona-acordeon summary::-webkit-details-marker { display: none; }
.modal-persona-acordeon summary::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-right: 1.6px solid var(--gris-400);
  border-bottom: 1.6px solid var(--gris-400);
  transform: rotate(-45deg);
  transition: transform var(--transicion);
  flex-shrink: 0;
}
.modal-persona-acordeon[open] summary::before { transform: rotate(45deg); }
.modal-persona-acordeon summary:hover { background: var(--gris-100); }
.modal-persona-acordeon > div, .modal-persona-acordeon > *:not(summary) {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--linea);
}

.perfil360-btn-editar {
  float: right;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--azul-600);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0;
}
.perfil360-btn-editar:hover { text-decoration: underline; }

.perfil360-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.perfil360-seccion {
  background: var(--pergamino);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 15px 17px;
}
.perfil360-seccion h4 {
  color: var(--azul-600);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  font-weight: 700;
  overflow: hidden;
}
.perfil360-seccion.ancho { grid-column: 1 / -1; }
.perfil360-item {
  padding: 7px 0;
  border-top: 1px solid var(--linea);
  font-size: 0.87rem;
}
.perfil360-item:first-child { border-top: none; }
.perfil360-vacio { color: var(--texto-tenue); font-size: 0.85rem; }
.etiqueta-destacado { color: var(--dorado); font-weight: 700; }

/* ---------- Línea de Tiempo (Perfil 360°) ---------- */

.timeline-barra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.timeline-barra input {
  padding: 9px 12px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 0.85rem;
}
.timeline-barra input:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
}
.timeline-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.timeline-chip {
  --color-chip: var(--gris-500);
  background: var(--superficie);
  border: 1px solid var(--linea);
  color: var(--gris-600);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.timeline-chip:hover { border-color: var(--color-chip); color: var(--color-chip); }
.timeline-chip.activo { background: var(--color-chip); border-color: var(--color-chip); color: white; }

.timeline-lista { display: flex; flex-direction: column; }
.timeline-item {
  display: flex;
  gap: 14px;
  position: relative;
}
.timeline-item.oculto { display: none; }
.timeline-icono {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.timeline-icono svg { width: 16px; height: 16px; }
.timeline-linea {
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: -6px;
  width: 2px;
  background: var(--linea);
}
.timeline-item:last-child .timeline-linea { display: none; }
.timeline-contenido { padding-bottom: 20px; padding-top: 4px; flex: 1; min-width: 0; }
.timeline-fecha { font-size: 0.72rem; color: var(--texto-tenue); font-weight: 600; margin-bottom: 2px; }
.timeline-titulo { font-size: 0.9rem; color: var(--negro); font-weight: 600; }
.timeline-descripcion { font-size: 0.82rem; color: var(--texto-tenue); margin-top: 2px; }

/* El botón de cerrar el panel mobile, el fondo oscuro y la barra de
   pestañas de abajo no existen visualmente en desktop - solo se activan
   dentro del @media de más abajo. Esta regla va ANTES del media query a
   propósito: en CSS, con la misma especificidad, gana la regla que está
   más abajo en el archivo sin importar si está dentro de un @media o no -
   por eso esto tiene que quedar antes, para que la regla mobile (que viene
   después) sea la que gane en pantallas chicas. */
.btn-cerrar-menu-movil { display: none; }
.tabs-mobile-inferior { display: none; }
.fondo-menu-movil { display: none; }
.btn-hamburguesa-movil { display: none; }

@media (max-width: 720px) {
  .centro-accion-grid { grid-template-columns: 1fr; }
  .grid-proximos { grid-template-columns: 1fr; }
  .perfil360-tarjetas { grid-template-columns: 1fr; }
  .modal-perfil360-ancho { width: 100vw; max-height: 100vh; max-height: 100dvh; border-radius: 0; }

  /* Modales a pantalla completa en teléfono (Sprint UX Mobile): un formulario
     largo (Persona, Evento, Movimiento, etc.) se aprovecha mucho mejor sin el
     margen ni el recorte de una tarjeta chica centrada. */
  .fondo-modal { padding: 0; align-items: flex-end; }
  .modal, .modal-ancho {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh; /* dvh es más confiable que vh en Safari/Chrome mobile,
      donde la barra de direcciones aparece y desaparece y "vh" no se ajusta
      siempre a tiempo - dvh sí. Se declara después como mejora progresiva:
      si el navegador no lo entiende, se queda con el valor en vh de arriba. */
    border-radius: 20px 20px 0 0;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
  }

  /* Corrección crítica de cierre de modal en teléfono: encabezado (h3)
     sticky, siempre visible arriba mientras se scrollea el formulario -
     así el título (y el botón X, que queda anclado sobre él) nunca
     desaparecen, sin importar cuán largo sea el formulario ni cuánto
     se haya scrolleado. */
  .modal h3 {
    position: sticky;
    top: 0;
    margin: -22px -18px 14px;
    padding: 16px 46px 14px 18px;
    background: var(--superficie);
    z-index: 4;
    border-bottom: 1px solid var(--linea);
  }
  .btn-cerrar-modal-x { top: 12px; right: 12px; }
  /* Tablas -> tarjetas por fila (Sprint UX Mobile): en vez de forzar scroll
     horizontal, cada <tr> se convierte en una tarjeta propia y cada <td> pasa
     a ocupar su propia línea dentro de ella. No se toca el HTML/JS que arma
     las tablas (los datos son los mismos), es puramente CSS. El encabezado
     de columnas (<thead>) se oculta porque deja de ser necesario: cada dato
     ya se reconoce por su formato (teléfono, fecha, insignia de estado). */
  table { display: block; background: none; box-shadow: none; border: none; border-radius: 0; }
  thead { display: none; }
  tbody { display: block; }
  tbody tr {
    display: block;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  tbody tr:last-child { margin-bottom: 0; }
  tbody td {
    display: block;
    padding: 5px 0;
    border-top: none;
    white-space: normal;
    font-size: 0.86rem;
  }
  tbody td:empty { display: none; }
  tbody td:first-child { font-weight: 700; font-size: 0.95rem; color: var(--negro); }
  tbody td:has(.boton) { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--linea); }
  .perfil360-indicadores { grid-template-columns: repeat(2, 1fr); }
  .perfil360-header { flex-wrap: wrap; }
  .perfil360-grid { grid-template-columns: 1fr; }
  .app-shell { flex-direction: column; height: auto; overflow: visible; }

  /* La barra lateral pasa a ser el panel "Más": oculta por completo hasta
     que se abre desde la pestaña inferior, y entra deslizando desde abajo
     en vez de vivir siempre arriba de la pantalla (Sprint de navegación
     mobile - reemplaza la barra horizontal que había antes). */
  .barra-lateral {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%; min-width: 0;
    max-height: 78vh;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 44px 16px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: visible;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--sombra-lg);
    transform: translateY(115%);
    transition: transform var(--transicion-lenta);
    z-index: 260;
  }
  .barra-lateral.abierta-movil { transform: translateY(0); }
  .btn-cerrar-menu-movil {
    display: flex;
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    background: var(--gris-100);
    border: none;
    border-radius: 50%;
    color: var(--gris-700);
  }
  .btn-colapsar-sidebar { display: none; }
  .barra-lateral .marca-app, .barra-lateral .rol-usuario { margin-bottom: 10px; }
  .nav-scroll { flex-direction: column; overflow-y: visible; margin: 0; padding: 0; }
  .nav-grupo { flex-direction: column; gap: 2px; margin-bottom: 10px; align-items: stretch; }
  .nav-grupo-titulo { display: block; }
  .nav-item { padding: 12px 14px; min-height: 44px; align-items: center; }
  .nav-item:hover { padding-left: 14px; }
  .barra-lateral-pie { border-top: 1px solid var(--linea); padding-top: 14px; margin-top: 8px; flex-shrink: 0; }

  /* Fondo oscuro detrás del panel "Más" cuando está abierto */
  .fondo-menu-movil {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, 0.55);
    z-index: 250;
  }
  .fondo-menu-movil.abierto { display: block; }

  /* Barra de pestañas fija abajo - reemplaza a la barra lateral como
     navegación principal en teléfono. */
  .tabs-mobile-inferior {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--superficie);
    border-top: 1px solid var(--linea);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    z-index: 240;
    justify-content: space-around;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  }
  .tab-mobile {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    min-height: 48px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--texto-tenue);
    background: none;
    border: none;
    cursor: pointer;
  }
  .tab-mobile .nav-icono svg { width: 20px; height: 20px; }
  .tab-mobile.activo { color: var(--dorado); }
  .tab-mobile.activo::before { display: none; }

  .barra-superior { padding: 0 14px; height: 50px; }
  .btn-hamburguesa-movil {
    display: flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: none; border: none;
    color: var(--gris-700);
    flex-shrink: 0;
    margin-right: 4px;
  }
  .barra-superior-iglesia { display: none; }
  .barra-superior-buscador { max-width: 140px; margin: 0 8px; }
  .barra-superior-usuario-datos { display: none; }
  /* Deja lugar abajo para que la barra de pestañas fija no tape contenido */
  .contenido { padding: 18px 18px calc(18px + 60px + env(safe-area-inset-bottom)); }
  .fila-doble { grid-template-columns: 1fr; }

  /* Ajustes táctiles para teléfono (Sprint de optimización mobile) - todo
     queda contenido a este media query, el desktop no se toca en nada. */
  .campo input, .campo select, .campo textarea {
    font-size: 16px; /* evita el zoom automático de Safari/iOS al enfocar un campo */
    padding: 12px 14px;
  }
  .boton {
    padding: 12px 18px;
    font-size: 0.92rem;
    min-height: 44px; /* área táctil mínima recomendada (Apple/Google: ~44-48px) */
  }
  .boton-icono {
    width: 40px;
    height: 40px;
  }

  /* ============================================================
     Sprint de refinamiento UX Mobile — todo dentro de este mismo
     media query, el desktop no se toca en nada de lo que sigue.
     ============================================================ */

  /* ---- Header: más compacto, prioriza llegar al contenido ---- */
  .barra-superior { height: 46px; padding: 0 12px; gap: 6px; }
  .barra-superior-izq { gap: 4px; }
  .barra-superior-app { font-size: 0.88rem; }
  .barra-superior-separador { display: none; }
  .barra-superior-buscador { max-width: 120px; margin: 0 6px; padding: 6px 10px; }
  .barra-superior-buscador input { font-size: 0.82rem; }

  /* ---- Encabezado de cada pantalla: menos peso tipográfico y espacio ---- */
  .encabezado-vista { margin-bottom: 16px; }
  .encabezado-vista h2 { font-size: 1.2rem; }
  .encabezado-vista p { font-size: 0.82rem; margin-top: 1px; }

  /* ---- Acciones rápidas del Dashboard: grilla uniforme con ícono + texto ---- */
  .dashboard-acciones-rapidas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
  .dashboard-acciones-rapidas .boton.accion-rapida {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    min-height: 64px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: normal;
    text-align: center;
  }
  .accion-rapida-icono {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .accion-rapida-icono svg { width: 18px; height: 18px; }
  .accion-rapida-texto { line-height: 1.15; }

  /* ---- Saludo del Dashboard: más compacto ---- */
  .dashboard-saludo { padding: 14px 16px; margin-bottom: 14px; }
  .dashboard-saludo h3 { font-size: 1rem; }
  .dashboard-saludo p, .dashboard-checklist li { font-size: 0.82rem; }

  /* ---- Cards y tarjetas: menos altura, misma consistencia de radio/borde ---- */
  .tarjeta-resumen { padding: 14px 16px; }
  .tarjeta-resumen .monto { font-size: 1.3rem; }
  .tarjetas-resumen { gap: 10px; }
  .tarjeta-atencion { padding: 16px; }
  .tarjeta-atencion h3 { margin-bottom: 10px; }
  .item-atencion { padding: 9px 10px; }
  .centro-accion-grid { gap: 12px; }
  .seccion-dashboard { margin-bottom: 20px; }

  /* ---- Espaciado general más compacto en toda la app ---- */
  .contenido h2 { font-size: 1.2rem; }
  .modal h3 { font-size: 1.05rem; margin-bottom: 14px; }
  .campo { margin-bottom: 14px; }
}

@media (max-width: 1100px) {
  .contenido { padding: 24px; }
  .perfil360-tarjetas { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Toasts ---------- */

/* ---------- Bloqueo de pantalla por inactividad ---------- */

.pantalla-bloqueo {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 18, 25, 0.94);
  backdrop-filter: blur(18px);
  animation: aparecerFondo var(--transicion);
}
.tarjeta-bloqueo {
  background: var(--superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  padding: 32px 30px;
  width: 100%;
  max-width: 340px;
  border-top: 3px solid var(--dorado);
  animation: entrarModal var(--transicion-lenta);
}
.marca-logo-bloqueo {
  display: block;
  height: 32px;
  width: auto;
  margin: 0 auto 20px;
}
.bloqueo-pie { text-align: center; margin-top: 16px; }
.bloqueo-pie a {
  font-size: 0.8rem;
  color: var(--texto-tenue);
  cursor: pointer;
  text-decoration: none;
}
.bloqueo-pie a:hover { color: var(--rojo-500); text-decoration: underline; }

.toast-cont {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--gris-900);
  color: white;
  padding: 12px 16px;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-lg);
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  max-width: 360px;
  animation: entrarToast var(--transicion-lenta), salirToast var(--transicion-lenta) 2.6s forwards;
  border-left: 3px solid var(--azul-500);
}
.toast.exito { border-left-color: var(--verde-500); }
.toast.error { border-left-color: var(--rojo-500); }
@keyframes entrarToast {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes salirToast {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(8px); }
}

/* ---------- Skeleton loading ---------- */

.skeleton-linea {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gris-100) 25%, var(--gris-200) 37%, var(--gris-100) 63%);
  background-size: 400% 100%;
  animation: brilloSkeleton 1.4s ease infinite;
  margin-bottom: 8px;
}
@keyframes brilloSkeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- Tooltip discreto ---------- */

[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gris-900);
  color: white;
  padding: 5px 9px;
  border-radius: var(--radio-sm);
  font-size: 0.72rem;
  white-space: nowrap;
  z-index: 100;
  box-shadow: var(--sombra-md);
  pointer-events: none;
  animation: aparecer 120ms ease;
}

.wizard-paso-activo { color: var(--azul-600); font-weight: 700; }