/* =============================================================================
   renovada.css — renovada ligera de la interfaz con la marca de Motel Paraíso
   (noviembre 2026). Va AL FINAL de _AdminLayout, _MobileLayout y _SiteLayout;
   para quitarla basta borrar ese <link>. No cambia menús, pantallas ni flujos.

   Colores tomados del logo: verde olivo del óvalo y las letras, verde pálido del
   fondo y el coral de la flor. Los colores de ESTADO de los cuartos (limpio,
   revisado, ocupado, sucio, limpiando, bloqueado) NO se tocan: el personal los
   reconoce de un vistazo.
============================================================================= */

:root {
    --verde: #5b7a2b;          /* principal (botones, barra de acciones) */
    --verde-osc: #46601f;      /* hover / presionado */
    --verde-claro: #eef3e1;    /* fondos suaves, activo */
    --verde-medio: #c9d9a4;
    --coral: #d9534f;          /* acento de la flor (alertas, borrar) */
    --menu: #1d2618;           /* menú lateral */
    --menu-2: #263220;
    --menu-texto: rgba(255, 255, 255, .72);
    --fondo: #f3f5ef;
    --panel: #ffffff;
    --texto: #1f2a1b;
    --suave: #667060;
    --linea: #e1e6d8;
    --radio: 10px;
    --sombra: 0 1px 2px rgba(29, 38, 24, .06), 0 4px 14px rgba(29, 38, 24, .06);
}

/* ---------- Base ---------- */
/* El fondo del body queda del color del menú: así el menú lateral (absoluto) se ve
   completo hasta abajo aunque la página sea más corta o más larga. */
body:not(.sitio):not(.movil) { background-color: var(--menu) !important; }
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}
body.sitio { background-color: var(--fondo); }
#page-wrapper { background-color: var(--fondo); }
a { color: var(--verde); }
a:hover, a:focus { color: var(--verde-osc); }
::selection { background: var(--verde-medio); }

/* ---------- Barra superior ---------- */
.navbar-default {
    background: #fff;
    border: 0;
    box-shadow: inset 0 -1px 0 var(--linea);   /* línea inferior por dentro: no suma altura */
}
/* En pantallas grandes la barra mide exactamente 64 px, lo mismo que el margen superior
   del menú lateral (.sidebar margin-top: 64px). Antes la parte derecha la estiraba a 69 px
   y el menú quedaba 5 px arriba de la barra verde. */
@media (min-width: 768px) {
    nav.navbar.navbar-static-top { height: 64px; min-height: 64px; }
    .navbar-top-links { height: 64px; display: flex; align-items: center; margin-right: 12px !important; }
    .navbar-top-links > li > a { padding-top: 8px !important; padding-bottom: 8px !important; }
}
.navbar.m-t-md { margin-top: 0 !important; }
/* En celular la franja "Ir a versión móvil" va fija arriba: se le deja su espacio. */
@media (max-width: 767px) { .navbar.m-t-md { margin-top: 22px !important; } }
.banner-movil { background: var(--verde-osc) !important; font-size: 13px; line-height: 22px; }
.navbar-separator { display: none !important; }       /* franja oscura de arriba */
.navbar-default .navbar-title {
    font-weight: 600;
    font-size: 19px;
    color: var(--texto);
    letter-spacing: -.01em;
}
.navbar-default .navbar-brand img { max-height: 44px !important; }
.navbar-top-links > li > a {
    color: var(--suave) !important;
    font-weight: 500;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.navbar-top-links > li > a:hover { background: var(--verde-claro) !important; color: var(--texto) !important; border-radius: 8px; }

/* Avatar con inicial */
.avatar-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}
.dropdown-menu {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 6px;
}
.dropdown-menu > li > a { border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--verde-claro); color: var(--texto); }

/* ---------- Menú lateral ---------- */
.sidebar, .sidebar .sidebar-nav { background-color: var(--menu) !important; }
.sidebar ul li { border-bottom: 0 !important; }
.sidebar ul li a {
    color: var(--menu-texto) !important;
    font-weight: 500;
    border-left: 3px solid transparent;
}
.sidebar ul li a:hover, .sidebar ul li a:focus {
    background-color: var(--menu-2) !important;
    color: #fff !important;
}
.sidebar ul li a.active {
    background-color: rgba(201, 217, 164, .12) !important;
    color: #fff !important;
    border-left-color: var(--verde-medio);
}
.sidebar .nav-list { background-color: rgba(0, 0, 0, .18); }
.sidebar .nav-header > a { cursor: pointer; }
.sidebar ul li a .fa { color: var(--verde-medio); opacity: .9; }
.sidebar-collapse { background-color: var(--menu-2) !important; }
.sidebar .hecho-por-li a.hecho-por { white-space: nowrap; text-transform: none; }
/* Crédito pegado al fondo del menú lateral (pantallas grandes): el menú ocupa todo el alto
   y el crédito va al final. Si el menú abierto es más alto que la pantalla, queda después
   de la última opción (nunca encima). */
@media (min-width: 768px) {
    .sidebar:not(.collapsed) { min-height: calc(100vh - 64px); }
    .sidebar:not(.collapsed) .sidebar-nav { min-height: calc(100vh - 64px); }
    .sidebar:not(.collapsed) #side-menu { display: flex; flex-direction: column; min-height: calc(100vh - 64px); }
    .sidebar:not(.collapsed) #side-menu::before, .sidebar:not(.collapsed) #side-menu::after { display: none; }
    .sidebar:not(.collapsed) #side-menu > li.hecho-por-li { margin-top: auto; padding-bottom: 18px; }
}
/* Íconos de los formularios (antes azules) */
.tile-avatar, .tile-avatar .fa, .modal .tile-avatar i { color: var(--verde) !important; }
.sidebar-collapse .btn-sidebar-collapse:hover { background-color: rgba(255, 255, 255, .06) !important; }

/* ---------- Barra de acciones (antes azul) ---------- */
.mono-toolbar .mono-toolbar-inner-default { background: var(--verde) !important; }
.mono-toolbar.shadow-z-1 { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.mono-toolbar .btn-link { color: #fff !important; font-weight: 500; }
.mono-toolbar .btn-link:hover, .mono-toolbar .btn-link:focus {
    background: rgba(255, 255, 255, .14) !important;
    text-decoration: none;
}
.mono-toolbar .mono-toolbar-inner-active { background: var(--verde-claro) !important; }
.mono-toolbar .mono-toolbar-inner-active .btn-link { color: var(--texto) !important; }

/* ---------- Paneles, cuadros y tablas ---------- */
.panel {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.panel-default > .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--linea);
    font-weight: 600;
}
.table > thead > tr > th {
    color: var(--suave);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--linea) !important;
    background: #fafbf7;
}
.table > tbody > tr > td { border-top: 1px solid var(--linea) !important; vertical-align: middle !important; }
.table > tbody > tr:hover > td { background-color: #f7f9f2; }
.table-footer { padding: 10px 16px; border-top: 1px solid var(--linea); }

/* ---------- Botones ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary, .btn-action, .btn-info {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-action:hover, .btn-action:focus,
.btn-info:hover, .btn-info:focus {
    background-color: var(--verde-osc) !important;
    border-color: var(--verde-osc) !important;
}
.btn-default { border-color: var(--linea); color: var(--texto); }
.btn-default:hover { background: var(--verde-claro); border-color: var(--verde-medio); }
.btn-danger { background-color: var(--coral); border-color: var(--coral); }

/* ---------- Formularios ---------- */
.form-control:focus {
    border-color: var(--verde) !important;
    box-shadow: 0 1px 0 0 var(--verde) !important;
}
/* Sólo etiquetas de formularios: los <label> de las tarjetas de cuartos (número) deben quedar como están. */
.form-group > label, .control-label, .form-inline label { color: var(--suave); font-weight: 500; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--verde) !important; }

/* ---------- Modales ---------- */
.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--linea); }
.modal-header .modal-title { font-weight: 600; }
.modal-footer { border-top: 1px solid var(--linea); background: #fafbf7; }

/* ---------- Pestañas ---------- */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: var(--verde-osc);
    border-bottom-color: var(--verde);
}

/* ---------- Tablero de cuartos: sólo forma, NO colores de estado ---------- */
#page-wrapper .container-fluid { padding-top: 4px; }

/* ---------- Vista móvil ---------- */
.movil-top .mono-toolbar-inner-default { background: var(--verde) !important; }
.movil-top .title span { font-weight: 600; }
.movil-top .dropdown-toggle { border-radius: 8px; }
.pie-movil {
    padding: 22px 16px 28px;
    text-align: center;
    color: var(--suave);
    font-size: 12px;
}

/* ---------- Login partido ---------- */
body.sitio { background: var(--fondo); }
.login-partido {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100vh;
}
.login-portada {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    color: #fff;
    background:
        radial-gradient(900px 420px at 10% 115%, rgba(217, 83, 79, .16), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(201, 217, 164, .25), transparent 60%),
        linear-gradient(160deg, #46601f 0%, #2f421a 55%, #1d2618 100%);
    overflow: hidden;
}
.login-portada-logo {
    background: #fff;
    border-radius: 18px;
    padding: 14px 18px;
    width: 220px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.login-portada-logo img { width: 100%; height: auto; display: block; }
.login-portada h1 {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    max-width: 440px;
    color: #fff !important;
}
.login-portada p { color: rgba(255, 255, 255, .78); font-size: 16px; max-width: 420px; margin: 0; }
.login-lado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(24px, 6vw, 88px);
    background: #fff;
}
.login-caja { width: 100%; max-width: 380px; margin: 0 auto; }
.login-caja h2 { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--texto); }
.login-caja .login-sub { color: var(--suave); margin: 0 0 28px; }
.login-caja .form-group { margin-bottom: 18px; }
.login-caja label { color: var(--texto); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.login-caja .form-control {
    height: 46px;
    border: 1px solid #cfd6c4 !important;
    border-radius: 10px !important;
    padding: 10px 14px;
    background: #fff;
    box-shadow: none !important;
    font-size: 15px;
}
.login-caja .form-control:focus { border-color: var(--verde) !important; box-shadow: 0 0 0 3px rgba(91, 122, 43, .18) !important; }
.campo-contrasena { position: relative; }
.campo-contrasena .form-control { padding-right: 48px; }
.btn-ver-contrasena {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--suave);
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.btn-ver-contrasena:hover, .btn-ver-contrasena:focus { background: var(--verde-claro); color: var(--texto); outline: none; }
.login-caja .btn-entrar { width: 100%; height: 46px; font-size: 15px; font-weight: 600; border-radius: 10px; }
.login-nota { font-size: 12.5px; color: var(--suave); margin-top: 14px; }
.login-olvide { display: inline-block; margin-top: 18px; font-weight: 500; }
.login-pie {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    align-items: center;
    color: var(--suave);
    font-size: 12px;
}
.login-caja .alert { border-radius: 10px; }

@media (max-width: 860px) {
    .login-partido { grid-template-columns: 1fr; }
    .login-portada { padding: 28px 24px; min-height: 0; }
    .login-portada h1 { font-size: 24px; margin-top: 18px; }
    .login-portada p { font-size: 14px; }
    .login-portada-logo { width: 160px; padding: 10px 14px; }
    .login-portada-extra { display: none; }
    .login-lado { padding: 28px 20px 24px; }
}

/* Páginas sueltas con _SiteLayout (404, error, recuperar contraseña) */
body.sitio .page-header h1 { font-weight: 700; }
body.sitio .lead { color: var(--texto) !important; }

/* ---------- Contraste (revisado con axe) ---------- */
.field-validation-error, .text-danger, .help-block.text-danger { color: #a8322c !important; }
.pie-movil .hecho-por, .login-pie .hecho-por, body.sitio .pie-sitio .hecho-por { color: #4f5a48; opacity: 1; }
.pie-movil .hecho-por img, .login-pie .hecho-por img, body.sitio .pie-sitio .hecho-por img { opacity: .9; }
body.sitio .pie-sitio, body.sitio .pie-sitio small, body.sitio .pie-sitio a { color: var(--suave) !important; }
body.sitio .panel p, body.sitio .panel .text-muted { color: var(--suave) !important; }
.nav-tabs > li > a { color: var(--verde-osc); }
.text-success { color: #2e7d32 !important; }                 /* precios e importes (antes #4caf50) */
.text-muted, .text-black-secondary, .checkbox-inline, small.text-muted { color: #565e51 !important; }
#page-wrapper .lead { color: #4f5a48; }

/* ---------- Accesibilidad ---------- */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}