<!-- {{--
    Layout que extiende header_nuevo_generico y agrega:
      - Rectangulo verde superior (con titulo y, opcionalmente, tabs de navegacion)
      - Contenedor central con caja de contenido

    USO EN UNA VISTA:
    -----------------
    @extends('header_panel_generico')
    ... Aca irian los estilos propios de la vista ...
    @section('styles_panel')
        ... tus estilos aca ...
        <link rel="stylesheet" href="{{ URL::asset('/Libreria_CA/css/estilos_panel_generico.css') }}">
    @endsection
    @section('titulo_panel', 'Mi Titulo')

    (Opcional) Tabs de navegacion dentro del rectangulo (Como en dashboard de api):
    @section('tabs_panel')
        <ul class="nav nav-tabs border-0">
            <li class="nav-item"><a class="nav-link api-nav active fs-7 me-1" href="#">Tab 1</a></li>
            <li class="nav-item"><a class="nav-link api-nav text-white fs-7" href="#">Tab 2</a></li>
        </ul>
    @endsection

    (Opcional) Si queres controlar el id del wrapper interno:
    @section('id_contenedor', 'mi-dashboard')

    Contenido principal del panel (lo que va dentro del contenedor blanco):
    @section('contenido_panel')
        <div class="content-box">
            ... tu contenido aca ...
        </div>
    @endsection

    Nota: en este comentario los @ van pegados al nombre, los puse separados
    solo para no romper Blade. En tu vista real escribilos pegados.
--}} -->

@extends('header_nuevo_generico')

@section('styles')
    {{-- Estilos base del panel generico --}}
    <link rel="stylesheet" href="{{ URL::asset('/Libreria_CA/css/vista_generica.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('/css/estilos_fidelitas.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('/css/fidelitas/estilos_fidelitasV2.css') }}">

    {{-- Permitir que la vista hija agregue sus propios estilos --}}
    @yield('styles_panel')
@endsection

@section('main')
    <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">

    {{-- Rectangulo verde superior con titulo + tabs opcionales --}}
    <div class="rectangle_bg_backend align-items-start pt-5 pb-5 mt-5 mb-5">
        <div class="d-flex flex-column w-100">
            <div class="d-flex align-items-center mt-2">
                <h1 class="title_page mb-0" style="font-size:28px !important; text-transform: uppercase;">@yield('titulo_panel', 'Panel')</h1>

                {{-- Acciones opcionales del header (botones a la derecha del titulo) --}}
                @hasSection('acciones_header_panel')
                    <div class="ms-auto">
                        @yield('acciones_header_panel')
                    </div>
                @endif
            </div>

            {{-- Tabs opcionales --}}
            @hasSection('tabs_panel')
                <div class="nav-apis nav-container pt-4">
                    @yield('tabs_panel')
                </div>
            @endif
        </div>
    </div>

    {{-- Contenedor central con caja de contenido --}}
    <div class="d-flex justify-content-center align-items-start w-100" id="@yield('id_contenedor', 'panel-contenedor')">
        <div class="content-target" @hasSection('tabs_panel')style="margin-top: -265px !important;"@endif id="@yield('id_content_target', 'contenedor-tabla-panel')">
            @yield('contenido_panel')
        </div>
    </div>

    {{-- Seccion extra para modales, popups, etc. fuera del contenedor --}}
    @yield('extras_panel')
@endsection

@section('funcionesJS')
    @yield('funcionesJS_panel')
@endsection
