/* ===========================================================
   Tema "Alquileres" — basado en el diseño de TemaEjemplo
   Paleta verde/crema, fuente Plus Jakarta Sans, layout sidebar
   =========================================================== */
:root {
    --verde-oscuro: #20392f;
    --verde-oscuro-2: #1a3027;
    --verde: #2f5d4f;
    --verde-hover: #274e43;
    --verde-tint: #eef3ef;
    --oro: #d9c9a8;
    --oro-hover: #cdbb93;
    --oro-text: #3a2f18;
    --fondo: #f6f5f1;
    --card-head: #faf9f5;
    --borde: #ebe8e0;
    --borde-2: #e7e4dc;
    --borde-input: #e0ddd3;
    --divisor: #f0eee7;
    --texto: #1c2620;
    --texto-cuerpo: #4a564d;
    --muted: #8a968d;
    --muted-2: #7c8a82;
    --label: #5a6b62;
    --peligro: #c0552f;
}

* { box-sizing: border-box; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: var(--fondo);
    color: var(--texto-cuerpo);
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

::selection { background: #cde0d4; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d8d4c8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

a { color: var(--verde); }

/* ===================== LAYOUT ===================== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 248px; flex: none; background: var(--verde-oscuro);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; z-index: 1040;
    /* Con el móvil en horizontal el menú no cabe entero: debe poder desplazarse */
    overflow-y: auto; overscroll-behavior: contain;
}
.sidebar__brand {
    padding: 22px 22px 18px; display: flex; align-items: center; gap: 11px;
    text-decoration: none;
}
.sidebar__logo {
    width: 34px; height: 34px; border-radius: 9px; background: var(--verde);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.sidebar__title { font-size: 18px; font-weight: 800; color: #f3efe6; letter-spacing: -.02em; }

.sidebar__nav { padding: 8px 14px; display: flex; flex-direction: column; gap: 3px; }
.sidebar__link {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 10px;
    color: rgba(243,239,230,.72); font-size: 14px; font-weight: 600;
    text-decoration: none; border: none; background: none; cursor: pointer;
    width: 100%; text-align: left;
}
.sidebar__link:hover { background: rgba(255,255,255,.06); color: #f3efe6; }
.sidebar__link.active {
    background: rgba(217,201,168,.16); color: #f3efe6; font-weight: 700;
    box-shadow: inset 3px 0 0 var(--oro);
}
.sidebar__link svg { width: 18px; height: 18px; flex: none; }
.sidebar__contador {
    margin-left: auto; flex: none;
    background: var(--oro); color: var(--oro-text);
    font-size: 11px; font-weight: 800; line-height: 1;
    padding: 4px 8px; border-radius: 20px;
}

.sidebar__footer { margin-top: auto; padding: 16px 14px; }
.sidebar__user { background: rgba(255,255,255,.06); border-radius: 12px; padding: 13px; }
.sidebar__user-row { display: flex; align-items: center; gap: 10px; }
.sidebar__avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--oro); color: var(--oro-text);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none;
}
.sidebar__user-name { font-size: 13px; font-weight: 600; color: #f3efe6; line-height: 1.2; }
.sidebar__user-role { font-size: 11.5px; color: rgba(243,239,230,.5); }
.sidebar__logout {
    width: 100%; margin-top: 11px; padding: 8px; background: transparent;
    border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
    color: rgba(243,239,230,.75); font-size: 12.5px; font-weight: 500;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    text-decoration: none;
}
.sidebar__logout:hover { background: rgba(255,255,255,.06); color: #f3efe6; }

.content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: 68px; flex: none; background: rgba(246,245,241,.85);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borde-2);
    display: flex; align-items: center; gap: 16px; padding: 0 32px;
    position: sticky; top: 0; z-index: 1030;
}
.topbar__toggle {
    display: none; background: none; border: none; color: var(--texto); cursor: pointer; padding: 4px;
}
.topbar__search { position: relative; width: 260px; max-width: 40vw; }
.topbar__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.topbar__search input {
    width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--borde-input);
    border-radius: 10px; font-size: 13.5px; font-family: inherit; background: #fff; color: var(--texto); outline: none;
}
.topbar__search input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(47,93,79,.10); }

.page-body { flex: 1; padding: 32px; }
.page-inner { max-width: 1180px; animation: fadeUp .35s ease both; }

/* En el móvil, 100vh incluye la barra del navegador y sobra alto: si el
   navegador admite dvh se usa el alto realmente visible. */
@supports (height: 100dvh) {
    .layout { min-height: 100dvh; }
    .sidebar { height: 100dvh; }
}

/* sidebar responsive */
.sidebar__backdrop { display: none; }
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed; left: 0; top: 0; transform: translateX(-100%);
        transition: transform .25s ease;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar__backdrop {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035;
    }
    .topbar__toggle { display: inline-flex; }
    .page-body { padding: 20px; }
    .topbar { padding: 0 20px; }
}

/* ===================== ENCABEZADO DE SECCIÓN ===================== */
.page-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.4rem; font-weight: 800; color: var(--texto); letter-spacing: -.02em; margin: 0; }

/* ===================== TARJETAS ===================== */
.card {
    border: 1px solid var(--borde); border-radius: 16px; background: #fff;
    box-shadow: none;
}
.card-header {
    background: #fff; border-bottom: 1px solid var(--divisor);
    font-weight: 700; color: var(--texto); padding: 18px 22px; font-size: 15.5px;
}
.card-body { padding: 22px; }
.card-footer { background: #fff; border-top: 1px solid var(--divisor); }

.stat-card .card-body { padding: 20px; }
.stat-card .display-6 { font-size: 27px; font-weight: 800; color: var(--texto); letter-spacing: -.02em; }

/* ===================== BOTONES ===================== */
.btn { border-radius: 10px; font-weight: 600; font-size: 13.5px; }
.btn-lg { font-size: 15px; }
.btn-sm { border-radius: 8px; font-size: 12.5px; }

.btn-primary { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--verde-hover); border-color: var(--verde-hover); color: #fff; }

.btn-success { background: var(--oro); border-color: var(--oro); color: var(--oro-text); }
.btn-success:hover, .btn-success:focus { background: var(--oro-hover); border-color: var(--oro-hover); color: var(--oro-text); }

.btn-outline-primary { color: var(--verde); border-color: var(--verde); }
.btn-outline-primary:hover { background: var(--verde); border-color: var(--verde); color: #fff; }

.btn-outline-secondary { color: var(--muted-2); border-color: var(--borde-input); }
.btn-outline-secondary:hover { background: #f0efe9; border-color: var(--borde-input); color: var(--texto); }

.btn-outline-danger { color: var(--peligro); border-color: #e7c7bb; }
.btn-outline-danger:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; }

.btn-link { color: var(--verde); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--verde-hover); text-decoration: underline; }

/* ===================== BADGES (pills suaves) ===================== */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 20px; font-size: 11.5px; letter-spacing: .01em; }
.badge.bg-success { background: #eaf3ed !important; color: var(--verde) !important; }
.badge.bg-warning { background: #fbf3e3 !important; color: #9a6b1e !important; }
.badge.bg-danger  { background: #f8ebe5 !important; color: var(--peligro) !important; }
.badge.bg-info    { background: #e8eff5 !important; color: #3a6b8a !important; }
.badge.bg-primary { background: var(--verde-tint) !important; color: var(--verde) !important; }
.badge.bg-secondary { background: #f0efe9 !important; color: var(--muted-2) !important; }
.badge.bg-dark    { background: var(--verde-oscuro) !important; color: #f3efe6 !important; }

/* ===================== TABLAS ===================== */
.table { color: var(--texto-cuerpo); margin-bottom: 0; }
.table > thead th, .table-light > th, .table-light {
    background: var(--card-head); color: var(--muted); font-size: 12px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-color: var(--borde);
}
.table > tbody > tr { border-color: var(--divisor); }
.table > tbody > tr:hover > * { background: #faf9f5; }
.table a { font-weight: 600; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table-danger, .table-danger > * { background: #fbeee8 !important; }

/* ===================== FORMULARIOS ===================== */
.form-label { font-size: 12.5px; font-weight: 600; color: var(--label); margin-bottom: 6px; }
.form-control, .form-select {
    border: 1px solid var(--borde-input); border-radius: 10px;
    font-size: 14px; color: var(--texto); padding: 11px 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--verde); box-shadow: 0 0 0 3px rgba(47,93,79,.12);
}
.form-control-sm, .form-select-sm { padding: 8px 11px; font-size: 13px; border-radius: 8px; }
.form-text { color: var(--muted); font-size: 12px; }
.form-check-input:checked { background-color: var(--verde); border-color: var(--verde); }

/* ===================== ALERTAS ===================== */
.alert { border-radius: 12px; border: none; font-size: 14px; }
.alert-success { background: #eaf3ed; color: #1f4a3a; }
.alert-danger { background: #f8ebe5; color: #8a3318; }
.alert-warning { background: #fbf3e3; color: #7a5212; }
.alert-info { background: #e8eff5; color: #2c5267; }

/* ===================== VARIOS ===================== */
.doc-thumb {
    width: 100%; height: 150px; object-fit: cover;
    border-radius: 10px; border: 1px solid var(--borde-input);
}
.avatar-circle {
    width: 44px; height: 44px; border-radius: 50%; background: var(--oro); color: var(--oro-text);
    display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none;
}
.prop-card { transition: box-shadow .18s, transform .18s; }
.prop-card:hover { box-shadow: 0 12px 28px rgba(32,57,47,.12); transform: translateY(-2px); }
.dropdown-menu { border-radius: 12px; border: 1px solid var(--borde); box-shadow: 0 12px 28px rgba(32,57,47,.12); }
dt { font-weight: 600; color: var(--muted); }
dd { color: var(--texto); }
hr { border-color: var(--divisor); }

/* ==========================================================================
   RESPONSIVE — va al final a propósito: estas reglas ajustan lo definido
   arriba y, al tener la misma especificidad, solo ganan si van después.
   ========================================================================== */

/* ===================== REJILLAS RESPONSIVE ===================== */
/* Barras de acciones, filtros y grupos de pestañas de los listados */
.toolbar, .filtros, .segmentado { flex-wrap: wrap; }

@media (max-width: 1199.98px) {
    .g-kpi { grid-template-columns: repeat(2, 1fr) !important; }
    .g-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 991.98px) {
    .g-main { grid-template-columns: 1fr !important; }
    .ficha-grid { grid-template-columns: 1fr !important; }
    .sum-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767.98px) and (orientation: portrait) {
    .g-kpi, .g-cards { grid-template-columns: 1fr !important; }
    .sum-grid { grid-template-columns: 1fr !important; }
}

/* ===================== PANTALLA ESTRECHA (CUALQUIER ORIENTACIÓN) ===================== */
@media (max-width: 767.98px) {
    .page-body { padding: 16px 14px; }
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .toolbar { gap: 10px !important; }
    .toolbar > .filtros, .toolbar > .segmentado { flex: 1 1 100%; }
    .filtros > * { flex: 1 1 140px; min-width: 0; width: auto !important; }
    .segmentado > * { flex: 1 1 auto; text-align: center; }
}

/* ===================== MÓVIL EN VERTICAL =====================
   Los listados son rejillas de N columnas (imposibles en un móvil estrecho): en
   vertical cada fila pasa a ser una ficha de dos columnas, con el dato principal
   a ancho completo y etiquetas añadidas por CSS donde el valor no se explica
   solo. En horizontal se conservan las filas (bloque siguiente). */
@media (max-width: 767.98px) and (orientation: portrait) {
    .grid-head { display: none !important; }
    .grid-contr, .grid-gasto, .grid-rec, .grid-fact, .grid-sumfac {
        grid-template-columns: 1fr auto !important;
        gap: 5px 12px !important;
        padding: 14px 16px !important;
        align-items: center !important;
    }
    .grid-contr > *, .grid-gasto > *, .grid-rec > *,
    .grid-fact > *, .grid-sumfac > * { min-width: 0; }
    .grid-contr ::before, .grid-gasto ::before, .grid-rec ::before,
    .grid-fact ::before, .grid-sumfac ::before { color: var(--muted); font-weight: 500; }

    /* Contratos: propiedad e inquilino arriba; fechas e importe etiquetados */
    .grid-contr > :nth-child(1), .grid-contr > :nth-child(2) { grid-column: 1 / -1; }
    .grid-contr > :nth-child(3)::before { content: "Inicio "; }
    .grid-contr > :nth-child(4)::before { content: "Fin "; }
    .grid-contr > :nth-child(4) { text-align: right; }
    .grid-contr > :nth-child(5) { text-align: left !important; }
    .grid-contr > :nth-child(5)::before { content: "Renta "; }

    /* Gastos: descripción primero, acciones al final */
    .grid-gasto > :nth-child(4) { order: -1; grid-column: 1 / -1; }
    .grid-gasto > :nth-child(2) { text-align: right; }
    .grid-gasto > :nth-child(6) { grid-column: 1 / -1; justify-content: flex-end; }

    /* Recibos: inquilino y propiedad primero */
    .grid-rec > :nth-child(2) { order: -1; grid-column: 1 / -1; }
    .grid-rec > :nth-child(3) { text-align: right; }
    .grid-rec > :nth-child(4) { text-align: left !important; }
    .grid-rec > :nth-child(5) { justify-content: flex-end !important; }
    .grid-rec > :nth-child(6) { grid-column: 1 / -1; }

    /* Facturas de un suministro */
    .grid-fact > :nth-child(1) { grid-column: 1 / -1; }
    .grid-fact > :nth-child(3) { text-align: right; }
    .grid-fact > :nth-child(3)::before { content: "Consumo "; }
    .grid-fact > :nth-child(4) { text-align: left !important; }
    .grid-fact > :nth-child(4)::before { content: "Importe "; }

    /* Facturas de todos los suministros */
    .grid-sumfac > :nth-child(1) { order: -2; grid-column: 1 / -1; }
    .grid-sumfac > :nth-child(3) { order: -1; grid-column: 1 / -1; }
    .grid-sumfac > :nth-child(4) { text-align: right; }
    .grid-sumfac > :nth-child(5) { text-align: left !important; }
    .grid-sumfac > :nth-child(5)::before { content: "Consumo "; }
    .grid-sumfac > :nth-child(7) { grid-column: 1 / -1; }

    /* Filas de tarjeta (panel, avisos, suministros dados de alta).
       El `flex` va con !important porque estas celdas llevan flex:1 en el
       atributo style: sin ello la celda de texto se queda en 70 px y el
       contenido sale a palabra por línea. */
    .fila-lista { flex-wrap: wrap; gap: 8px 12px !important; }
    .fila-lista > .celda { flex: 1 1 100% !important; width: auto !important; min-width: 0 !important; }
    .fila-lista > .celda-fin { margin-left: auto; text-align: right !important; }
    /* La última etiqueta de la fila (plazo, estado) se alinea a la derecha */
    .fila-lista > span[style*="border-radius:20px"]:last-of-type { margin-left: auto; }
}

/* Pantallas pequeñas: se recortan los rellenos para ganar ancho útil */
@media (max-width: 575.98px) and (orientation: portrait) {
    /* 12px de lado: menos margen deja asomar los .row de Bootstrap, que llevan
       -12px de margen horizontal */
    .page-body { padding: 12px; }
    .card > .card-body { padding: 18px !important; }
    .login-panel { padding: 18px !important; }
    .login-card { padding: 24px !important; }
    .alert { font-size: 13.5px; }
}

/* ===================== MÓVIL EN HORIZONTAL =====================
   Al girar el móvil sobra ancho y el alto (≈320-430 px) pasa a ser el recurso
   escaso. Por eso aquí NO se convierten las filas en fichas: se conservan los
   listados en filas —caben muchos más registros a la vista— y se recorta todo
   el cromo vertical. El menú se reparte en dos columnas para que quepa entero.

   Varios paneles del diseño llevan su relleno en el atributo style, así que la
   única forma de compactarlos es seleccionarlos por ese relleno. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 991.98px) {

    /* --- Cromo vertical --- */
    .topbar { height: 46px; padding: 0 12px; gap: 8px; }
    .topbar h1 { font-size: 14px; }
    .page-body { padding: 10px 12px !important; }
    .page-header { margin-bottom: .7rem; }
    .page-header h1 { font-size: 1.15rem; }
    .alert { padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
    .toolbar { margin-bottom: 12px !important; }
    /* Hay ancho de sobra: los filtros y las pestañas comparten fila en vez de
       ocupar una cada uno como en vertical */
    .toolbar > .filtros, .toolbar > .segmentado { flex: 0 1 auto; }
    .filtros > *, .segmentado > * { flex: 0 0 auto; width: auto !important; }

    /* --- Menú lateral: dos columnas, compacto y desplazable si hace falta --- */
    .sidebar { width: 296px; }
    .sidebar__brand { padding: 11px 14px 7px; gap: 9px; }
    .sidebar__logo { width: 28px; height: 28px; border-radius: 8px; }
    .sidebar__title { font-size: 16px; }
    .sidebar__nav { padding: 4px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px; }
    .sidebar__link { padding: 7px 9px; font-size: 12.5px; gap: 8px; }
    .sidebar__link svg { width: 16px; height: 16px; }
    .sidebar__link span:not(.sidebar__contador) {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sidebar__contador { padding: 3px 6px; font-size: 10px; }
    .sidebar__footer { padding: 8px 10px 11px; }
    .sidebar__user { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px; }
    .sidebar__user-row { flex: 1 1 100%; min-width: 0; }
    .sidebar__avatar { width: 30px; height: 30px; font-size: 12px; }
    .sidebar__logout {
        flex: 1 1 0; min-width: 0; margin: 0 !important;
        padding: 7px 5px; font-size: 12px; white-space: nowrap;
    }

    /* --- Listados: se mantienen en filas, más densas --- */
    [class*="grid-"] { padding: 8px 12px !important; gap: 3px 8px !important; }
    [class*="grid-"] > * { min-width: 0; }
    [class*="grid-"] > span:not([style*="display:flex"]),
    [class*="grid-"] > a,
    [class*="grid-"] > div > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .grid-head > span { font-size: 10.5px !important; letter-spacing: .02em !important; }
    [class*="grid-"] span[style*="border-radius:20px"],
    .fila-lista span[style*="border-radius:20px"] { padding: 3px 8px !important; font-size: 11px !important; }
    /* Iconos de acción: algo más grandes y con área de toque */
    [class*="grid-"] .bi { font-size: 15px; }
    [class*="grid-"] a[title], [class*="grid-"] button[title] { padding: 3px 2px !important; }
    [class*="grid-"] a[style*="border-radius:8px"] { padding: 6px 10px !important; }

    /* Reparto de columnas ajustado al ancho de un móvil en horizontal. La
       cabecera comparte clase con las filas, así que siguen alineadas. */
    .grid-contr  { grid-template-columns: 1.3fr 1.2fr .75fr .75fr .6fr .9fr !important; }
    .grid-rec    { grid-template-columns: .62fr 1.5fr .75fr .8fr .85fr 1fr !important; }
    .grid-gasto  { grid-template-columns: .85fr .7fr 1.1fr 1.3fr .75fr .75fr !important; }
    .grid-fact   { grid-template-columns: 1fr 1fr .9fr 1fr .7fr !important; }
    .grid-sumfac { grid-template-columns: .85fr .8fr 1.3fr .85fr .6fr .85fr .6fr !important; }

    /* --- Filas de tarjeta (panel, avisos, suministros dados de alta) ---
       Cada dato en una sola línea: si no cabe todo, la fila parte por el grupo
       de botones en vez de estirarse a base de saltos de línea. */
    .fila-lista {
        flex-wrap: wrap; gap: 6px 10px !important;
        padding-top: 8px !important; padding-bottom: 8px !important;
    }
    .fila-lista > .celda { flex: 1 1 200px !important; min-width: 0 !important; }
    .fila-lista > .celda[style*="display:flex"] { flex: 0 0 auto !important; }
    .fila-lista .celda > div, .fila-lista > span.celda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fila-lista > div[style*="width:130px"] { width: 108px !important; }
    .fila-lista > div[style*="width:110px"] { width: 92px !important; }
    .fila-lista > div[style*="width:90px"] { width: 78px !important; }

    /* --- Panel: los KPI siguen en fila --- */
    .g-kpi {
        grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
        gap: 10px !important; margin-bottom: 12px !important;
    }
    .g-kpi > div { padding: 12px !important; }
    .g-kpi > div > div:first-child { margin-bottom: 7px !important; }
    .g-kpi > div > div:first-child > div { width: 26px !important; height: 26px !important; border-radius: 7px !important; }
    .g-kpi > div > div:nth-child(2) { font-size: 20px !important; }
    .g-main { gap: 12px !important; margin-bottom: 12px !important; }
    .g-main > div { padding: 15px !important; }

    /* --- Rejillas de tarjetas y fichas --- */
    .g-cards { grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)) !important; gap: 12px !important; }
    .g-cards > div[style*="padding:20px"], .g-cards > a[style*="padding:20px"] { padding: 13px !important; }
    /* El pie de las tarjetas (etiquetas + botones) no cabe en una línea */
    .g-cards div[style*="padding-top:13px"] { flex-wrap: wrap; }
    .prop-card > div:first-child { height: 84px !important; }
    .sum-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 2px 16px !important; }
    .doc-thumb { height: 96px; }
    .ficha-grid { gap: 12px !important; }
    .ficha-grid > div { gap: 12px !important; }

    /* --- Paneles con relleno en línea: se compactan --- */
    .page-inner > div[style*="padding:22px"] { padding: 15px !important; margin-bottom: 12px !important; }
    .ficha-grid div[style*="padding:22px"],
    .ficha-grid div[style*="padding:24px"],
    .ficha-grid div[style*="padding:26px"] { padding: 15px !important; }
    .page-inner div[style*="padding:16px 22px"],
    .page-inner div[style*="padding:18px 22px"] { padding: 10px 14px !important; }
    .page-inner div[style*="padding:10px 14px"] { padding: 7px 10px !important; }
    .card > .card-body { padding: 16px !important; }
    .card-header { padding: 12px 16px; font-size: 14.5px; }

    /* --- Formularios: los campos se reparten en varias columnas --- */
    .row > [class*="col-md-"] { flex: 1 1 190px; width: auto; max-width: 100%; }
    .mb-3 { margin-bottom: .55rem !important; }
    .form-label { margin-bottom: 3px; }
    /* 16px es lo mínimo para que iOS no haga zoom al enfocar un campo */
    .form-control, .form-select { padding: 8px 12px; font-size: 16px; }
    .form-control-sm, .form-select-sm { padding: 7px 10px; font-size: 16px; }
    .filtros input, .filtros select,
    .toolbar input, .toolbar select { font-size: 16px !important; padding: 7px 10px !important; }
    textarea.form-control { min-height: 58px; }

    /* --- Login: la tarjeta se ancla arriba para que no se corte --- */
    .login-panel { align-items: flex-start !important; padding: 10px !important; }
    .login-card { padding: 16px !important; max-width: 420px !important; }
    .login-card > div:first-child { margin-bottom: 10px !important; }
    .login-card h1 { font-size: 18px !important; }
    .login-card p { font-size: 12.5px !important; margin-bottom: 12px !important; }
    .login-card .form-check { margin-bottom: .45rem !important; }
    .login-card .btn-lg { padding: 8px; font-size: 14.5px; }
}

/* Móvil en horizontal con algo más de ancho (≥768 px): las fichas de detalle y
   el panel recuperan las dos columnas, que caben y ahorran desplazamiento. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 768px) and (max-width: 991.98px) {
    .ficha-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; }
    .g-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; }
}