/* 🧩 Estilo común de las "pantallas de tarjetas" (lista de tarjetas con ícono, título, descripción, estado y ›).
   UNA sola definición para whatsappQr.html (Configurar IA, Canales) y editar-perfil.html (Información de la clínica). */
.tarjeta-nav { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: .875rem 1rem; transition: transform .15s, box-shadow .15s; }
.tarjeta-nav--clic { cursor: pointer; }
.tarjeta-nav--clic:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.tarjeta-nav--clic:focus-visible { outline: 2px solid #7C5CFA; outline-offset: 2px; }
.tarjeta-nav__icono { width: 2.75rem; height: 2.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: .75rem; background: #EDE7FF; font-size: 1.25rem; }
.tarjeta-nav__icono--verde { background: #dcfce7; }
.tarjeta-nav__icono--azul { background: #dbeafe; }
.tarjeta-nav__icono--rosa { background: #fce7f3; }
.tarjeta-nav__texto { flex: 1; min-width: 0; }
.tarjeta-nav__titulo { display: block; font-weight: 700; font-size: .875rem; color: #111827; }
.tarjeta-nav__desc { display: block; font-size: .75rem; color: #6b7280; margin-top: .125rem; }
.tarjeta-nav__extra { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.tarjeta-nav__flecha { color: #d1d5db; font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.pildora-estado { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 9999px; font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.pildora-estado::before { content: '●'; font-size: .5rem; }
.pildora-estado--ok { background: #dcfce7; color: #15803d; }
.pildora-estado--off { background: #f3f4f6; color: #6b7280; }
.pildora-estado--warn { background: #fef3c7; color: #b45309; }
.chip-contador { display: inline-block; background: #EDE7FF; color: #7C5CFA; font-size: .6875rem; font-weight: 700; border-radius: 9999px; padding: .125rem .625rem; white-space: nowrap; }
.link-volver { display: inline-flex; align-items: center; gap: .25rem; margin-bottom: 1rem; font-size: .75rem; font-weight: 700; color: #7C5CFA; background: none; border: 0; cursor: pointer; padding: 0; }
.link-volver:hover { text-decoration: underline; }
.vista-encabezado { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.vista-encabezado__titulo { font-size: 1.25rem; font-weight: 700; color: #111827; }
.vista-encabezado__subtitulo { font-size: .875rem; color: #6b7280; margin-top: .125rem; }
@media (max-width: 480px) {
    /* En pantallas angostas el estado/chip/acción baja debajo del texto (alineado con él) para no aplastarlo */
    .tarjeta-nav { gap: .75rem; padding: .75rem; flex-wrap: wrap; }
    .tarjeta-nav__flecha { order: 2; }
    .tarjeta-nav__extra { order: 3; flex-basis: 100%; padding-left: 3.5rem; flex-wrap: wrap; }
    .tarjeta-nav__extra > button { margin-left: auto; }
}
.chip-contador--alerta { background: #fef3c7; color: #b45309; }
.lista-tarjetas-nav { display: flex; flex-direction: column; gap: .625rem; }
.chip-contador.hidden { display: none; }