/* ── Astra · componentes compartidos ─────────────────────────────────────────── */

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 36px; padding: 0 var(--e-4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  background: var(--superficie); color: var(--texto); font-weight: 560; white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion);
}
.boton:hover { background: var(--superficie-2); text-decoration: none; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.boton svg { width: 18px; height: 18px; }
.boton-primario { background: var(--acento); border-color: var(--acento); color: var(--texto-sobre-acento); }
.boton-primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton-peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 45%, var(--borde)); }
.boton-peligro:hover { background: var(--peligro-suave); }
.boton-fantasma { border-color: transparent; background: none; }
.boton-icono {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--radio-sm); background: none; color: var(--texto-suave);
}
.boton-icono svg { width: 20px; height: 20px; }
.boton-icono:hover { background: var(--superficie-2); color: var(--texto); }
.boton-atajo { display: inline-flex; align-items: center; gap: var(--e-2); height: 34px; padding: 0 10px 0 var(--e-3);
  border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); color: var(--texto-tenue); font-size: var(--t-sm); }
.boton-atajo svg { width: 16px; height: 16px; }
.boton-atajo:hover { border-color: var(--borde-fuerte); color: var(--texto-suave); }
@media (max-width: 767px) { .boton-atajo .texto, .boton-atajo kbd { display: none; } .boton-atajo { width: 40px; justify-content: center; padding: 0; } }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .campo > .etiqueta { font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); }
.entrada {
  width: 100%; min-height: 40px; padding: 8px var(--e-3);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  background: var(--superficie); color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.entrada::placeholder { color: var(--texto-tenue); }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.ayuda { font-size: var(--t-xs); color: var(--texto-tenue); }
@media (max-width: 767px) { .entrada, select.entrada, textarea.entrada { font-size: 16px; min-height: 44px; } }

/* Control segmentado */
.segmentos { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--borde); }
.segmentos button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--e-3);
  border: 0; border-radius: 7px; background: none; color: var(--texto-suave); font-weight: 560; font-size: var(--t-sm);
}
.segmentos button svg { width: 16px; height: 16px; flex: none; }
.segmentos button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }

/* Encabezado de vista */
.vista-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-5); }
.vista-cabeza .subtitulo { color: var(--texto-suave); margin-top: 4px; }

/* Tarjetas */
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tarjeta {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  background: var(--superficie); box-shadow: var(--sombra); min-width: 0;
}
.tarjeta-cabeza { display: flex; align-items: center; gap: var(--e-2); }
.tarjeta-cabeza h3 { font-size: var(--t-base); font-weight: 650; }
.tarjeta-cabeza .icono-tarjeta { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--acento-suave); color: var(--acento); flex: none; }
.tarjeta-cabeza .icono-tarjeta svg { width: 17px; height: 17px; }
.tarjeta-cabeza .derecha { margin-left: auto; }
.tarjeta-pie { margin-top: auto; font-size: var(--t-xs); color: var(--texto-tenue); }
.cifra { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tarjeta.pendiente { background: repeating-linear-gradient(-45deg, var(--superficie), var(--superficie) 10px, var(--superficie-2) 10px, var(--superficie-2) 20px); box-shadow: none; }
.seccion { display: flex; flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-6); }
.seccion > h2 { font-size: var(--t-md); }
.panel { border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--superficie); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); }

/* Píldoras y semáforo */
.pildora { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radio-pildora);
  font-size: var(--t-xs); font-weight: 600; background: var(--superficie-2); color: var(--texto-suave); white-space: nowrap; }
.pildora.ok { background: var(--ok-suave); color: var(--ok); }
.pildora.aviso { background: var(--aviso-suave); color: var(--aviso); }
.pildora.peligro { background: var(--peligro-suave); color: var(--peligro); }
.pildora.info { background: var(--info-suave); color: var(--info); }
.pildora.acento { background: var(--acento-suave); color: var(--acento); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th { text-align: left; font-weight: 600; color: var(--texto-suave); background: var(--superficie-2); padding: 8px var(--e-3); white-space: nowrap; }
.tabla td { padding: 9px var(--e-3); border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla td.num, .tabla th.num { text-align: right; }

/* Listas simples */
.lista { display: flex; flex-direction: column; }
.lista > li { list-style: none; display: flex; align-items: center; gap: var(--e-3); padding: 10px 0; border-top: 1px solid var(--borde); min-width: 0; }
.lista > li:first-child { border-top: 0; }
ul.lista { margin: 0; padding: 0; }

/* Estado vacío */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-3); padding: var(--e-7) var(--e-4); color: var(--texto-suave); }
.vacio .icono-grande { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--acento-suave); color: var(--acento); }
.vacio .icono-grande svg { width: 30px; height: 30px; }
.vacio h2 { color: var(--texto); }
.vacio p { max-width: 460px; }

/* Avatar */
.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: var(--texto-sobre-acento); font-size: var(--t-xs); font-weight: 700; }

/* Avisos en línea */
.aviso-linea { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--radio); background: var(--aviso-suave); color: var(--texto); border: 1px solid color-mix(in srgb, var(--aviso) 30%, transparent); }
.aviso-linea svg { width: 20px; height: 20px; color: var(--aviso); flex: none; margin-top: 1px; }
.aviso-linea.info { background: var(--info-suave); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.aviso-linea.info svg { color: var(--info); }

/* Capas: toasts, diálogos y hojas */
.toasts { position: fixed; z-index: 90; right: var(--e-4); bottom: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--e-3); max-width: min(420px, calc(100vw - 32px));
  padding: 10px var(--e-4); border-radius: var(--radio); background: var(--texto); color: var(--fondo); box-shadow: var(--sombra-alta);
  font-size: var(--t-sm); font-weight: 520; animation: entrar-toast 180ms ease-out; }
.toast.peligro { background: var(--peligro); color: #fff; }
.toast.ok svg { color: var(--ok); }
.toast svg { width: 18px; height: 18px; flex: none; }
@keyframes entrar-toast { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 767px) { .toasts { left: var(--e-3); right: var(--e-3); bottom: calc(var(--alto-tabbar) + var(--e-3) + env(safe-area-inset-bottom)); } .toast { max-width: none; } }

.velo { position: fixed; inset: 0; z-index: 80; background: var(--velo); display: grid; place-items: center; padding: var(--e-4); animation: aparecer 140ms ease-out; }
@keyframes aparecer { from { opacity: 0; } }
.dialogo {
  width: min(520px, 100%); max-height: min(86dvh, 760px); display: flex; flex-direction: column;
  border-radius: var(--radio-lg); background: var(--superficie); box-shadow: var(--sombra-alta); border: 1px solid var(--borde);
  animation: subir 160ms ease-out;
}
@keyframes subir { from { transform: translateY(10px) scale(0.98); opacity: 0; } }
.dialogo-cabeza { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-4) 0 var(--e-5); }
.dialogo-cabeza h2 { font-size: var(--t-md); flex: 1; }
.dialogo-cuerpo { padding: var(--e-4) var(--e-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--e-4); }
.dialogo-pie { display: flex; justify-content: flex-end; gap: var(--e-2); padding: 0 var(--e-5) var(--e-5); flex-wrap: wrap; }
@media (max-width: 767px) {
  .velo { place-items: end stretch; padding: 0; }
  .dialogo { width: 100%; max-height: 92dvh; border-radius: var(--radio-lg) var(--radio-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); animation: subir-hoja 200ms ease-out; }
  .dialogo::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--borde-fuerte); margin: 8px auto 0; }
  .dialogo-pie .boton { flex: 1; min-height: 44px; }
}
@keyframes subir-hoja { from { transform: translateY(40%); opacity: 0.4; } }

/* Paleta de comandos */
.velo.paleta-velo { place-items: start center; padding-top: 12vh; }
.paleta { width: min(620px, 100%); border-radius: var(--radio-lg); background: var(--superficie); box-shadow: var(--sombra-alta); border: 1px solid var(--borde); overflow: hidden; animation: subir 140ms ease-out; }
.paleta-entrada { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-4); border-bottom: 1px solid var(--borde); }
.paleta-entrada svg { width: 20px; height: 20px; color: var(--texto-tenue); flex: none; }
.paleta-entrada input::-webkit-search-cancel-button { display: none; }
.paleta-entrada input { flex: 1; min-height: 54px; border: 0; background: none; outline: none; font-size: var(--t-md); }
.paleta-lista { max-height: 50vh; overflow-y: auto; padding: var(--e-2); margin: 0; }
.paleta-lista li { list-style: none; display: flex; align-items: center; gap: var(--e-3); padding: 9px var(--e-3); border-radius: var(--radio-sm); cursor: pointer; }
.paleta-lista li svg { width: 18px; height: 18px; color: var(--texto-suave); flex: none; }
.paleta-lista li .grupo { margin-left: auto; font-size: var(--t-xs); color: var(--texto-tenue); }
.paleta-lista li[aria-selected="true"] { background: var(--acento-suave); color: var(--acento); }
.paleta-lista li[aria-selected="true"] svg { color: var(--acento); }
.paleta-vacia { padding: var(--e-5); text-align: center; color: var(--texto-tenue); }
@media (max-width: 767px) { .velo.paleta-velo { padding: env(safe-area-inset-top) 0 0; place-items: start stretch; } .paleta { border-radius: 0 0 var(--radio-lg) var(--radio-lg); } .paleta-entrada input { font-size: 16px; } }

/* Esqueleto de carga */
.esqueleto { border-radius: var(--radio-sm); background: linear-gradient(90deg, var(--superficie-2), var(--superficie-3), var(--superficie-2)); background-size: 200% 100%; animation: brillar 1.3s ease-in-out infinite; min-height: 14px; }
@keyframes brillar { to { background-position: -200% 0; } }

/* Menú contextual */
.menu-contextual { position: fixed; z-index: 85; min-width: 200px; padding: var(--e-1); border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta); }
.menu-contextual button { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 34px; padding: 0 var(--e-3); border: 0; border-radius: var(--radio-sm); background: none; text-align: left; font-size: var(--t-sm); }
.menu-contextual button svg { width: 16px; height: 16px; color: var(--texto-suave); }
.menu-contextual button:hover { background: var(--superficie-2); }
.menu-contextual hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e-1) 0; }

/* Código de correo (astra+código@…): se copia con un clic */
.chip-codigo { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; margin-left: 8px; vertical-align: middle;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-pildora); background: none; color: var(--texto-suave);
  font: 600 12px/1 var(--fuente-mono); cursor: pointer; white-space: nowrap; }
.chip-codigo svg { width: 13px; height: 13px; }
.chip-codigo:hover { border-color: var(--acento); color: var(--acento); border-style: solid; }
.chip-codigo.chico { height: 22px; font-size: 11px; padding: 0 7px; }
.chip-codigo.estatico { cursor: default; margin-left: 0; }
.ficha-tipo { display: flex; align-items: center; }
.nota-barra .chip-codigo { margin: 0 4px 0 0; }