/* RRSS Frontend Portal — selector de servicios, navegación y avisos */

/* ── Avisos ─────────────────────────────────────────────────────────── */

.rfp-notice {
    max-width: 720px;
    margin: 24px auto;
    padding: 14px 18px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    background: #fff;
    font-size: 15px;
}

.rfp-notice p { margin: 0; }

.rfp-notice-error   { border-left-color: #c0392b; background: #fff5f5; color: #c0392b; }
.rfp-notice-warning { border-left-color: #d97706; background: #fffbeb; color: #92400e; }
.rfp-notice-success { border-left-color: #16a34a; background: #f0fdf4; color: #166534; }

/* Réplica del aviso nativo de wp-admin (.notice), para que las llamadas a
   RRSS.showNotification() en admin.js (pensadas solo para wp-admin, donde
   WordPress ya carga su CSS de .notice) también se vean en el frontend. */
.rfp-content .notice {
    position: relative;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-left-width: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    margin: 5px 0 15px;
    padding: 10px 38px 10px 14px;
    font-size: 14px;
}

.rfp-content .notice p {
    margin: .4em 0;
    padding: 2px;
}

.rfp-content .notice-success { border-left-color: #00a32a; }
.rfp-content .notice-error   { border-left-color: #d63638; }
.rfp-content .notice-warning { border-left-color: #dba617; }
.rfp-content .notice-info    { border-left-color: #72aee6; }

/* ── Portal selector ────────────────────────────────────────────────── */

.rfp-portal {
    max-width: 720px;
    margin: 48px auto;
    padding: 0 16px;
}

.rfp-portal-title {
    font-size: 1.6rem;
    margin: 0 0 6px;
    text-align: center;
}

.rfp-portal-subtitle {
    color: #64748b;
    margin: 0 0 32px;
    text-align: center;
    font-size: 1rem;
}

.rfp-portal-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.rfp-portal-item,
.rfp-portal-item:hover {
    text-decoration: none !important;
}

.rfp-portal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: rgba(var(--rfp-accent-rgb, 15, 23, 42), .07);
    border: 1px solid rgba(var(--rfp-accent-rgb, 15, 23, 42), .22);
    border-radius: 12px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.rfp-portal-item:hover {
    background: rgba(var(--rfp-accent-rgb, 15, 23, 42), .13);
    border-color: rgba(var(--rfp-accent-rgb, 15, 23, 42), .4);
    transform: translateY(-2px);
}

.rfp-portal-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
}

.rfp-portal-label {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.rfp-portal-arrow {
    flex-shrink: 0;
    color: rgb(var(--rfp-accent-rgb, 15, 23, 42));
    font-size: 1.1rem;
    transition: transform .18s ease;
}

.rfp-portal-item:hover .rfp-portal-arrow {
    transform: translateX(3px);
}

/* Colores de marca por servicio (triplete RGB, usado dentro de rgba()) */
.rfp-svc-admin    { --rfp-accent-rgb: 51, 65, 85; }
.rfp-svc-rrss     { --rfp-accent-rgb: 37, 99, 235; }
.rfp-svc-vp       { --rfp-accent-rgb: 147, 51, 234; }
.rfp-svc-vi       { --rfp-accent-rgb: 22, 163, 74; }
.rfp-svc-noticias { --rfp-accent-rgb: 234, 88, 12; }
.rfp-svc-vrb      { --rfp-accent-rgb: 13, 148, 136; }

.rfp-portal-footer {
    margin-top: 32px;
    text-align: center;
    font-size: .9rem;
}

.rfp-portal-footer a { color: #94a3b8; }

@media (max-width: 480px) {
    .rfp-portal-list { grid-template-columns: 1fr; }
}

/* ── Navegación de servicio ─────────────────────────────────────────── */

.rfp-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 24px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.rfp-nav a {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
}

.rfp-nav a:hover { background: #e2e8f0; color: #0f172a; }

.rfp-nav a.rfp-nav-active {
    background: rgba(var(--rfp-accent-rgb, 15, 23, 42), .12);
    border: 1px solid rgba(var(--rfp-accent-rgb, 15, 23, 42), .35);
    color: rgb(var(--rfp-accent-rgb, 15, 23, 42));
    padding: 5px 13px;
}

.rfp-nav a.rfp-nav-active:hover {
    background: rgba(var(--rfp-accent-rgb, 15, 23, 42), .18);
    color: rgb(var(--rfp-accent-rgb, 15, 23, 42));
}

.rfp-nav .rfp-nav-portal {
    color: #64748b;
    margin-right: 8px;
    padding-left: 6px;
}

/* ── Login frontend ─────────────────────────────────────────────────── */

.rfp-login {
    max-width: 400px;
    margin: 48px auto;
    padding: 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.rfp-login-title {
    font-size: 1.25rem;
    margin: 0 0 20px;
    text-align: center;
}

.rfp-login .rfp-notice {
    margin: 0 0 18px;
    padding: 10px 14px;
    font-size: 14px;
}

.rfp-login form p { margin: 0 0 16px; }

.rfp-login label {
    display: block;
    margin-bottom: 6px;
    font-size: .9rem;
    font-weight: 600;
    color: #334155;
}

.rfp-login input[type="text"],
.rfp-login input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
}

.rfp-login .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

.rfp-login input[type="submit"] {
    width: 100%;
    padding: 11px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.rfp-login input[type="submit"]:hover { background: #1e293b; }

.rfp-login-lost {
    margin: 18px 0 0;
    text-align: center;
    font-size: .88rem;
}

.rfp-login-lost a { color: #64748b; }

/* Campo de código 2FA que inyecta el JS de AIOS/Simba TFA */
.rfp-login .simbaotp,
.rfp-login #simba_otp_login { margin-bottom: 16px; }

/* ── Perfil ─────────────────────────────────────────────────────────── */

.rfp-profile {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rfp-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px 28px;
}

.rfp-card-title {
    font-size: 1.1rem;
    margin: 0 0 18px;
}

.rfp-profile-data {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px 16px;
    margin: 0;
}

.rfp-profile-data dt {
    font-weight: 600;
    color: #64748b;
    font-size: .92rem;
}

.rfp-profile-data dd {
    margin: 0;
    color: #0f172a;
}

.rfp-field { margin-bottom: 16px; }

.rfp-field label {
    display: block;
    margin-bottom: 6px;
    font-size: .9rem;
    font-weight: 600;
    color: #334155;
}

.rfp-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
}

.rfp-field-hint {
    margin: 6px 0 0;
    font-size: .82rem;
    color: #94a3b8;
}

.rfp-button {
    padding: 10px 22px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.rfp-button:hover { background: #1e293b; }

#rfp-password-result .rfp-notice {
    margin: 0 0 16px;
    padding: 10px 14px;
    font-size: 14px;
}

.rfp-portal-sep { color: #cbd5e1; }

.rfp-nav .rfp-nav-logout {
    margin-left: auto;
    color: #94a3b8;
}

.rfp-nav .rfp-nav-logout:hover {
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Contenido de servicio (.rfp-content) ───────────────────────────── */
/* Los templates se diseñaron para la tipografía compacta de wp-admin;
   aquí neutralizamos los tamaños de heading del theme Astra. */

.rfp-page .entry-title,
.rfp-page .ast-archive-title,
.rfp-page .page-header .page-title {
    display: none; /* el template ya trae su propio título */
}

.rfp-content {
    font-size: 15px;
}

/* Las tablas del admin se diseñaron con la tipografía compacta de wp-admin (13px) */
.rfp-content table,
.rfp-content th,
.rfp-content td {
    font-size: 13px;
}

/* Astra añade bordes verticales a las tablas de contenido del frontend
   (td,th{border-width:0 1px 1px 0}), algo que no existe en wp-admin. Cada
   plugin ya define su propia línea horizontal entre filas (border-bottom);
   aquí solo quitamos los bordes que añade el tema por su cuenta. */
.rfp-content table,
.rfp-content th,
.rfp-content td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.rfp-content h1 {
    font-size: 1.5rem !important;
    line-height: 1.3;
    margin: 4px 0 18px;
}

.rfp-content h2 {
    font-size: 1.2rem !important;
    line-height: 1.3;
    margin: 26px 0 12px;
}

.rfp-content h3 {
    font-size: 1rem !important;
    line-height: 1.3;
}

.rfp-content h4 {
    font-size: .95rem !important;
}

/* ── Tarjetas de plataformas: evitar desbordes ──────────────────────── */

.rfp-content .rrss-platforms-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.rfp-content .rrss-platform-card {
    min-width: 0;
}

.rfp-content .rrss-platform-header {
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.rfp-content .rrss-platform-header h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rfp-content .rrss-connection-status {
    white-space: nowrap;
    font-size: .82em;
}

.rfp-content .rrss-platform-body {
    overflow-wrap: break-word;
}

/* Los botones del admin (button/button-primary) heredan tamaños raros del theme */
.rfp-content .button,
.rfp-content button {
    font-size: 14px;
}

/* Tablas anchas (historial, envíos): envueltas por JS (portal.js) en un
   contenedor con scroll horizontal — NUNCA display:block en la propia
   <table>, porque descoordina las columnas de thead y tbody entre sí. */
.rfp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* El template de Noticias trae su propia barra de pestañas (Configuración/
   Historial/Empresas) apuntando siempre a wp-admin. Nuestro rfp_nav('noticias')
   ya cubre esa navegación en el frontend, así que la ocultamos para no-admins;
   se deja visible para admins por si acceden directamente a "Empresas". */
.rfp-non-admin .rfp-content .n-nav {
    display: none;
}

.rfp-content .vp-my-submissions {
    border: none;
    box-shadow: none;
}

/* Reset de fondo: los templates de RRSS traen su propio fondo gris #f1f1f1
   pensado para el área de contenido de wp-admin; en el portal se ve como
   una caja flotante, así que lo dejamos en blanco */
.rfp-content .rrss-history-page,
.rfp-content .rrss-tiktok-manager {
    background: #fff;
}

/* ── Iconos de plataforma (historial): grises por defecto, color al hover,
   igual que en wp-admin. Se usa !important porque hay CSS global de
   iconos de marca (.fa-facebook, .fa-instagram…) en el frontend del sitio
   que de otro modo pinta estos iconos de color permanentemente. ── */

.rfp-content .platform-link,
.rfp-content .platform-link i {
    color: #666 !important;
    text-decoration: none !important;
}

.rfp-content .platform-link {
    background: #f8f9fa !important;
    border-color: #ddd !important;
}

.rfp-content .platform-link:hover {
    text-decoration: none !important;
}

.rfp-content .platform-link:hover,
.rfp-content .platform-link:hover i {
    color: #fff !important;
}

.rfp-content .platform-link.wordpress:hover {
    background: #21759b !important;
    border-color: #21759b !important;
}

.rfp-content .platform-link.youtube-shorts:hover {
    background: #eee !important;
    border-color: #ccc !important;
}
.rfp-content .platform-link.youtube,
.rfp-content .platform-link.youtube:hover {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px !important;
    box-shadow: none !important;
    font-size: 0 !important;
}
.rfp-content .yt-icon {
    display: inline-block !important;
    height: 20px !important;
    width: auto !important;
    max-width: none !important;
    vertical-align: middle;
}

.rfp-content .platform-link.facebook:hover {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
}

.rfp-content .platform-link.instagram:hover {
    background: #e4405f !important;
    border-color: #e4405f !important;
}

.rfp-content .platform-link.tiktok:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* ── Navegación en móvil: barra deslizable de una sola línea ────────── */

@media (max-width: 782px) {
    .rfp-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 10px;
    }

    .rfp-nav::-webkit-scrollbar { display: none; }

    .rfp-nav a {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: .88rem;
        padding: 6px 12px;
    }

    .rfp-content h1 { font-size: 1.3rem !important; }
    .rfp-content h2 { font-size: 1.1rem !important; }

    .rfp-login { padding: 24px 20px; margin: 24px auto; }
    .rfp-card  { padding: 20px; }

    .rfp-profile-data { grid-template-columns: 1fr; gap: 2px 0; }
    .rfp-profile-data dd { margin-bottom: 10px; }
}

/* ── Indicador de "hay más" en la navegación deslizable ─────────────── */

.rfp-nav-wrap { position: relative; }

.rfp-nav-wrap::after {
    content: '›';
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    background: linear-gradient(to right, rgba(248, 250, 252, 0), #f8fafc 55%);
    border-radius: 0 8px 8px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.rfp-nav-wrap.rfp-nav-more::after { opacity: 1; }