/* =====================================================
   RNF Theme (Bootstrap 4 friendly)
   - Paleta
   - Tarjetas
   - Formularios (inputs, selects, textarea, jQuery UI, Select2)
   - Botones
   - Tablas
   - Alertas
   - Utilidades
   ===================================================== */

/* ---------- Paleta / variables ---------- */
:root{
    --rnf-naranja: #fd7e14;
    --rnf-naranja-dark: #e67e22;
    --rnf-verde:   #28a745;
    --rnf-verde-dark: #1e7e34;
    --rnf-ink:    #333;
    --rnf-muted:  #6c757d;
    --rnf-bg:     #f8f9fa;
    --rnf-border: #c8cdd3;
    --rnf-focus:  rgba(40,167,69,.25);  /* sombra foco verde */
    --rnf-radius: 10px;
}

/* ---------- Tipografía base opcional ---------- */
.rnf-heading {
    font-weight: 700;
    color: var(--rnf-ink);
    letter-spacing: .2px;
}

/* =====================================================
   TARJETAS
===================================================== */
.rnf-card{
    background:#fff;
    border:1px solid var(--rnf-border);
    border-radius: var(--rnf-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.rnf-card--soft{
    background: #fdfdfd;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.rnf-card__header{
    padding: 16px 20px;
    border-bottom:1px solid var(--rnf-border);
    border-top-left-radius: var(--rnf-radius);
    border-top-right-radius: var(--rnf-radius);
    background: linear-gradient(135deg, #fefefe, #f9fbff);
}
.rnf-card__title{
    margin:0;
    font-weight:700;
    color: var(--rnf-ink);
    text-transform: uppercase;
}
.rnf-card__body{
    padding: 20px;
}

/* =====================================================
   FORMULARIOS (moderno + accesible)
===================================================== */
/* Ahora – full width dentro de su contenedor */
.rnf-form{
    width:100%;
    max-width:none;
    margin:0;               /* sin auto-center */
}

/* Si alguna vista quiere ancho contenido, usa esta variante opcional */
.rnf-form--constrained{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}


.rnf-form .rnf-form__title{
    font-weight:700;
    color:#fff;
    background: var(--rnf-verde);
    border-top-left-radius: var(--rnf-radius);
    border-top-right-radius: var(--rnf-radius);
    padding: 14px 18px;
    margin: -1px -1px 18px; /* “pega” al borde de la tarjeta si usas rnf-card */
}

/* Grupo de campo */
.rnf-field{
    margin-bottom: 16px;
}
.rnf-label{
    display:block;
    font-weight:600;
    color: var(--rnf-ink);
    margin-bottom:8px;
}

/* Control base */
.rnf-control{
    display:block;
    width:100%;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 0.95rem;
    color:#222;
    background:#fff;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rnf-control:focus{
    outline:0;
    border-color: var(--rnf-verde);
    box-shadow: 0 0 0 .25rem var(--rnf-focus);
    background:#fff;
}

/* Textarea */
textarea.rnf-control{
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* Estados */
.rnf-control.is-valid { border-color: #20c997; }
.rnf-control.is-invalid{ border-color: #dc3545; }
.rnf-help{
    display:block;
    margin-top:6px;
    font-size:.875rem;
    color: var(--rnf-muted);
}

/* Etiquetas de “obligatorio” */
.rnf-required::after{
    content:" *";
    color:#dc3545;
}

/* ---------- Integración con tus clases existentes ---------- */
/* Mejora el look sin romper si las sigues usando */
.form-formulario,
.form-catalogo,
.form-negro{
    border-radius:8px !important;
    border-color:#cfd8dc !important;
    padding:10px 12px !important;
    min-height:42px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-formulario:focus,
.form-catalogo:focus,
.form-negro:focus{
    outline:0;
    border-color: var(--rnf-verde) !important;
    box-shadow: 0 0 0 .25rem var(--rnf-focus);
}

/* Datepicker jQuery UI dentro del nuevo estilo */
.ui-datepicker{
    z-index: 10000 !important; /* sobre modales/menus */
    background:#fff;
    border:1px solid var(--rnf-border);
    border-radius:8px;
    box-shadow: 0 10px 24px rgba(0,0,0,.1);
}

/* ---------- Selects nativos ---------- */
.rnf-select{
    appearance:none;
    background-image:
        linear-gradient(45deg, transparent 50%, #9aa0a6 50%),
        linear-gradient(135deg, #9aa0a6 50%, transparent 50%),
        linear-gradient(to right, #cfd8dc, #cfd8dc);
    background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        calc(100% - 2.5rem) 50%;
    background-size:
        5px 5px,
        5px 5px,
        1px 2.25em;
    background-repeat:no-repeat;
}

/* ---------- Select2 (tema RNF sobre default) ---------- */
.select2-container .select2-selection--single{
    height: 42px !important;
    border:1px solid #cfd8dc !important;
    border-radius:8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 40px !important;
    padding-left:12px !important;
    color:#222 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:40px !important;
    right:8px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single{
    border-color: var(--rnf-verde) !important;
    box-shadow: 0 0 0 .25rem var(--rnf-focus);
}
.select2-dropdown{
    border:1px solid var(--rnf-border) !important;
    border-radius:8px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Autocomplete jQuery UI lista */
.ui-autocomplete{
    max-height: 260px;
    overflow-y: auto;
    border:1px solid var(--rnf-border);
    border-radius:8px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* =====================================================
   BOTONES
===================================================== */
.rnf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    border:2px solid transparent;
    transition: transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.rnf-btn:active{ transform: translateY(1px); }

/* Principal (verde) */
.rnf-btn--primary{
    background: var(--rnf-verde);
    border-color: var(--rnf-verde);
    color:#fff;
    box-shadow: 0 8px 18px rgba(40,167,69,.20);
}
.rnf-btn--primary:hover{
    background: var(--rnf-verde-dark);
    border-color: var(--rnf-verde-dark);
    box-shadow: 0 12px 24px rgba(40,167,69,.28);
}

/* Secundario (naranja) */
.rnf-btn--secondary{
    background: var(--rnf-naranja);
    border-color: var(--rnf-naranja);
    color:#fff;
    box-shadow: 0 8px 18px rgba(253,126,20,.20);
}
.rnf-btn--secondary:hover{
    background: var(--rnf-naranja-dark);
    border-color: var(--rnf-naranja-dark);
    box-shadow: 0 12px 24px rgba(253,126,20,.28);
}

/* Bordeado */
.rnf-btn--outline{
    background: transparent;
    border-color: var(--rnf-naranja);
    color: var(--rnf-naranja);
}
.rnf-btn--outline:hover{
    background: rgba(253,126,20,.08);
    color: var(--rnf-naranja-dark);
}

/* Tamaños */
.rnf-btn--sm{ min-height:36px; padding: 6px 14px; font-weight:600; }
.rnf-btn--lg{ min-height:52px; padding: 12px 22px; }

/* Botoncitos redondos de acción (p. ej., editar/borrar) */
.rnf-iconbtn{
    width:40px; height:40px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--rnf-border);
    background:#fff; color:#555;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.rnf-iconbtn:hover{
    background:#f8fff9;
    color: var(--rnf-verde);
    border-color: var(--rnf-verde);
    box-shadow: 0 8px 20px rgba(40,167,69,.18);
}

/* =====================================================
   TABLAS
===================================================== */
.rnf-table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid var(--rnf-border);
    border-radius:10px;
    background:#fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.rnf-table{
    width:100%;
    margin-bottom:0;
}
.rnf-table thead th{
    background: #eef4ee;
    color:#2b2b2b;
    border-bottom:2px solid var(--rnf-border);
    font-weight:700;
}
.rnf-table tbody tr:nth-child(even){
    background:#fcfcfc;
}
.rnf-table tbody tr:hover{
    background:#f7fff9;
}

/* =====================================================
   ALERTAS
===================================================== */
.rnf-alert{
    border:1px solid var(--rnf-border);
    border-radius:10px;
    padding:14px 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    background:#fff;
}
.rnf-alert--success{
    border-left:4px solid var(--rnf-verde);
}
.rnf-alert--warning{
    border-left:4px solid var(--rnf-naranja);
}

/* =====================================================
   NAVBAR (sutil, sin romper lo actual)
===================================================== */
.navbar-graficas{
    transition: box-shadow .2s ease, padding .2s ease;
}
.top-nav-collapse{
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* =====================================================
   UTILIDADES
===================================================== */
.rnf-shadow-sm{ box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; }
.rnf-shadow-md{ box-shadow: 0 8px 24px rgba(0,0,0,.10) !important; }
.rnf-radius{ border-radius: var(--rnf-radius) !important; }
.rnf-muted{ color: var(--rnf-muted) !important; }
.rnf-kicker{ text-transform:uppercase; letter-spacing:.4px; font-size:.8rem; color: var(--rnf-naranja); font-weight:700; }



/* ====== Jerarquía tipográfica y secciones (scope rnf-form) ====== */

/* Título del formulario: más presencia */
.rnf-form .rnf-form__title{
    font-size: 1.25rem;
    letter-spacing: .3px;
}

/* Contenedor de sección: agrega una línea sutil arriba y respiro */
.rnf-section{
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rnf-border);
}
@media (min-width: 992px){
    .rnf-section{ margin-top: 22px; padding-top: 18px; }
}

/* Cabecera de sección (título + opcional subtítulo/meta) */
.rnf-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom: 10px;
}

/* Título de sección con barra de acento a la izquierda */
.rnf-section-title{
    display:flex;
    align-items:center;
    margin:0;
    font-weight: 700;
    color: var(--rnf-ink);
    font-size: 1.08rem;               /* > labels, < h1 */
    letter-spacing: .2px;
    text-transform: uppercase;
}
.rnf-section-title::before{
    content:'';
    width: 6px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--rnf-verde), #46c466);
    margin-right: 10px;
}

/* Meta de sección (texto auxiliar a la derecha) */
.rnf-section-meta{
    margin-left: 16px;
    font-size: .85rem;
    color: var(--rnf-muted);
}

/* Separador independiente (por si prefieres hr) */
.rnf-sep{
    height: 1px;
    border: 0;
    margin: 16px 0;
    background: linear-gradient(to right, transparent, #eaecee, transparent);
}

/* Mejora de labels y ayudas para que haya contraste de jerarquía */
.rnf-label{
    font-size: .93rem;
    font-weight: 600;
    color: #2a2a2a;
}
.rnf-help{
    font-size: .85rem;
    color: var(--rnf-muted);
}

/* Ajuste fino de tamaños dentro del formulario */
.rnf-form .rnf-kicker{               /* subtítulo pequeño en mayúsculas */
    font-size: .82rem;
    letter-spacing: .45px;
}
.rnf-form strong{                     /* valores destacados (ej. nombre) */
    font-weight: 700;
    color: #1f1f1f;
}

/* Espaciado entre filas para que no se vea “apilado” */
.rnf-form .form-row > [class*="col-"]{
    margin-bottom: 12px;
}
@media (min-width: 768px){
    .rnf-form .form-row > [class*="col-"]{ margin-bottom: 16px; }
}

/* Mostrar errores en Select2 cuando el <select> tiene error */
.select2-container .select2-selection.is-invalid{
    border-color:#dc3545 !important;
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.15) !important;
}

/* Asegura que el mensaje salga visible en BS4 con .is-invalid */
.invalid-feedback{ display:block; }

/* Header de tarjeta en verde: sinergia con el título del create */
.rnf-card__header--green{
    background: var(--rnf-verde);
    color:#fff;
    border-bottom-color: rgba(255,255,255,.25);
}
.rnf-card__header--green .rnf-card__title,
.rnf-card__header--green .rnf-kicker{ color:#fff; }

/* Tablas muy anchas y scroll cómodo (puedes dejarlos globales si se reutiliza) */
.rnf-table--wide{ min-width:1600px; }
.rnf-table-wrap--scroll{ max-height:70vh; overflow:auto; }



/* ===== Chips (pill) ================================================== */
.rnf-chip{
    display:inline-flex; align-items:center; border-radius:999px;
    padding:.35rem .75rem; font-size:.875rem; font-weight:600;
    background:#f3faf5;               /* fondo claro neutro por default */
    color:#1e7e34;                     /* texto verdoso */
    border:1px solid #e3f4e8;
}

/* Chips dentro de header verde: invertir para mejor contraste */
.rnf-card__header--green .rnf-chip{
    background: rgba(255,255,255,.18);
    color:#fff;
    border-color: rgba(255,255,255,.35);
}

/* ===== KPI cards ===================================================== */
.rnf-kpis{ display:grid; grid-template-columns: repeat(12,1fr); grid-gap:1rem; }
.rnf-kpi{
    grid-column: span 12;
    border:1px solid var(--rnf-border); border-radius:.5rem; padding:1rem;
    display:flex; align-items:flex-start; justify-content:flex-start; /* << izquierda */
    background:#fff;
}
.rnf-kpi__value{ font-size:2rem; font-weight:800; line-height:1; }
.rnf-kpi__label{ color:#5b6b5b; margin:0; }

@media (min-width: 768px){
    .rnf-kpi{ grid-column: span 6; }
}


.w-5{display:none;}
.rnf-pub{ display:flex; gap:16px; align-items:stretch; }
.rnf-pub__txt{ flex:1 1 auto; min-width:0; }
.rnf-pub__img{ flex:0 0 160px; display:flex; align-items:center; }
.rnf-pub__thumb{
    width:160px; height:100px; object-fit:cover; border-radius:8px; background:#f2f2f2;
}
@media (max-width: 575px){
    .rnf-pub{ flex-direction:column; }
    .rnf-pub__img{ flex:0 0 auto; }
    .rnf-pub__thumb{ width:100%; height:160px; }
}
.line-clamp-3{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}


/* ===== Grid de noticias (1–2–3 por fila) ===== */
.rnf-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px){ .rnf-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .rnf-grid{ grid-template-columns: repeat(3, 1fr); } }

/* ===== Tarjeta de noticia ===== */
.news-card{
    display:flex; flex-direction:column;
    height:100%;
    background:#fff;
    border:1px solid var(--rnf-border);
    border-radius: var(--rnf-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    overflow:hidden;
}

/* Imagen 16:9 con overlay */
.news-thumb{
    position:relative;
    aspect-ratio: 16/9;
    background:#f2f2f2;
    overflow:hidden;
}
.news-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
}

/* Acciones admin en la esquina superior derecha (sólo iconos) */
.news-admin-actions{
    position:absolute; top:8px; right:8px; display:flex; gap:6px;
}
.rnf-iconbtn--mini{
    width:32px; height:32px; padding:0; border-radius:999px; font-size:.85rem;
    background: rgba(255,255,255,.95);
}
.rnf-iconbtn--mini:hover{ background:#fff; }

/* Cuerpo */
.news-body{ padding:12px 14px 16px; display:flex; flex-direction:column; flex:1; }
.news-title{
    margin:0 0 4px 0; font-weight:700; color: var(--rnf-ink); line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.news-date{ color: var(--rnf-muted); margin-bottom:8px; display:block; }

/* Descripción (3 líneas) */
.news-desc{
    margin:0; color:#444;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Enlaces “invisibles” para que imagen, título y texto sean clickeables */
.news-link{ color:inherit; text-decoration:none; }
.news-link:hover .news-title{ text-decoration:underline; }

/* Ajuste: oculta la paginación .w-5 de Laravel */
.w-5{ display:none; }


/* Imagen de apoyo para Intensidad de fenofase */
.rnf-intensidad-img{
    width: 100%;
    aspect-ratio: 4 / 2;   /* relación 4:3 fija */
    object-fit: cover;
    border-radius: 8px;
    display: block;
}



/* =====================================================
   BOTONES ESPECIALES DIVULGACIÓN
===================================================== */

/* Botones claros sobre header verde */
.rnf-btn--ghost-light{
    background: #ffffff;
    color: var(--rnf-verde);
    border-color: rgba(255,255,255,.85);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.rnf-btn--ghost-light:hover{
    background: #fefefe;
    color: var(--rnf-verde-dark);
    border-color: #ffffff;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Variante “ámbar” para diferenciar (sin azul) */
.rnf-btn--ghost-amber{
    background: #fff7f0;
    color: var(--rnf-naranja-dark);
    border-color: #ffe0c2;
    box-shadow: 0 4px 12px rgba(253,126,20,.16);
}
.rnf-btn--ghost-amber:hover{
    background: #ffeddc;
    border-color: #ffd0a3;
}

/* Variante neutra para “Otros” */
.rnf-btn--ghost-neutral{
    background: #f8f9fa;
    color: #444;
    border-color: #dde2e6;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.rnf-btn--ghost-neutral:hover{
    background: #f1f3f5;
    border-color: #cfd4da;
}

/* =====================================================
   ACORDEÓN DIVULGACIÓN
===================================================== */

.rnf-accordion-item{
    border: 1px solid var(--rnf-border);
    border-radius: 10px;
    overflow: hidden;
}

/* Bordes de color (sin usar azul) */
.rnf-accordion-item--articulos{
    border-left: 4px solid var(--rnf-naranja);
}
.rnf-accordion-item--videos{
    border-left: 4px solid #6f42c1;      /* morado, sin azul */
}
.rnf-accordion-item--otros{
    border-left: 4px solid #20c997;      /* teal, sin azul */
}

/* Botón del acordeón, más alto y “card-like” */
.rnf-accordion-toggle{
    width: 100%;
    padding: 1.05rem 1.35rem;            /* más alto */
    min-height: 3.2rem;
    font-weight: 600;
    font-size: 0.98rem;
    color: #343a40;
    text-decoration: none !important;
    background: linear-gradient(135deg, #fefefe, #f6faf8);
    border: 0;
    border-bottom: 1px solid var(--rnf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rnf-accordion-toggle:hover{
    background: linear-gradient(135deg, #ffffff, #eef4ee);
}

/* Iconito redondo al inicio del título */
.rnf-accordion-label{
    display: inline-flex;
    align-items: center;
}

.rnf-accordion-icon{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.6rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    font-size: 1rem;
}

/* Colores de icono por sección (sin azul) */
.rnf-accordion-icon--articulos{
    background: rgba(253,126,20,.14);
    color: var(--rnf-naranja-dark);
}
.rnf-accordion-icon--videos{
    background: rgba(111,66,193,.15);
    color: #6f42c1;
}
.rnf-accordion-icon--otros{
    background: rgba(32,201,151,.15);
    color: #20c997;
}

/* Chevron con animación */
.rnf-accordion-chevron{
    transition: transform .2s ease;
}
.rnf-accordion-toggle[aria-expanded="true"] .rnf-accordion-chevron{
    transform: rotate(180deg);
}