/* ============================================================
   AYUDA — Búsqueda dentro de los documentos
   Sistema de Administración de Condominios
   ============================================================
   El buscador va montado ENCIMA de la pantalla de Leyes, que es donde están las
   leyes y donde se suben. Por eso todo lo de aquí está pensado para convivir con
   la tabla que queda debajo, no para ocupar una pantalla entera: arranca sin
   resultados, no reserva hueco y se puede recoger.

   El módulo de Ayuda se dibuja desde JavaScript con estilos en línea. Esta
   sección se sale de esa costumbre a propósito: son bastantes piezas —el
   buscador, los avisos del índice, las tarjetas de resultado— y repetir sus
   estilos dentro de cada plantilla de cadena las volvería ilegibles y haría
   imposible cambiar un color en un solo sitio.

   Las reglas de móvil viven en css/responsive/ayuda/mobile.css, como el resto
   del sistema. Aquí no hay ninguna media query.
   ============================================================ */

/* ------------------------------------------------------------
   El buscador
   ------------------------------------------------------------ */
.ab-caja {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
}

.ab-buscador {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 4px 4px 14px;
    transition: border-color 0.15s;
}

.ab-buscador:focus-within {
    border-color: #0a2463;
    background: white;
}

.ab-lupa {
    color: #94a3b8;
    font-size: 15px;
    flex-shrink: 0;
}

.ab-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #1e293b;
    padding: 10px 0;
}

.ab-input::placeholder {
    color: #94a3b8;
}

.ab-boton {
    flex-shrink: 0;
    background: #0a2463;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.ab-boton:hover {
    background: #0d2f7a;
}

/* ------------------------------------------------------------
   Preguntas de ejemplo
   ------------------------------------------------------------
   Delante de un campo vacío no se sabe si esto espera una palabra suelta o una
   frase entera. Enseñando preguntas de verdad se entiende sin instrucciones.
   ------------------------------------------------------------ */
.ab-ejemplos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.ab-ejemplos-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    margin-right: 2px;
}

.ab-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.ab-chip:hover {
    background: #0a2463;
    border-color: #0a2463;
    color: white;
}

/* Una línea explicando qué hace de raro este buscador. Se queda fija porque es
   lo que evita la conclusión de que "no funciona" cuando alguien busca una
   palabra literal y le salen artículos que no la contienen. */
.ab-pista {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.55;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.ab-pista strong {
    color: #64748b;
}

/* ------------------------------------------------------------
   Estado del índice
   ------------------------------------------------------------
   UNA LÍNEA, NO UN PANEL. Esta pantalla es la de las leyes: el estado del
   índice es un dato de apoyo y tiene que caber en un renglón discreto. Lo que
   falla se cuenta ahí y se explica al desplegarlo, porque una alarma en rojo
   fija encima de la lista deja de leerse a los dos días y estorba siempre.
   ------------------------------------------------------------ */
.ab-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 0 4px 12px;
    font-size: 12px;
    color: #64748b;
}

.ab-barra-dato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ab-barra-dato strong {
    color: #0a2463;
}

.ab-barra-pendiente {
    color: #1e40af;
}

.ab-barra-boton {
    background: #0a2463;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.ab-barra-boton:disabled {
    background: #94a3b8;
    cursor: default;
}

/* Lo que falla se anuncia en ámbar, no en rojo: no está roto el sistema, hay
   documentos que no se pudieron leer. El rojo se guarda para dentro, donde se
   dice cuál y por qué. */
.ab-barra-problema {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    cursor: pointer;
    font-family: inherit;
}

.ab-barra-problema:hover {
    background: #fef3c7;
}

.ab-barra-flecha {
    font-size: 9px;
    transition: transform 0.15s;
}

.ab-barra-problema.abierto .ab-barra-flecha {
    transform: rotate(180deg);
}

.ab-barra-progreso {
    font-size: 11px;
    color: #64748b;
}

/* Bloqueo real: sin las tablas no hay nada que buscar. Se queda a la vista
   porque hasta que no se resuelva el buscador no sirve para nada, pero sigue
   siendo un renglón. */
.ab-barra-bloqueo {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    line-height: 1.5;
    gap: 9px;
}

.ab-detalle {
    margin-bottom: 12px;
}

.ab-detalle-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #94a3b8;
    padding: 0 2px;
}

.ab-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.ab-aviso > i {
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.ab-aviso > div {
    flex: 1;
    min-width: 0;
}

.ab-aviso-azul  { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.ab-aviso-ambar { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.ab-aviso-rojo  { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

.ab-lista {
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.85;
}

/* ------------------------------------------------------------
   Resultados
   ------------------------------------------------------------ */
.ab-cargando {
    font-size: 12px;
    color: #64748b;
    padding: 18px 4px;
}

.ab-entendido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 12px;
    padding: 0 4px;
}

.ab-entendido-ideas {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ab-limpiar {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    font-family: inherit;
    flex-shrink: 0;
}

.ab-limpiar:hover {
    color: #0a2463;
}

.ab-tarjeta {
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #0a2463;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ab-tarjeta-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ab-doc {
    font-size: 12px;
    font-weight: 700;
    color: #0a2463;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La cita es lo que se busca con la vista al repasar los resultados, así que se
   separa del nombre del documento en vez de quedar como un dato más. */
.ab-cita {
    background: #0a2463;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    white-space: nowrap;
}

.ab-pag {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.ab-texto {
    font-size: 13px;
    line-height: 1.65;
    color: #334155;
    white-space: pre-line;
}

/* Un artículo largo llena la pantalla y esconde los demás resultados. Se recorta
   y se abre a petición; el texto completo nunca se pierde. */
.ab-texto.recortado {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ab-texto.recortado.abierto {
    display: block;
    overflow: visible;
}

.ab-vermas {
    background: none;
    border: none;
    color: #0a2463;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0 0;
    font-family: inherit;
}

.ab-marca {
    background: #fef08a;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.ab-tarjeta-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.ab-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Por qué salió este pasaje. Sin esto, un resultado que no repite ni una palabra
   de la pregunta —que es justo lo que el tesauro consigue— parece un error. */
.ab-idea {
    background: #eef2ff;
    color: #3730a3;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.ab-abrir {
    font-size: 11px;
    color: #0a2463;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ab-abrir:hover {
    text-decoration: underline;
}

.ab-nota {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
    padding: 8px 4px 0;
    margin: 0;
}

/* ------------------------------------------------------------
   Estados sin resultados
   ------------------------------------------------------------ */
/* Contenido, no pantalla: debajo sigue estando la tabla de leyes, así que este
   bloque se mantiene bajo para no empujarla fuera de la vista. */
.ab-vacio {
    text-align: center;
    padding: 30px 24px;
    color: #94a3b8;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
}

.ab-vacio > i {
    font-size: 30px;
    color: #cbd5e1;
    margin-bottom: 12px;
    display: block;
}

.ab-vacio p {
    font-size: 14px;
    color: #475569;
    margin: 0 0 8px;
}

.ab-vacio small {
    font-size: 12px;
    line-height: 1.6;
    display: block;
    max-width: 460px;
    margin: 0 auto;
}

.ab-vacio-error > i,
.ab-vacio-error p {
    color: #b91c1c;
}

/* ------------------------------------------------------------
   Buscador apagado
   ------------------------------------------------------------
   Mientras la búsqueda no esté instalada en la base, el buscador se apaga en
   vez de dejar preguntar al vacío. Tiene que notarse a simple vista: un campo
   que acepta texto y luego responde con un error se lee como que la pregunta
   estaba mal escrita.
   ------------------------------------------------------------ */
.ab-input:disabled,
.ab-boton:disabled,
.ab-chip:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ab-boton:disabled {
    background: #94a3b8;
}

.ab-chip:disabled:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}