/* ============================================================
   BANDA: menu_zona_privada
   Archivo: banda_cabecero_zona_clientes.html.twig
   ============================================================ */

.menu_zona_privada .alineacion_menu_privado {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu_zona_privada .nombre_zp {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.menu_zona_privada .nombre_zp i {
    color: #b1c8ea;
    font-size: 15px;
}

.menu_zona_privada .menu_privado {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
}

.menu_zona_privada .menu_privado li {
    display: inline-flex;
    align-items: center;
}

.menu_zona_privada .menu_privado li a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.menu_zona_privada .menu_privado li a:hover {
    background-color: #0047bb;
    color: #fff;
}

.menu_zona_privada .menu_privado li a .fa-power-off {
    font-size: 15px;
    color: #b1c8ea;
    transition: color 0.2s;
}

.menu_zona_privada .menu_privado li a:hover .fa-power-off {
    color: #fff;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (width <= 575.98px) {

    .menu_zona_privada .nombre_zp {
        font-size: 13px;
    }

    .menu_zona_privada .menu_privado li a {
        padding: 6px 10px;
        font-size: 12px;
    }
}


/* ============================================================
   BANDA: facturas_zona_privada
   Archivo: banda_facturas_zona_clientes.html.twig
   ============================================================ */

.facturas_zp {
    padding: 48px 0 64px;
    background-color: #FAFBFA;
}

.facturas_zp .titular_facturas {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid #b1c8ea;
}

.facturas_zp .titular_facturas i {
    color: #0047bb;
    font-size: 24px;
}

/* Contenedor de la tabla */
.facturas_zp .tabla_facturas_contenedor {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 71, 187, 0.08);
    padding: 24px;
}

/* DataTables wrapper */
.facturas_zp .dataTables_wrapper {
    font-size: 14px;
    color: #666;
}

/* Barra superior: buscador y selector de filas */
.facturas_zp .dataTables_wrapper .dataTables_length,
.facturas_zp .dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
}

.facturas_zp .dataTables_wrapper .dataTables_filter input,
.facturas_zp .dataTables_wrapper .dataTables_length select {
    border: 1px solid #b1c8ea;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 13px;
    color: #444;
    outline: none;
    transition: border-color 0.2s;
}

.facturas_zp .dataTables_wrapper .dataTables_filter input:focus,
.facturas_zp .dataTables_wrapper .dataTables_length select:focus {
    border-color: #0047bb;
}

/* Tabla */
.facturas_zp table.tabla_facturas {
    border-collapse: collapse;
    width: 100% !important;
}

.facturas_zp table.tabla_facturas thead th {
    background-color: #0047bb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 14px;
    border-bottom: none;
}

.facturas_zp table.tabla_facturas thead th.sorting,
.facturas_zp table.tabla_facturas thead th.sorting_asc,
.facturas_zp table.tabla_facturas thead th.sorting_desc {
    background-color: #0047bb;
}

.facturas_zp table.tabla_facturas thead th.sorting:before,
.facturas_zp table.tabla_facturas thead th.sorting:after,
.facturas_zp table.tabla_facturas thead th.sorting_asc:before,
.facturas_zp table.tabla_facturas thead th.sorting_asc:after,
.facturas_zp table.tabla_facturas thead th.sorting_desc:before,
.facturas_zp table.tabla_facturas thead th.sorting_desc:after {
    opacity: 0.6;
}

.facturas_zp table.tabla_facturas tbody tr {
    transition: background-color 0.15s;
}

.facturas_zp table.tabla_facturas tbody tr td {
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f9;
    vertical-align: middle;
    font-size: 14px;
    color: #444;
}

.facturas_zp table.tabla_facturas tbody tr:last-child td {
    border-bottom: none;
}

.facturas_zp table.tabla_facturas tbody tr:hover {
    background-color: #f0f5ff;
}

/* Etiquetas de estado */
.facturas_zp .etiqueta_estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.facturas_zp .etiqueta_estado.estado_pagada {
    background-color: #e6f9f0;
    color: #1a7f4b;
}

.facturas_zp .etiqueta_estado.estado_pendiente {
    background-color: #fff4e5;
    color: #b45309;
}

/* Botón descargar PDF */
.facturas_zp .btn_descargar_pdf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background-color: #0047bb;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}

.facturas_zp .btn_descargar_pdf:hover {
    background-color: #03378c;
    color: #fff;
}

.facturas_zp .sin_accion {
    color: #bbb;
}

/* Botón pagar factura */
.facturas_zp .btn_pagar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background-color: #1a7f4b;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}

.facturas_zp .btn_pagar:hover {
    background-color: #145f38;
    color: #fff;
}

/* Pie de tabla: info y paginación */
.facturas_zp .dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: #888;
    padding-top: 12px;
}

.facturas_zp .dataTables_wrapper .dataTables_paginate {
    padding-top: 10px;
}

.facturas_zp .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: #0047bb !important;
    border: 1px solid transparent !important;
    transition: background-color 0.15s, border-color 0.15s;
}

.facturas_zp .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f0f5ff !important;
    border-color: #b1c8ea !important;
    color: #0047bb !important;
}

.facturas_zp .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.facturas_zp .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0047bb !important;
    border-color: #0047bb !important;
    color: #fff !important;
}

.facturas_zp .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.facturas_zp .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #bbb !important;
    cursor: default;
}

/* Medium devices (tablets, 768px and up) */
@media (768px <= width <= 991.98px) {

    .facturas_zp {
        padding: 36px 0 48px;
    }

    .facturas_zp .titular_facturas {
        font-size: 22px;
    }

    .facturas_zp .tabla_facturas_contenedor {
        padding: 16px;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (width <= 575.98px) {

    .facturas_zp {
        padding: 28px 0 40px;
    }

    .facturas_zp .titular_facturas {
        font-size: 19px;
        gap: 8px;
    }

    .facturas_zp .tabla_facturas_contenedor {
        padding: 12px;
        border-radius: 6px;
    }

    .facturas_zp table.tabla_facturas thead th,
    .facturas_zp table.tabla_facturas tbody tr td {
        padding: 9px 8px;
        font-size: 12px;
    }

    .facturas_zp .dataTables_wrapper .dataTables_length,
    .facturas_zp .dataTables_wrapper .dataTables_filter {
        text-align: left;
        float: none;
    }
}