@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --color-fondo: #111111;
    --color-sidebar: #161616;
    --color-superficie: #1E1E1E;
    --color-superficie-hover: #262626;
    --color-texto: #FFFFFF;
    --color-texto-suave: #BDBDBD;
    --color-borde: rgba(255,255,255,.06);
    --color-acento: #C9A35A;
    --color-acento-hover: #D8B66B;
    --color-acento-texto: #1a1a1a;
    --color-exito: #57C36A;
    --color-exito-bg: rgba(87,195,106,.14);
    --color-alerta: #DDB15A;
    --color-alerta-bg: rgba(221,177,90,.14);
    --color-ocupado: #E06060;
    --color-ocupado-bg: rgba(224,96,96,.14);
    --color-info: #6EA8FE;
    --color-info-bg: rgba(110,168,254,.14);
    --radio: 16px;
    --radio-sm: 10px;
    --sombra: 0 8px 24px rgba(0,0,0,.35);
    --sombra-hover: 0 14px 32px rgba(0,0,0,.45);
    --topbar-h: 58px;
    --sidebar-w: 220px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    width: 100%;
}

.icono { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icono-sm { width: 16px; height: 16px; }
.icono-lg { width: 28px; height: 28px; }

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--color-sidebar);
    color: #fff;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    border-right: 1px solid var(--color-borde);
}
.sidebar.abierto { transform: translateX(0); box-shadow: 6px 0 24px rgba(0,0,0,0.45); }

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 12px;
}
.sidebar-logo {
    width: 42px; height: 42px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-fondo);
    border-radius: 10px;
}
.sidebar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sidebar-title { font-weight: 700; font-size: 13px; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--color-acento); }
.sidebar-sub { font-size: 12px; color: var(--color-texto-suave); margin-top: 2px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; flex: 1; overflow-y: auto; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radio-sm);
    color: var(--color-texto-suave);
    font-size: 14px;
    font-weight: 500;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.nav-item:hover { background: var(--color-superficie-hover); color: #fff; }
.nav-item.activo {
    background: var(--color-acento);
    color: var(--color-acento-texto);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(201,163,90,.25);
}
.nav-item.activo .icono { color: var(--color-acento-texto); }
.nav-icon { width: 22px; display: flex; align-items: center; justify-content: center; }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--color-borde); display: flex; flex-direction: column; gap: 2px; }
.nav-item-salir { color: #e29c9c; }
.nav-item-salir:hover { background: var(--color-ocupado-bg); color: var(--color-ocupado); }

.sidebar-credito {
    display: block;
    text-align: center;
    font-size: 10.5px;
    color: var(--color-texto-suave);
    padding: 10px 14px 2px;
    opacity: .6;
    transition: opacity .18s ease, color .18s ease;
}
.sidebar-credito:hover { opacity: 1; color: var(--color-acento); }

.overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.overlay.visible { opacity: 1; pointer-events: auto; }

/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    height: var(--topbar-h);
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    display: flex; align-items: center; gap: 12px;
    padding: 0 8px 0 4px;
}
.btn-icon {
    background: none; border: none;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radio-sm);
    color: #fff;
}
.btn-icon:active, .btn-icon:hover { background: var(--color-superficie-hover); }
.hamburger, .hamburger::before, .hamburger::after {
    display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px;
}
.hamburger { position: relative; }
.hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; }
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

.topbar-title { font-size: 17px; font-weight: 700; margin: 0; }

.contenido { padding: 16px 16px 40px; max-width: 1280px; margin: 0 auto; }

/* ---------- Header del dashboard ---------- */
.cabecera-dash {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    border-radius: var(--radio);
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    min-height: 96px;
}
.cabecera-dash-texto { padding: 20px 24px; flex: 1; min-width: 0; }
.cabecera-dash-texto h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.cabecera-dash-texto p { margin: 0; color: var(--color-texto-suave); font-size: 13.5px; }
.cabecera-dash-banner {
    flex-shrink: 0;
    width: 320px;
    align-self: stretch;
    background:
        radial-gradient(circle at 30% 30%, rgba(201,163,90,.35), transparent 55%),
        radial-gradient(circle at 75% 65%, rgba(201,163,90,.18), transparent 60%),
        linear-gradient(135deg, #0c0c0c, #1c1c1c 60%, #24201a);
    position: relative;
    display: none;
}
.cabecera-dash-banner::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(201,163,90,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,163,90,.14) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to left, black, transparent 85%);
}
.cabecera-dash-banner .marca {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    text-align: right;
    font-size: 11px; letter-spacing: .18em; color: rgba(201,163,90,.75); font-weight: 600;
}
.cabecera-dash-banner .marca strong { display: block; font-size: 20px; letter-spacing: .1em; color: var(--color-acento); font-weight: 700; }

/* ---------- KPI ---------- */
.grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.stat-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 20px;
    display: flex; align-items: flex-start; gap: 14px;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); background: var(--color-superficie-hover); }
.stat-card .stat-icono {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--radio-sm);
    background: rgba(201,163,90,.12);
    color: var(--color-acento);
    display: flex; align-items: center; justify-content: center;
}
.stat-card .stat-cuerpo { min-width: 0; }
.stat-card .valor { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-card .etiqueta { font-size: 12.5px; color: var(--color-texto-suave); margin-top: 4px; }
.stat-card .variacion { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; margin-top: 6px; }
.stat-card .variacion.up { color: var(--color-exito); }
.stat-card .variacion.down { color: var(--color-ocupado); }
.stat-card .variacion.neutro { color: var(--color-texto-suave); }
.stat-card-ancha { grid-column: 1 / -1; }

/* ---------- Card genérica ---------- */
.card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 16px;
}
.card-titulo { font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-texto-suave); margin: 0 0 14px; }
.card-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-cabecera .card-titulo { margin: 0; }
.card-cabecera .card-cifra { font-size: 24px; font-weight: 700; margin: 4px 0 0; }
.card-cabecera .variacion { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.card-cabecera .variacion.up { color: var(--color-exito); }
.card-cabecera .variacion.down { color: var(--color-ocupado); }
.card-cabecera .variacion.neutro { color: var(--color-texto-suave); }

.fila-dos-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-bottom: 0; }
.fila-tres-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ---------- Barras de ocupación por tipo ---------- */
.lista-barras { display: flex; flex-direction: column; gap: 14px; }
.fila-barra { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: 12px; }
.fila-barra .nombre-tipo { font-size: 13px; font-weight: 500; color: var(--color-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-barra .pista { display: block; width: 100%; height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.fila-barra .relleno { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-acento), var(--color-acento-hover)); transition: width .6s ease; }
.fila-barra .porcentaje { font-size: 13px; font-weight: 600; text-align: right; color: var(--color-texto-suave); }

.fila-barra-monto { grid-template-columns: 168px 1fr 96px; }
.fila-barra-monto .nombre-tipo { display: flex; align-items: center; gap: 8px; }
.fila-barra-monto .nombre-tipo .icono { color: var(--color-acento); }
.fila-barra-monto .porcentaje { color: var(--color-texto); }

@media (max-width: 560px) {
    .fila-barra-monto { grid-template-columns: 1fr; gap: 4px; }
    .fila-barra-monto .porcentaje { text-align: left; color: var(--color-texto-suave); font-weight: 500; }
}

/* ---------- Gráfica de líneas (SVG) ---------- */
.grafica-lineas { width: 100%; height: auto; display: block; }
.grafica-lineas .linea { fill: none; stroke: var(--color-acento); stroke-width: 2; }
.grafica-lineas .punto { fill: var(--color-acento); }
.grafica-lineas .eje-label { fill: var(--color-texto-suave); font-size: 10px; font-family: 'Inter', sans-serif; }
.grafica-lineas .grid-h { stroke: var(--color-borde); stroke-width: 1; }

/* ---------- Tabla ---------- */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th {
    text-align: left; font-weight: 600; color: var(--color-texto-suave);
    font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    padding: 0 12px 10px; border-bottom: 1px solid var(--color-borde);
}
table.tabla td { padding: 12px; border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
table.tabla tbody tr:last-child td { border-bottom: none; }
table.tabla tbody tr { transition: background-color .15s ease; }
table.tabla tbody tr:hover { background: var(--color-superficie-hover); }
.tabla-nombre { font-weight: 600; }
.ver-todas { display: block; text-align: right; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--color-acento); }
.ver-todas:hover { color: var(--color-acento-hover); }

/* ---------- Estado discreto (texto, no badge grande) ---------- */
.estado-texto { font-size: 12.5px; font-weight: 700; }
.estado-texto.vip, .estado-texto.pendiente { color: var(--color-alerta); }
.estado-texto.confirmada, .estado-texto.disponible { color: var(--color-exito); }
.estado-texto.cancelada, .estado-texto.ocupada { color: var(--color-ocupado); }
.estado-texto.limpieza, .estado-texto.mantenimiento { color: var(--color-info); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.estado-disponible { background: var(--color-exito-bg); color: var(--color-exito); }
.estado-limpieza { background: var(--color-info-bg); color: var(--color-info); }
.estado-ocupada { background: var(--color-ocupado-bg); color: var(--color-ocupado); }
.estado-mantenimiento { background: var(--color-alerta-bg); color: var(--color-alerta); }
.estado-desconocido { background: var(--color-borde); color: var(--color-texto-suave); }

.badge-hoy { background: var(--color-acento); color: var(--color-acento-texto); }

/* ---------- Actividad reciente ---------- */
.lista-actividad { display: flex; flex-direction: column; gap: 4px; }
.item-actividad { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-borde); min-width: 0; }
.item-actividad:last-child { border-bottom: none; }
.item-actividad .act-icono {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    background: rgba(201,163,90,.12); color: var(--color-acento);
    display: flex; align-items: center; justify-content: center;
}
.item-actividad .act-texto { font-size: 13.5px; font-weight: 500; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.item-actividad .act-hora { font-size: 12px; color: var(--color-texto-suave); flex-shrink: 0; white-space: nowrap; margin-left: auto; padding-top: 1px; }

@media (max-width: 480px) {
    .item-actividad { flex-wrap: wrap; }
    .item-actividad .act-texto { flex-basis: 100%; order: 2; margin-top: 2px; }
    .item-actividad .act-hora { order: 3; flex-basis: 100%; margin-left: 44px; }
    .item-actividad .act-icono { order: 1; }
}

/* ---------- Disponibilidad / widgets extra ---------- */
.grid-disponibilidad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.chip-disp { border-radius: var(--radio-sm); padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--color-borde); }
.chip-disp .n { font-size: 20px; font-weight: 700; }
.chip-disp .t { font-size: 12px; color: var(--color-texto-suave); margin-top: 2px; }
.chip-disp.ok .n { color: var(--color-exito); }
.chip-disp.ocupado .n { color: var(--color-ocupado); }
.chip-disp.limpieza .n { color: var(--color-info); }
.chip-disp.mantenimiento .n { color: var(--color-alerta); }

.lista-acciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.accion-rapida {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: var(--radio-sm);
    background: rgba(255,255,255,.03); border: 1px solid var(--color-borde);
    font-size: 13px; font-weight: 500; color: var(--color-texto);
    transition: background-color .18s ease, transform .18s ease;
}
.accion-rapida:hover { background: var(--color-superficie-hover); transform: scale(1.02); }
.accion-rapida .icono { color: var(--color-acento); }

.tarjeta-vacia { text-align: center; color: var(--color-texto-suave); padding: 26px 10px; font-size: 13.5px; }

.filtros { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: end; }
.campo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--color-texto-suave); }
.campo input, .campo select {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: 10px 12px;
    font-size: 14px;
    background: var(--color-superficie);
    color: var(--color-texto);
    width: 100%;
}
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-acento);
    color: var(--color-acento-texto);
    border: none;
    border-radius: var(--radio-sm);
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--color-acento-hover); transform: scale(1.02); }
.btn-secundario { background: var(--color-superficie); color: var(--color-texto); border: 1px solid var(--color-borde); }
.btn-secundario:hover { background: var(--color-superficie-hover); }
.btn-block { width: 100%; }

.lista-reservas { display: flex; flex-direction: column; gap: 10px; }
.reserva-item {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.reserva-item:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.reserva-item .fila-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.reserva-item .nombre-cliente { font-weight: 600; font-size: 14.5px; }
.reserva-item .meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-texto-suave); margin-top: 4px; }
.reserva-item .totales { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--color-texto-suave); }
.reserva-item .totales b { display: block; font-size: 14px; font-weight: 700; color: var(--color-texto); }

.grid-habitaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.habitacion-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.habitacion-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.habitacion-card .numero { font-size: 20px; font-weight: 700; }
.habitacion-card .tipo { font-size: 12px; color: var(--color-texto-suave); margin-bottom: 10px; }
.habitacion-card .reservada-hoy { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--color-acento); }

.lista-precios { display: flex; flex-direction: column; gap: 12px; }
.precio-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.precio-card-head .numero { font-size: 20px; font-weight: 700; }
.precio-card-head .tipo { font-size: 12.5px; color: var(--color-texto-suave); }
.precio-card-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.precio-card-campos label { font-size: 12px; font-weight: 600; color: var(--color-texto-suave); display: block; margin-bottom: 4px; }
.precio-card-campos input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--color-borde); border-radius: var(--radio-sm); font-size: 14px;
    background: var(--color-fondo); color: var(--color-texto);
}

.mensaje { padding: 10px 14px; border-radius: var(--radio-sm); font-size: 13.5px; margin-bottom: 14px; font-weight: 600; }
.mensaje-exito { background: var(--color-exito-bg); color: var(--color-exito); }
.mensaje-error { background: var(--color-ocupado-bg); color: var(--color-ocupado); }

.vacio { text-align: center; color: var(--color-texto-suave); padding: 30px 10px; font-size: 14px; }

/* ---------- Login ---------- */
.login-shell {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(201,163,90,.12), transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(201,163,90,.08), transparent 50%),
        var(--color-fondo);
    padding: 24px;
}
.login-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 18px;
    padding: 32px 24px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    text-align: center;
}
.login-logo { margin-bottom: 10px; display: flex; justify-content: center; }
.login-logo img {
    width: 72px; height: 72px; object-fit: contain;
    background: var(--color-fondo); padding: 14px; border-radius: 18px; box-shadow: var(--sombra);
}
.login-card h1 { font-size: 18px; margin: 0 0 4px; }
.login-card p.sub { color: var(--color-texto-suave); font-size: 13px; margin: 0 0 22px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-credito {
    display: block;
    margin-top: 18px;
    font-size: 11px;
    color: var(--color-texto-suave);
    opacity: .6;
    transition: opacity .18s ease, color .18s ease;
}
.login-credito:hover { opacity: 1; color: var(--color-acento); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .grid-stats { grid-template-columns: 1fr 1fr; }
    .fila-dos-col, .fila-tres-col { grid-template-columns: 1fr; }
    .grid-disponibilidad, .lista-acciones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .grid-stats { grid-template-columns: 1fr; }
}

@media (min-width: 860px) {
    .sidebar { transform: translateX(0); }
    .app-shell { margin-left: var(--sidebar-w); }
    .btn-icon { display: none; }
    .overlay { display: none; }
    .cabecera-dash-banner { display: block; }
    .contenido { padding: 24px 32px 48px; }
}

@media (min-width: 860px) and (max-width: 1180px) {
    :root { --sidebar-w: 84px; }
    .sidebar-header { padding: 0 10px 16px; justify-content: center; }
    .sidebar-header > div:last-child { display: none; }
    .nav-item span:last-child { display: none; }
    .nav-item { justify-content: center; padding: 12px; }
    .sidebar-footer .texto-tema { display: none; }
    .sidebar-credito { display: none; }
    .cabecera-dash-banner { width: 180px; }
}