/* Panel del plan de la empresa en Home (perfil Interno). Consume los tokens de
   facilu-theme.css; se carga despues de el. */

.fg-plan-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--fg-line);
    box-shadow: 0 2px 6px rgba(79, 39, 179, .08);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.fg-plan-card-eyebrow {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 6px;
}

.fg-plan-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.fg-plan-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    background: var(--fg-soft);
    color: var(--fg-pd);
}

.fg-plan-card-precio {
    margin-bottom: 4px;
}

.fg-plan-card-precio .fg-plan-precio-valor {
    font-size: 24px;
    font-weight: 700;
    color: var(--fg-ink);
}

.fg-plan-card-precio .fg-plan-precio-periodo {
    font-size: 13px;
    color: var(--fg-muted);
    margin-left: 4px;
}

.fg-plan-card-desc {
    color: var(--fg-muted);
    font-size: 13px;
    margin: 6px 0 14px;
}

.fg-plan-card hr {
    border-top: 1px solid var(--fg-line);
    margin: 0 0 12px;
}

.fg-plan-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fg-ink);
}

.fg-plan-item .fa-check-circle {
    color: var(--fg-success);
}

.fg-plan-vecinos {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.fg-plan-vecino {
    flex: 1 1 0;
    background: var(--fg-soft);
    border-radius: 8px;
    padding: 8px 10px;
}

.fg-plan-vecino-etiqueta {
    font-size: 10px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 2px;
}

.fg-plan-vecino-etiqueta .fa {
    font-size: 9px;
}

.fg-plan-vecino-nombre {
    font-weight: 700;
    color: var(--fg-ink);
    font-size: 13px;
}

.fg-plan-vecino-dato {
    color: var(--fg-muted);
    font-size: 11px;
}

/* ══ AVISOS DE HOME ═════════════════════════════════════════════════════════
   Reemplazan a los `callout` de AdminLTE (bloque de color sólido, azul o
   naranja, con el enlace subrayado dentro). Un bloque saturado grita más que
   el contenido que anuncia y no se parece a nada más del sistema: el resto de
   Home son tarjetas blancas sobre lavanda.

   El patrón aquí es tarjeta blanca + una franja de color a la izquierda que
   dice de qué tipo de aviso se trata, la cifra como protagonista y la acción
   como botón explícito en vez de un enlace subrayado en medio del texto. */

.fg-aviso {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px 13px 15px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--fg-line);
    border-left: 4px solid var(--fg-p);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(79, 39, 179, .08);
}

.fg-aviso-icono {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--fg-soft);
    color: var(--fg-p);
}

.fg-aviso-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.fg-aviso-titulo {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fg-ink);
    line-height: 1.3;
}

.fg-aviso-dato {
    margin-top: 1px;
    font-size: 12px;
    color: var(--fg-muted);
}

/* La cifra es el dato que trae a alguien a esta tarjeta: va con el peso y el
   color del tipo de aviso, no perdida dentro de la frase. */
.fg-aviso-cifra {
    font-weight: 700;
    color: var(--fg-ink);
}

.fg-aviso .btn {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 14px;
}

/* ── Variante: algo espera una acción del operador ─────────────────────────
   Ámbar sólo en la franja y el icono; el fondo sigue siendo blanco para que
   dos avisos seguidos no conviertan la columna en un semáforo. */
.fg-aviso--atencion { border-left-color: var(--fg-warning); }

.fg-aviso--atencion .fg-aviso-icono {
    background: #FEF3C7;
    color: #B45309;
}

.fg-aviso--atencion .fg-aviso-cifra { color: #B45309; }

/* ── Variante: hay algo nuevo que leer ─────────────────────────────────── */
.fg-aviso--nuevo { border-left-color: var(--fg-p); }

.fg-aviso--nuevo .fg-aviso-cifra { color: var(--fg-pd); }

@media (max-width: 480px) {
    .fg-aviso { flex-wrap: wrap; }
    .fg-aviso .btn { width: 100%; }
}

/* ══ NOVEDADES ══════════════════════════════════════════════════════════════
   Era el `timeline` de AdminLTE: etiqueta roja "SuperNoticias", puntos azules,
   titulares en `text-blue` y un icono de reloj gris suelto al final que no
   anunciaba nada. Tres colores ajenos al sistema en el bloque que ocupa media
   pantalla de Home.

   Se conserva la idea de linea de tiempo -las noticias tienen fecha y se leen
   de la mas nueva a la mas vieja- pero dibujada con los tokens de marca. */

.fg-novedades {
    background: #fff;
    border: 1px solid var(--fg-line);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(79, 39, 179, .08);
    margin-bottom: 20px;
}

.fg-novedades-cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--fg-line);
}

.fg-novedades-titulo {
    flex: 1 1 auto;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--fg-ink);
    margin: 0;
}

.fg-novedades-titulo > .fa { color: var(--fg-p); margin-right: 6px; }

.fg-novedades-cabecera .pagination { margin: 0; }

.fg-novedades-lista {
    list-style: none;
    margin: 0;
    padding: 6px 18px 14px;
}

/* La linea vertical de la cronologia va en el <li>, no en un pseudo-elemento
   del contenedor: asi termina exactamente en el ultimo punto y no cuelga por
   debajo de la ultima noticia. */
.fg-novedades-item {
    position: relative;
    padding: 14px 0 14px 26px;
}

.fg-novedades-item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 26px;
    bottom: -14px;
    width: 2px;
    background: var(--fg-line);
}

.fg-novedades-item:last-child::before { display: none; }

.fg-novedades-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--fg-p);
    box-shadow: 0 0 0 3px var(--fg-soft);
}

.fg-novedades-fecha {
    display: block;
    font-size: 11px;
    color: var(--fg-muted);
    margin-bottom: 2px;
}

.fg-novedades-fecha > .fa { margin-right: 4px; }

.fg-novedades-item h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fg-pd);
}

.fg-novedades-cuerpo {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg-ink);
    white-space: pre-wrap;      /* el texto se captura en un textarea */
    overflow-wrap: break-word;
}

.fg-novedades-img {
    display: block;
    max-width: 100%;
    margin-bottom: 9px;
    border-radius: 8px;
    border: 1px solid var(--fg-line);
}

.fg-novedades-vacio {
    padding: 34px 18px;
    text-align: center;
    color: var(--fg-muted);
    font-size: 13px;
}

.fg-novedades-vacio .fa {
    display: block;
    margin-bottom: 9px;
    font-size: 30px;
    color: #CBD5E1;
}

/* ══ CUMPLEAÑOS DEL DÍA ═════════════════════════════════════════════════════
   El bloque heredaba las clases `direct-chat direct-chat-primary` de un chat
   -copia y pega- y listaba a las personas en <table> sin cabecera, indentadas
   con celdas de `&nbsp;`. El distintivo de conductor Super era un <button>
   azul que no hacia nada al pulsarlo: es un estado, no una accion. */

.fg-cumples-grupo + .fg-cumples-grupo {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--fg-line);
}

.fg-cumples-grupo-titulo {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 2px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.fg-cumples-grupo-cuenta {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--fg-pd);
    background: var(--fg-soft);
    border-radius: 999px;
    padding: 1px 7px;
    letter-spacing: 0;
}

.fg-cumple {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 2px;
}

.fg-cumple + .fg-cumple { border-top: 1px solid #F4F1FC; }

.fg-cumple-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--fg-p), var(--fg-pl));
}

/* Distintivo de conductor Super: una estrella cosida al avatar. Ocupa menos
   que el boton anterior y se entiende como marca de la persona. */
.fg-cumple-super {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--fg-warning-ink);
    background: var(--fg-warning);
    border: 2px solid #fff;
}

.fg-cumple-cuerpo { flex: 1 1 auto; min-width: 0; }

.fg-cumple-nombre {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-cumple-contacto {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 1px;
    font-size: 11.5px;
}

/* Telefono y correo como enlaces reales: desde Home se felicita a la persona,
   y antes habia que seleccionar el texto y copiarlo a mano. */
.fg-cumple-contacto a {
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.fg-cumple-contacto a:hover { color: var(--fg-pd); }

.fg-cumple-contacto .fa { margin-right: 4px; opacity: .8; }