/* Diseno moderno del panel (decision del propietario, 2026-08-29: no replicar el aspecto del
   original -- site.master/admin.master/hotel.master/cadena.master -- sino un diseno nuevo). No es
   fidelidad visual del original (eso queda descartado a proposito), pero tampoco es solo "funcional
   sin estilo": cubre la cabecera, el sidebar, la pagina de login, y estiliza de forma global los
   elementos HTML sueltos (table/form/input/button) que usan las ~35 vistas ya portadas como fragmentos
   minimos, para que se vean coherentes con el resto sin tener que reescribir cada vista una por una. */

/* Paleta corporativa real de Netubi: logo original de "netubi panel"
   (wwwroot/img/logo.png, descargado de https://panel.netubi.com/images/master/netubi-panel.png --
   el mismo panel legacy en produccion) + su cian de marca. El fondo oscuro (cabecera/sidebar/login)
   es un gris-pizarra, no negro -- un negro puro/casi-puro (probado en dos iteraciones anteriores,
   #0a0a0a y #171b21) quedaba demasiado duro a ojo del propietario. */
:root {
    --np-bg: #f5f6fa;
    --np-surface: #ffffff;
    --np-border: #e4e7ec;
    --np-text: #1f2430;
    --np-text-muted: #6b7280;
    --np-primary: #0090c0;
    --np-primary-dark: #006c94;
    --np-primary-soft: #e3f4fa;
    --np-brand-cyan: #00aeef;
    --np-sidebar-bg: #2b3542;
    --np-sidebar-text: #aeb4bd;
    --np-sidebar-text-active: #ffffff;
    --np-sidebar-hover: #37424f;
    --np-radius: 10px;
    --np-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
    color: var(--np-text);
    background: var(--np-bg);
    font-size: .9375rem;
    line-height: 1.5;
}

a {
    color: var(--np-primary);
}

/* ---------- Cabecera ---------- */

.np-header {
    height: 60px;
    background: var(--np-sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Logo original de "netubi panel" (wwwroot/img/logo.png, ver
   Netubi.Presentation.Panel/styles/img/logo-panel.png en el legacy) -- variante especifica para
   fondos oscuros ("netubi" en blanco + ".com" en cian, a diferencia de logo-netubi.png que lleva
   "netubi" en gris oscuro para fondos claros). Se usa tal cual, sin chapa ni repintado. */
.np-logo {
    display: flex;
    align-items: center;
    line-height: 0;
}

.np-logo img {
    display: block;
    height: 26px;
    width: auto;
}

.np-header-left {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.np-header-sep {
    color: #4a5566;
}

.np-header-hotel {
    color: #cfd2d7;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.np-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.np-user-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    color: #fff;
}

.np-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--np-brand-cyan);
    color: #06222c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex: none;
}

.np-user-role {
    color: #9a9ea4;
    font-size: .78rem;
}

.np-user a.np-logout {
    color: #cfd2d7;
    text-decoration: none;
    font-size: .85rem;
    border: 1px solid #3d4856;
    border-radius: 8px;
    padding: .35rem .75rem;
    transition: all .15s ease;
}

.np-user a.np-logout:hover {
    color: #fff;
    border-color: var(--np-brand-cyan);
    background: var(--np-sidebar-hover);
}

/* ---------- Estructura ---------- */

.np-shell {
    display: flex;
    min-height: calc(100vh - 60px);
}

.np-sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: var(--np-sidebar-bg);
    padding: 1.25rem .75rem 2rem;
    overflow-y: auto;
    /* Fijo respecto al viewport (no se desplaza con el scroll de .np-content) -- 60px es la altura de
       .np-header, tambien sticky, asi que el sidebar queda justo debajo y ocupa el resto de la
       pantalla con su propio scroll interno si hiciera falta. */
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    align-self: flex-start;
}

.np-menu-back {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--np-sidebar-text);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem .6rem;
    margin: 0 .25rem 1rem;
    border-radius: 8px;
    border: 1px solid #33364a;
}

.np-menu-back:hover {
    color: var(--np-sidebar-text-active);
    background: var(--np-sidebar-hover);
}

.np-menu-section {
    padding: 0 .25rem 1.1rem;
}

.np-menu-section h6 {
    margin: 0 0 .35rem .6rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6a6e83;
}

/* Grupos plegables (details/summary): solo el grupo de la seccion actual empieza abierto (ver
   EsGrupoActivo en _Layout.cshtml) -- asi caben todos los grupos sin scroll salvo que el usuario
   despliegue mas de uno. */
details.np-menu-section summary {
    margin: 0 0 .35rem .6rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6a6e83;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: .6rem;
}

details.np-menu-section summary::-webkit-details-marker {
    display: none;
}

details.np-menu-section summary::after {
    content: "▸";
    font-size: .7rem;
    transition: transform .15s ease;
}

details.np-menu-section[open] summary::after {
    transform: rotate(90deg);
}

details.np-menu-section summary:hover {
    color: var(--np-sidebar-text-active);
}

.np-menu-section a {
    display: flex;
    align-items: center;
    padding: .45rem .6rem;
    border-radius: 8px;
    color: var(--np-sidebar-text);
    text-decoration: none;
    font-size: .875rem;
    transition: background .12s ease, color .12s ease;
}

.np-menu-section a:hover {
    background: var(--np-sidebar-hover);
    color: var(--np-sidebar-text-active);
}

.np-submenu {
    margin: .1rem 0 .35rem .5rem;
    padding-left: .5rem;
    border-left: 1px solid #33364a;
}

.np-submenu a {
    font-size: .82rem;
    padding: .35rem .6rem;
}

.np-content {
    flex: 1 1 auto;
    padding: 1.75rem 2rem;
    /* Sin max-width a proposito (2026-08-30, peticion del propietario): que el contenido aproveche
       todo el ancho disponible junto al sidebar, en vez de quedarse encajonado a 1400px en pantallas
       anchas. */
    width: 100%;
    min-width: 0;
}

.np-content > h1,
.np-content > h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    letter-spacing: -.01em;
}

/* ---------- Elementos sueltos de las vistas portadas (tablas/formularios/botones) ----------
   La mayoria de vistas ya portadas son fragmentos HTML minimos (una <table> o <form> sin clases).
   Estilando el elemento base se consigue una apariencia coherente sin reescribir cada vista. */

.np-content table {
    width: 100%;
    background: var(--np-surface);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    overflow: hidden;
    box-shadow: var(--np-shadow);
}

.np-content table th,
.np-content table td {
    padding: .7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--np-border);
    font-size: .875rem;
}

.np-content table th {
    background: #fafafb;
    font-weight: 600;
    color: var(--np-text-muted);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
}

.np-content table tbody tr:last-child td {
    border-bottom: none;
}

.np-content table tbody tr:hover {
    background: var(--np-primary-soft);
}

.np-content table a {
    color: var(--np-primary);
    font-weight: 600;
    text-decoration: none;
}

.np-content table a:hover {
    text-decoration: underline;
}

.np-content form {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    padding: 1.5rem;
    box-shadow: var(--np-shadow);
    max-width: 640px;
}

/* Formularios de detalle con varias secciones (ej. InformacionGeneral/Index -- "Datos generales"),
   mas anchos que un formulario simple y organizados en grid en vez de un label+input por linea. */

.np-content form.np-form-card {
    max-width: 820px;
    padding: 0;
    overflow: hidden;
}

.np-form-section {
    padding: 1.5rem;
    border-bottom: 1px solid var(--np-border);
}

.np-form-section:last-of-type {
    border-bottom: none;
}

.np-form-section h2 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.np-form-note {
    color: var(--np-text-muted);
    font-size: .82rem;
    margin: .25rem 0 0;
}

.np-logo-preview {
    max-width: 150px;
    border-radius: 8px;
    border: 1px solid var(--np-border);
    display: block;
    margin-bottom: .75rem;
}

.np-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
}

.np-form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.np-field {
    display: block;
    margin-bottom: .85rem;
}

.np-field span {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--np-text-muted);
    margin-bottom: .3rem;
}

.np-field input {
    margin-bottom: 0;
}

.np-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.np-form-card button[type="submit"] {
    margin: 0 1.5rem 1.5rem;
}

@media (max-width: 640px) {
    .np-form-grid,
    .np-form-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Sin scope a .np-content a proposito: la pagina de login (sin _Layout, ver Default/Index.cshtml)
   tambien usa estos mismos estilos de input/boton/errores de validacion. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #d3d6dd;
    border-radius: 8px;
    font-size: .9rem;
    margin-bottom: .85rem;
    background: var(--np-surface);
    color: var(--np-text);
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--np-primary);
    box-shadow: 0 0 0 3px var(--np-primary-soft);
}

button,
input[type="submit"],
input[type="button"] {
    background: var(--np-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .55rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease;
    font-family: inherit;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--np-primary-dark);
}

.validation-summary-errors {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* ---------- Pagina de login (sin sidebar/cabecera) ---------- */

.np-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--np-sidebar-bg) 0%, var(--np-primary-dark) 100%);
}

.np-login-shell {
    width: 100%;
    max-width: 380px;
}

/* Cabecera oscura de la tarjeta de login, con el logo original sobre una chapa blanca (mismo motivo
   que en .np-logo de la cabecera del panel: el logo lleva texto oscuro, ilegible directamente sobre
   fondo oscuro). Visualmente forma un unico bloque con .np-login-card justo debajo (mismo ancho,
   esquinas superiores redondeadas / inferiores rectas para que encajen). */
.np-login-brand {
    background: var(--np-sidebar-bg);
    border-radius: 16px 16px 0 0;
    padding: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-login-brand img {
    display: block;
    height: 34px;
    width: auto;
}

.np-login-card {
    background: var(--np-surface);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    padding: 2rem 2.25rem 2.25rem;
    width: 100%;
}

.np-login-card form {
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
}

.np-login-card button {
    width: 100%;
    padding: .7rem 1rem;
}

/* ---------- Piezas reutilizables entre vistas ya rediseñadas pagina a pagina (empezando por
   Hoteles/Index -- ver comentario en esa vista) ---------- */

.np-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.np-filters {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: .6rem;
}

.np-filters select,
.np-filters input[type="text"] {
    width: auto;
    flex: 0 0 auto;
    min-width: 150px;
    margin-bottom: 0;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

.np-filters input[type="text"] {
    flex: 1 1 220px;
    min-width: 200px;
}

.np-filters .np-check-inline {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------- Calendario de disponibilidad (Views/DisponibilidadCalendario/Index.cshtml): tablero
   horizontal dia-a-dia, celdas editables con autoguardado -- ver comentario de esa vista. ---------- */

.np-cal-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.np-cal-toolbar label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    margin-bottom: 0;
}

.np-cal-toolbar select,
.np-cal-toolbar input[type="date"] {
    width: auto;
    margin-bottom: 0;
}

.np-cal-mensaje {
    font-size: .85rem;
    color: #16a34a;
}

.np-cal-mensaje.np-cal-error {
    color: #dc2626;
    font-weight: 600;
}

.np-cal-scroll {
    overflow-x: auto;
    border: 1px solid var(--np-border, #e2e8f0);
    border-radius: 8px;
}

.np-cal-table {
    border-collapse: collapse;
    width: max-content;
}

/* Prefijo ".np-content" a proposito: sin el, ".np-content table th, .np-content table td" (el estilo
   generico de tablas del panel, mas arriba en este fichero) le gana en especificidad a
   ".np-cal-table td" (un "table" con clase ancestro cuenta mas que un simple ".np-cal-table"), dejando
   su padding de tabla normal (.7rem 1rem) y alineacion a la izquierda -- que es justo el "hueco
   fantasma" alrededor de la celda que se seguia viendo. */
.np-content .np-cal-table th,
.np-content .np-cal-table td {
    border: 1px solid var(--np-border, #e2e8f0);
    padding: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    min-width: 68px;
}

.np-content .np-cal-table th {
    padding: 4px 6px;
}

.np-cal-table thead th {
    background: #eef1f5;
    position: sticky;
    top: 0;
    z-index: 1;
}

.np-content .np-cal-sticky {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
    text-align: left;
    font-weight: 600;
    min-width: 160px;
    padding: 4px 8px;
}

.np-cal-table thead .np-cal-sticky {
    z-index: 3;
    background: #eef1f5;
}

.np-cal-festivo {
    background: #fff7ed;
}

.np-cal-titulo {
    font-weight: 700;
    background: var(--np-primary, #2563eb);
    color: #fff;
    padding: .5rem .75rem;
    border-radius: 8px 8px 0 0;
    margin-top: 1.25rem;
}

.np-cal-scroll + .np-cal-titulo,
div#calContenedor > .np-cal-titulo:first-child {
    margin-top: 0;
}

.np-cal-table th {
    cursor: pointer;
    user-select: none;
}

.np-cal-cerrado-dia {
    background: #fecaca !important;
    text-decoration: line-through;
}

.np-content .np-cal-fila-lectura td {
    color: var(--np-text-muted, #64748b);
    font-style: italic;
    padding: 4px 6px;
}

/* Celda tipo Excel: por defecto solo texto (np-cal-valor); al hacer click o entrar el foco se
   sustituye por un input que ocupa el 100% de la celda -- ver celdaEditable() en la vista. */
.np-cal-valor {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    line-height: 28px;
    padding: 0 6px;
    cursor: text;
}

.np-cal-valor:hover,
.np-cal-valor:focus {
    background: var(--np-primary-soft);
    outline: none;
}

.np-cal-valor.np-cal-cerrado {
    background: #fef2f2;
    color: #b91c1c;
}

/* Selector reforzado (.np-cal-table td .np-cal-input, no solo .np-cal-input) para ganarle en
   especificidad al selector global "input[type=number]" (input+atributo = mas especifico que una
   sola clase) que si no dejaria el padding/border/margen-inferior grandes de un input de formulario
   normal, encogiendo la celda visualmente. */
.np-cal-table td .np-cal-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    padding: 0;
    margin: 0;
    font-size: .85rem;
    text-align: center;
    border: none;
    border-radius: 0;
    background: #fff;
    color: var(--np-text, #1e293b);
    /* Borde "hacia dentro" via box-shadow (no consume ancho/alto, a diferencia de border) para que el
       input ocupe EXACTAMENTE el tamaño de la celda cuando esta activo, sin dejar hueco visible. */
    box-shadow: inset 0 0 0 2px var(--np-primary, #2563eb);
    /* "textfield" solo existe como valor de -moz-appearance (para quitar los spinners en Firefox);
       en la propiedad estandar "appearance" no es un valor valido, asi que Chrome/Edge lo ignoraban y
       caian al render nativo por defecto (auto) -- con su propio padding y radio de borde internos,
       que es justo el "padding fantasma" que se seguia viendo. "none" desactiva ese chrome nativo del
       todo, dejando que manden nuestras propias reglas. */
    -moz-appearance: textfield;
    appearance: none;
}

.np-cal-table td .np-cal-input::-webkit-inner-spin-button,
.np-cal-table td .np-cal-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Cierres de disponibilidad (Views/DisponibilidadCierres/Index.cshtml): celdas de solo
   abrir/cerrar (sin edicion de precio/cupo), un bloque de tabla por habitacion/extra. ---------- */

.np-cal-meses-actual {
    font-weight: 600;
    text-transform: capitalize;
    min-width: 140px;
    text-align: center;
}

.np-cie-leyenda {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--np-text-muted);
    margin: 0 0 1rem;
}

.np-cie-muestra {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-left: .75rem;
}

.np-cie-muestra:first-child {
    margin-left: 0;
}

.np-cie-bloque {
    margin-bottom: 1.5rem;
}

/* A diferencia del calendario de precios/cupos (Views/DisponibilidadCalendario), aqui un mes entero
   (hasta 31 columnas, sin edicion de texto dentro) cabe perfectamente en el ancho -- sin scroll
   horizontal ni columnas anchas para inputs. */
.np-cie-bloque .np-cal-scroll {
    overflow-x: visible;
}

.np-content .np-cie-table th,
.np-content .np-cie-table td {
    min-width: 0;
    width: auto;
}

.np-cie-table {
    width: 100%;
    table-layout: fixed;
}

/* Prefijo ".np-content" a proposito (igual que en la seccion del calendario de precios/cupos, ver
   comentario alli): sin el, ".np-content .np-cal-table th, .np-content .np-cal-table td" (que
   fuerza white-space:nowrap) tiene MAS especificidad que ".np-cie-table .np-cal-sticky" a secas (un
   elemento "table"/"td" cuenta mas que dos clases sueltas), asi que ganaba el nowrap y las etiquetas
   largas ("Alojamiento y desayuno") se salian del ancho fijo de la columna y se solapaban
   visualmente con la primera columna de dias. */
.np-content .np-cie-table .np-cal-sticky {
    width: 170px;
    white-space: normal;
    line-height: 1.25;
}

.np-cie-table td.np-cie-celda {
    padding: 4px;
}

/* Las filas por regimen muestran el cupo (numero) dentro de la celda -- igual que el original
   ("disp.DisponiblesSA > 0 ? disp.DisponiblesSA : ''"); las filas "Todo el hotel"/"Todos los
   regimenes" no tienen cupo propio, asi que quedan como bloque de color solo. */
.np-cie-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 26px;
    border-radius: 5px;
    font-size: .8rem;
    font-weight: 600;
}

.np-cie-abierto {
    background: #d4eda3;
    color: #3f6212;
    cursor: pointer;
}

.np-cie-abierto:hover {
    background: #c3e588;
}

.np-cie-cerrado {
    background: #fecaca;
    color: #991b1b;
    cursor: pointer;
}

.np-cie-cerrado:hover {
    background: #fca5a5;
}

.np-cie-sindisponibilidad {
    background: #e4e7ec;
}

/* Estado mientras la celda espera la respuesta del servidor tras un click -- el color ya cambio de
   forma optimista (celdaCierre), esto solo indica visualmente "guardando" con un parpadeo suave;
   se revierte al color anterior si la llamada falla. */
.np-cie-marca.np-cie-guardando {
    animation: np-cie-pulso 1s ease-in-out infinite;
    cursor: wait;
}

@keyframes np-cie-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* ---------- Carga masiva de disponibilidad (Views/DisponibilidadDisponibilidad/Index.cshtml): una
   tarjeta por habitacion/extra con los campos a aplicar a todo un rango de fechas. ---------- */

.np-dm-dias {
    flex-wrap: wrap;
    row-gap: .4rem;
}

.np-dm-card {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    overflow: hidden;
    box-shadow: var(--np-shadow);
    margin-bottom: 1.25rem;
}

.np-dm-card .np-cal-titulo {
    border-radius: 0;
    margin-top: 0;
}

.np-dm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

.np-dm-campo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 0;
}

.np-dm-campo span {
    font-size: .78rem;
    color: var(--np-text-muted);
    font-weight: 600;
}

.np-dm-campo input {
    margin-bottom: 0;
}

.np-dm-acciones {
    position: sticky;
    bottom: 0;
    background: var(--np-bg);
    padding: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--np-border);
}

.np-check-inline {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    color: var(--np-text-muted);
}

.np-check-inline input {
    width: auto;
    margin: 0;
}

.np-btn-secondary {
    background: var(--np-surface);
    color: var(--np-text);
    border: 1px solid var(--np-border);
}

.np-btn-secondary:hover {
    background: #fafafb;
}

.np-col-check {
    text-align: center;
    width: 1%;
    white-space: nowrap;
}

.np-check-yes {
    color: #12b76a;
    font-weight: 700;
}

.np-check-no {
    color: #d0d5dd;
}

.np-sortable {
    cursor: pointer;
    user-select: none;
}

.np-sortable:hover {
    color: var(--np-text);
    background: #f0f1f5;
}

/* Pestañas (port de pestanas-*.ascx: hoteles.aspx, usuarios-netubi.aspx, etc. usaban la misma UI
   de pestañas horizontales bajo la cabecera de la seccion). */

.np-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--np-border);
    margin-bottom: 1.25rem;
}

.np-tabs .np-tab {
    padding: .6rem 1rem;
    color: var(--np-text-muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    text-transform: capitalize;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.np-tabs .np-tab:hover {
    color: var(--np-text);
}

.np-tabs .np-tab-active {
    color: var(--np-primary);
    border-bottom-color: var(--np-primary);
}

/* ---------- Listado de reservas (Views/Reservas/_Lista.cshtml + wwwroot/js/reservas-lista.js),
   compartido por Reservas Netubi y Reservas Motor. ---------- */

.rl-table th[data-order] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.rl-table th[data-order]::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .35rem;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--np-border);
}

.rl-table th.rl-orden-activo::after {
    border-bottom-color: var(--np-primary);
}

.rl-table th.rl-orden-activo.rl-desc::after {
    border-bottom: none;
    border-top: 5px solid var(--np-primary);
}

/* Filas compactas (menos padding/tamano de letra que una tabla normal) para que quepan mas reservas
   en pantalla, y sin salto de linea en ninguna columna (el huesped, sobre todo, se veia partido en
   varias lineas y hacia la fila mucho mas alta). */
.rl-table th,
.rl-table td {
    padding: .4rem .6rem;
    font-size: .82rem;
    white-space: nowrap;
}

/* El estilo generico ".np-content table" (mas arriba en este fichero) pone "overflow: hidden" para
   redondear las esquinas -- eso recorta/rompe la cabecera sticky (se veia una fila "fantasma"
   asomando por encima al hacer scroll). Aqui se desactiva ese overflow solo para esta tabla; se
   pierde el recorte de esquinas redondeadas, aceptable a cambio de que la cabecera fija funcione. */
.np-content .rl-table {
    overflow: visible;
    border-radius: 0;
}

/* Barra de filtros tambien fija, apilada justo debajo de .np-header (60px). */
.rl-toolbar {
    position: sticky;
    top: 60px;
    z-index: 10;
    background: var(--np-bg);
    padding: .75rem 0;
    margin-bottom: 0;
}

/* Cabecera de la tabla tambien fija, apilada justo debajo de la barra de filtros -- el "top" exacto
   se calcula en JS (reservas-lista.js) segun la altura real de .rl-toolbar, que varia si los filtros
   saltan de linea en pantallas estrechas; --rl-thead-top con un valor de reserva por si el JS aun no
   ha corrido. */
.rl-table thead th {
    position: sticky;
    top: var(--rl-thead-top, 120px);
    background: #fafafb;
    z-index: 5;
}

/* Peticiones es texto libre (a veces largo) -- se trunca a un ancho fijo con "..." y se ve completo
   al pasar el raton (title nativo, ver reservas-lista.js), en vez de ensanchar toda la tabla. */
.rl-table td.rl-peticiones {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* Fila normal (NO sticky) a proposito: reutilizar ".np-dm-acciones" (tambien sticky bottom:0, de la
   carga masiva de disponibilidad) aqui hacia que este boton y la barra de totales de abajo -- las dos
   pegadas al mismo borde inferior -- se solaparan entre si, tapando casi todo el boton. */
.rl-cargar-mas {
    padding: 1rem 0;
    text-align: center;
}

.rl-total-bar {
    position: sticky;
    bottom: 0;
    background: var(--np-surface);
    border-top: 2px solid var(--np-border);
    box-shadow: 0 -2px 6px rgba(16, 24, 40, .06);
    padding: .75rem 1rem;
    margin-top: -1px;
    display: flex;
    gap: 2rem;
    font-weight: 700;
    font-size: .875rem;
}

/* ---------- Mensajes (Views/Mensajes/_Lista.cshtml + wwwroot/js/mensajes-lista.js), compartido por
   los 4 modos (entrada/salida/entradaAdmin/salidaAdmin). ---------- */

.ml-compose {
    margin-bottom: 1.5rem;
}

.ml-autocomplete {
    position: relative;
}

.ml-hotel-sugerencias {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--np-shadow);
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}

.ml-hotel-sugerencias li {
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .875rem;
}

.ml-hotel-sugerencias li:hover {
    background: var(--np-primary-soft);
}

.ml-filas {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    overflow: hidden;
    box-shadow: var(--np-shadow);
}

.ml-fila {
    border-bottom: 1px solid var(--np-border);
}

.ml-fila:last-child {
    border-bottom: none;
}

.ml-fila-cabecera {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1rem;
    cursor: pointer;
}

.ml-fila-cabecera:hover {
    background: var(--np-bg);
}

.ml-fila.ml-no-visto .ml-fila-cabecera {
    font-weight: 700;
}

.ml-fila.ml-no-visto .ml-asunto-texto::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--np-primary);
    margin-right: .5rem;
}

.ml-fecha {
    flex: 0 0 140px;
    color: var(--np-text-muted);
    font-size: .8rem;
    font-weight: 400;
}

.ml-hotel-nombre {
    flex: 0 0 160px;
    font-size: .85rem;
}

.ml-asunto-texto {
    flex: 1 1 auto;
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-eliminar {
    flex: none;
    background: none;
    color: #dc2626;
    border: 1px solid #f3c6c6;
    padding: .25rem .6rem;
    font-size: .78rem;
    font-weight: 600;
}

.ml-eliminar:hover {
    background: #fef2f2;
}

.ml-cuerpo-texto {
    padding: 0 1rem 1rem 1rem;
    font-size: .875rem;
    color: var(--np-text);
}

.ml-cuerpo-texto p {
    margin: 0 0 .5rem;
}

.ml-cuerpo-texto p:last-child {
    margin-bottom: 0;
}

/* ---------- Facturas admin (Views/FacturasAdmin/Index.cshtml + wwwroot/js/facturas-admin.js). ---------- */

#facturasAdmin .np-form-card {
    margin-bottom: 1.5rem;
    padding: 0;
}

#facturasAdmin .np-form-card summary {
    padding: .9rem 1.25rem;
    cursor: pointer;
    border-radius: var(--np-radius) var(--np-radius) 0 0;
    margin-top: 0;
}

#facturasAdmin .np-form-card[open] summary {
    border-bottom: 1px solid var(--np-border);
}

#facturasAdmin .np-form-grid {
    padding: 1.25rem;
}

#facturasAdmin .np-form-section button {
    margin-top: .5rem;
}

.fa-fila-expandible {
    cursor: pointer;
}

.fa-fila-expandible:hover {
    background: var(--np-bg);
}

.fa-fila-detalle td {
    background: var(--np-bg);
    padding: 0 !important;
}

.fa-lineas {
    list-style: none;
    margin: 0;
    padding: .75rem 1.25rem;
}

.fa-lineas li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    font-size: .82rem;
    border-bottom: 1px dashed var(--np-border);
}

.fa-lineas li:last-child {
    border-bottom: none;
}

/* ---------- Modal generico (Views/FacturasAdmin/Index.cshtml de momento, pero pensado para
   reutilizarse en cualquier otra pantalla que necesite un dialogo con formulario). ---------- */

/* ":not([hidden])" a proposito: una regla de autor con solo ".np-modal-overlay { display: flex }"
   ganaria a la regla por defecto del navegador "[hidden] { display: none }" (misma especificidad,
   pero el CSS de autor gana al del user-agent), y el modal se veria aunque tuviera el atributo
   "hidden" puesto. */
.np-modal-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.np-modal {
    background: var(--np-surface);
    border-radius: var(--np-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
}

.np-modal h2 {
    margin: 0 0 1.1rem;
    font-size: 1.1rem;
}

.np-modal-acciones {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.np-modal-acciones .np-modal-cancelar {
    background: none;
    color: var(--np-text-muted);
    border: 1px solid var(--np-border);
}

.np-modal-acciones .np-modal-cancelar:hover {
    background: var(--np-bg);
    color: var(--np-text);
}

.fa-link-pdf {
    display: inline-block;
    margin-right: .5rem;
    padding: .3rem .6rem;
    border: 1px solid var(--np-border);
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.fa-link-pdf:hover {
    background: var(--np-bg);
}