/*
============================================================
RENTACAR CORE — FRONTEND CSS
VERSION 1.7.5
============================================================

CAMBIOS v1.7.5:
  1. BADGE OCULTO AL COLAPSAR — .ryr-sidebar-collapsed
     .ryr-sidebar-badge ahora usa display:none !important.
     Antes usaba opacity:0 + width:0 que era insuficiente:
     el badge seguía en el flujo del flex y se desplazaba
     fuera del link como ícono flotante independiente.
     display:none lo elimina completamente del DOM visual.

  2. LOGO EN MODO COLAPSADO — ya no se requiere una imagen
     separada .ryr-sidebar-logo-icon. El logo principal
     .ryr-sidebar-logo-img se redimensiona a max-height:32px
     y se centra. El brand-text (título + subtítulo) se oculta
     con opacity:0 + width:0 para que solo quede el logo.
     Esto es compatible con los templates v1.7.7 que tienen
     una sola imagen de logo, sin imagen alternativa.

CAMBIOS v1.7.4 (heredados):
  1. TEXTO DE LINKS OCULTO AL COLAPSAR — span.ryr-link-text
     con opacity:0 + width:0 + max-width:0.
  2. OVERFLOW SIDEBAR GARANTIZADO — overflow-x:hidden.

PALETA OFICIAL:
    --ryr-red:   #7c2221
    --ryr-gold:  #A68953
    --ryr-dark:  #1a1a1a
    --ryr-light: #f8f9fa

FUENTE: Poppins (Google Fonts)
ICONOS: Font Awesome 6.5.0

BREAKPOINTS OBLIGATORIOS:
    1280px — grids de 4 cols → 2 cols
    1024px — sidebar → barra nav inferior fija
     768px — columna única, ajustes de texto
     480px — máxima compresión mobile
============================================================
*/

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

:root {
    --ryr-red:        #7c2221;
    --ryr-red-hover:  #961f1e;
    --ryr-red-light:  rgba(124, 34, 33, 0.08);
    --ryr-gold:       #A68953;
    --ryr-gold-hover: #b8995f;
    --ryr-gold-light: rgba(166, 137, 83, 0.15);
    --ryr-dark:       #1a1a1a;
    --ryr-dark-2:     #222222;
    --ryr-light:      #f8f9fa;
    --ryr-light-2:    #f0f0f0;
    --ryr-text:       #1a1a1a;
    --ryr-text-muted: #666666;
    --ryr-text-light: #999999;
    --ryr-white:      #ffffff;
    --ryr-border:     #e8e8e8;
    --ryr-border-dark:#333333;
    --ryr-shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --ryr-shadow-md:  0 8px 24px rgba(0,0,0,0.12);
    --ryr-shadow-lg:  0 16px 48px rgba(0,0,0,0.16);
    --ryr-shadow-red: 0 8px 24px rgba(124, 34, 33, 0.25);
    --ryr-font:       'Poppins', sans-serif;
    --ryr-radius-sm:  4px;
    --ryr-radius:     8px;
    --ryr-radius-lg:  16px;
    --ryr-radius-xl:  24px;
    --ryr-transition: all 0.3s ease;
    --ryr-space-xs:   8px;
    --ryr-space-sm:   16px;
    --ryr-space-md:   24px;
    --ryr-space-lg:   40px;
    --ryr-space-xl:   64px;
    --sidebar-width:           260px;
    --sidebar-collapsed-width:  56px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--ryr-font); font-size: 15px; line-height: 1.6; color: var(--ryr-text); background: var(--ryr-light); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: var(--ryr-transition); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: var(--ryr-font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--ryr-font); }

/* ── UTILIDADES ─────────────────────────────────────── */
.ryr-container { width: 90%; max-width: 1280px; margin: 0 auto; }
.ryr-main { min-height: 60vh; }
.ryr-section { padding: var(--ryr-space-xl) 0; }
.ryr-section-title { font-size: 32px; font-weight: 800; color: var(--ryr-text); text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: var(--ryr-space-sm); }
.ryr-section-title span { color: var(--ryr-gold); }
.ryr-section-subtitle { font-size: 15px; color: var(--ryr-text-muted); margin-bottom: var(--ryr-space-lg); max-width: 560px; }
.ryr-gold-line { width: 48px; height: 3px; background: var(--ryr-gold); border-radius: 2px; margin-bottom: var(--ryr-space-md); }
.ryr-text-center { text-align: center; }
.ryr-text-red { color: var(--ryr-red); }
.ryr-text-gold { color: var(--ryr-gold); }
.ryr-text-muted { color: var(--ryr-text-muted); }
.ryr-mt-sm { margin-top: var(--ryr-space-sm); }
.ryr-mt-md { margin-top: var(--ryr-space-md); }
.ryr-mt-lg { margin-top: var(--ryr-space-lg); }
h1,h2,h3,h4,h5,h6 { font-family: var(--ryr-font); font-weight: 700; line-height: 1.2; color: var(--ryr-text); }
h1 { font-size: clamp(28px,4vw,48px); }
h2 { font-size: clamp(22px,3vw,36px); }
h3 { font-size: clamp(18px,2.5vw,24px); }
h4 { font-size: 18px; }
p { margin-bottom: var(--ryr-space-sm); }
p:last-child { margin-bottom: 0; }

/* ── BOTONES ─────────────────────────────────────────── */
.ryr-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; background:var(--ryr-red); color:var(--ryr-white); font-family:var(--ryr-font); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border-radius:var(--ryr-radius); border:2px solid var(--ryr-red); cursor:pointer; transition:var(--ryr-transition); white-space:nowrap; }
.ryr-btn-primary:hover { background:var(--ryr-red-hover); border-color:var(--ryr-red-hover); color:var(--ryr-white); transform:translateY(-1px); box-shadow:var(--ryr-shadow-red); }
.ryr-btn-secondary { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; background:transparent; color:var(--ryr-red); font-family:var(--ryr-font); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border-radius:var(--ryr-radius); border:2px solid var(--ryr-red); cursor:pointer; transition:var(--ryr-transition); }
.ryr-btn-secondary:hover { background:var(--ryr-red); color:var(--ryr-white); }
.ryr-btn-gold { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; background:var(--ryr-gold); color:var(--ryr-white); font-family:var(--ryr-font); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border-radius:var(--ryr-radius); border:2px solid var(--ryr-gold); cursor:pointer; transition:var(--ryr-transition); }
.ryr-btn-gold:hover { background:var(--ryr-gold-hover); border-color:var(--ryr-gold-hover); color:var(--ryr-white); }
.ryr-btn-outline-white { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; background:transparent; color:var(--ryr-white); font-family:var(--ryr-font); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border-radius:var(--ryr-radius); border:2px solid rgba(255,255,255,0.6); cursor:pointer; transition:var(--ryr-transition); }
.ryr-btn-outline-white:hover { background:var(--ryr-white); color:var(--ryr-red); border-color:var(--ryr-white); }
.ryr-btn-lg { padding:16px 36px; font-size:14px; }
.ryr-btn-sm { padding:8px 16px; font-size:11px; }
.ryr-btn-xl { padding:18px 44px; font-size:15px; }

/* ── BADGES ──────────────────────────────────────────── */
.ryr-badge { display:inline-block; padding:4px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; border-radius:100px; }
.ryr-badge-disponible   { background:rgba(34,197,94,0.12);  color:#16a34a;        border:1px solid rgba(34,197,94,0.3); }
.ryr-badge-arrendado    { background:rgba(124,34,33,0.1);   color:var(--ryr-red); border:1px solid rgba(124,34,33,0.25); }
.ryr-badge-mantenimiento{ background:rgba(166,137,83,0.12); color:#92620a;        border:1px solid rgba(166,137,83,0.3); }
.ryr-badge-gold  { background:var(--ryr-gold-light); color:var(--ryr-gold); border:1px solid rgba(166,137,83,0.4); }
.ryr-badge-dark  { background:var(--ryr-dark); color:var(--ryr-white); }

/* ── HEADER ──────────────────────────────────────────── */
.ryr-header { position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--ryr-red); border-bottom:2px solid var(--ryr-gold); }
.ryr-top-bar { background:rgba(0,0,0,0.2); border-bottom:1px solid rgba(255,255,255,0.06); padding:5px 0; display:none; }
@media (min-width:1024px) { .ryr-top-bar { display:block; } }
.ryr-top-bar-inner { display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.8); }
.ryr-top-bar-left { display:flex; gap:24px; }
.ryr-top-bar-left span { display:flex; align-items:center; gap:6px; }
.ryr-top-bar-left i { color:var(--ryr-gold); font-size:11px; }
.ryr-header-container { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 var(--ryr-space-md); }
.ryr-logo img { max-height:52px; width:auto; object-fit:contain; }
.ryr-nav { display:none; align-items:center; height:100%; gap:4px; }
@media (min-width:1024px) { .ryr-nav { display:flex; } }
.ryr-nav-link { display:flex; align-items:center; gap:5px; height:72px; padding:0 12px; color:var(--ryr-white); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; transition:var(--ryr-transition); position:relative; }
.ryr-nav-link:hover { color:var(--ryr-gold); }
.ryr-nav-link i { font-size:9px; transition:var(--ryr-transition); }
.ryr-dropdown { position:relative; height:72px; display:flex; align-items:center; }
.ryr-dropdown-menu { position:absolute; top:100%; left:0; background:var(--ryr-white); min-width:210px; box-shadow:var(--ryr-shadow-lg); border-top:3px solid var(--ryr-gold); display:none; flex-direction:column; z-index:100; border-radius:0 0 var(--ryr-radius) var(--ryr-radius); }
.ryr-dropdown:hover .ryr-dropdown-menu { display:flex; }
.ryr-dropdown:hover .ryr-nav-link i { transform:rotate(180deg); }
.ryr-dropdown-item { padding:13px 20px; color:var(--ryr-text); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--ryr-border); transition:var(--ryr-transition); display:flex; align-items:center; gap:8px; }
.ryr-dropdown-item:last-child { border-bottom:none; }
.ryr-dropdown-item:hover { background:var(--ryr-light); color:var(--ryr-red); padding-left:26px; }
.ryr-dropdown-item i { color:var(--ryr-gold); width:14px; font-size:12px; }
.ryr-header-social { display:none; align-items:center; gap:4px; }
@media (min-width:1024px) { .ryr-header-social { display:flex; } }
.ryr-header-social a { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--ryr-white); font-size:16px; border-radius:50%; transition:var(--ryr-transition); }
.ryr-header-social a:hover { background:rgba(255,255,255,0.12); color:var(--ryr-gold); }
.ryr-hamburger { display:flex; flex-direction:column; gap:5px; padding:8px; cursor:pointer; }
@media (min-width:1024px) { .ryr-hamburger { display:none; } }
.ryr-hamburger span { display:block; width:24px; height:2px; background:var(--ryr-white); border-radius:2px; transition:var(--ryr-transition); }
.ryr-mobile-menu { position:fixed; top:0; right:-100%; width:85%; max-width:360px; height:100vh; background:var(--ryr-red); z-index:2000; transition:right 0.3s ease; overflow-y:auto; padding:24px; box-shadow:-8px 0 32px rgba(0,0,0,0.4); }
.ryr-mobile-menu.active { right:0; }
.ryr-mobile-menu-close { display:flex; justify-content:flex-end; margin-bottom:32px; }
.ryr-mobile-menu-close button { color:var(--ryr-white); font-size:24px; opacity:0.8; transition:var(--ryr-transition); }
.ryr-mobile-menu-close button:hover { opacity:1; color:var(--ryr-gold); }
.ryr-mobile-nav a { display:flex; align-items:center; gap:12px; padding:14px 0; color:var(--ryr-white); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.1); transition:var(--ryr-transition); }
.ryr-mobile-nav a:hover { color:var(--ryr-gold); padding-left:8px; }
.ryr-mobile-nav a i { color:var(--ryr-gold); width:20px; font-size:14px; }
.ryr-mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1999; }
.ryr-mobile-overlay.active { display:block; }
.ryr-main { padding-top:72px; }
@media (min-width:1024px) { .ryr-main { padding-top:104px; } }

/* ── FOOTER ──────────────────────────────────────────── */
.ryr-footer { background:var(--ryr-dark); color:rgba(255,255,255,0.6); padding:var(--ryr-space-xl) 0 0; border-top:4px solid var(--ryr-red); }
.ryr-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--ryr-space-lg); padding-bottom:var(--ryr-space-xl); }
.ryr-footer-logo { max-height:56px; width:auto; margin-bottom:var(--ryr-space-md); filter:brightness(0) invert(1); opacity:0.9; }
.ryr-footer-desc { font-size:13px; line-height:1.7; color:rgba(255,255,255,0.5); margin-bottom:var(--ryr-space-md); }
.ryr-footer-col h4 { color:var(--ryr-white); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:2px; margin-bottom:var(--ryr-space-sm); padding-bottom:10px; border-bottom:1px solid rgba(166,137,83,0.3); }
.ryr-footer-col a { display:flex; align-items:center; gap:8px; padding:6px 0; color:rgba(255,255,255,0.5); font-size:12px; font-weight:500; transition:var(--ryr-transition); }
.ryr-footer-col a:hover { color:var(--ryr-gold); padding-left:6px; }
.ryr-footer-col p { font-size:12px; color:rgba(255,255,255,0.5); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.ryr-footer-col p i { color:var(--ryr-gold); width:14px; font-size:12px; }
.ryr-footer-social { display:flex; gap:10px; margin-top:var(--ryr-space-sm); }
.ryr-footer-social a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.6); border-radius:50%; font-size:16px; transition:var(--ryr-transition); padding:0; }
.ryr-footer-social a:hover { background:var(--ryr-red); color:var(--ryr-white); padding-left:0; }
.ryr-footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:var(--ryr-space-sm) 0; text-align:center; font-size:11px; color:rgba(255,255,255,0.3); font-weight:500; text-transform:uppercase; letter-spacing:1px; }

/* ── WHATSAPP FLOAT ──────────────────────────────────── */
.ryr-whatsapp-float { position:fixed; bottom:28px; right:28px; background:#25D366; color:var(--ryr-white); width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:26px; box-shadow:0 4px 20px rgba(37,211,102,0.4); z-index:998; transition:var(--ryr-transition); }
.ryr-whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.5); color:var(--ryr-white); }

/* ── HERO ────────────────────────────────────────────── */
.ryr-hero { position:relative; min-height:88vh; display:flex; align-items:center; background:var(--ryr-dark); overflow:hidden; }
.ryr-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.45; }
.ryr-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,26,26,0.85) 0%,rgba(124,34,33,0.4) 100%); }
.ryr-hero-content { position:relative; z-index:10; padding:var(--ryr-space-xl) 0; }
.ryr-hero-badge { display:inline-block; padding:5px 16px; border:1px solid var(--ryr-gold); color:var(--ryr-gold); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:3px; margin-bottom:var(--ryr-space-md); }
.ryr-hero-title { font-size:clamp(36px,6vw,72px); font-weight:900; color:var(--ryr-white); text-transform:uppercase; line-height:1; margin-bottom:10px; }
.ryr-hero-subtitle { font-size:clamp(28px,4vw,52px); font-weight:900; color:var(--ryr-gold); text-transform:uppercase; font-style:italic; line-height:1; margin-bottom:var(--ryr-space-md); }
.ryr-hero-text { font-size:16px; color:rgba(255,255,255,0.75); max-width:520px; margin-bottom:var(--ryr-space-lg); line-height:1.7; }
.ryr-hero-actions { display:flex; gap:var(--ryr-space-sm); flex-wrap:wrap; }
.ryr-stats { background:var(--ryr-white); padding:var(--ryr-space-lg) 0; border-bottom:3px solid var(--ryr-gold-light); }
.ryr-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ryr-space-md); text-align:center; }
.ryr-stat-item { padding:var(--ryr-space-md); border-right:1px solid var(--ryr-border); }
.ryr-stat-item:last-child { border-right:none; }
.ryr-stat-number { font-size:40px; font-weight:900; color:var(--ryr-red); line-height:1; margin-bottom:6px; }
.ryr-stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ryr-text-muted); }

/* ── CATÁLOGO ────────────────────────────────────────── */
.ryr-catalogo { padding:var(--ryr-space-xl) 0; }
.ryr-catalogo-header { margin-bottom:var(--ryr-space-lg); }
.ryr-categorias-container { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--ryr-space-lg); border-bottom:1px solid var(--ryr-border); padding-bottom:var(--ryr-space-sm); }
.ryr-categoria-btn { padding:9px 20px; font-family:var(--ryr-font); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ryr-text-muted); background:none; border:none; border-bottom:3px solid transparent; cursor:pointer; transition:var(--ryr-transition); text-decoration:none; display:inline-block; margin-bottom:-1px; }
.ryr-categoria-btn:hover,.ryr-categoria-btn.active { color:var(--ryr-red); border-bottom-color:var(--ryr-red); }
.ryr-catalogo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ryr-space-md); }
.ryr-vehiculo-card { background:var(--ryr-white); border-radius:var(--ryr-radius-lg); overflow:hidden; border:1px solid var(--ryr-border); transition:var(--ryr-transition); display:flex; flex-direction:column; }
.ryr-vehiculo-card:hover { transform:translateY(-6px); box-shadow:var(--ryr-shadow-lg); border-color:var(--ryr-gold); }
.ryr-vehiculo-imagen { position:relative; height:220px; overflow:hidden; background:var(--ryr-dark); }
.ryr-vehiculo-imagen img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.ryr-vehiculo-card:hover .ryr-vehiculo-imagen img { transform:scale(1.05); }
.ryr-vehiculo-imagen-badge { position:absolute; top:12px; left:12px; }
.ryr-vehiculo-info { padding:var(--ryr-space-md); display:flex; flex-direction:column; flex:1; }
.ryr-vehiculo-titulo { font-size:17px; font-weight:700; color:var(--ryr-text); margin-bottom:8px; }
.ryr-vehiculo-placa { font-size:12px; color:var(--ryr-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.ryr-vehiculo-estado { font-size:12px; color:var(--ryr-text-muted); margin-bottom:var(--ryr-space-sm); }
.ryr-vehiculo-precio { font-size:22px; font-weight:800; color:var(--ryr-red); margin-bottom:var(--ryr-space-sm); margin-top:auto; }
.ryr-vehiculo-precio span { font-size:12px; font-weight:500; color:var(--ryr-text-muted); }
.ryr-vehiculo-card .ryr-btn-primary { width:100%; justify-content:center; margin-top:var(--ryr-space-sm); }

/* ── SINGLE VEHÍCULO ─────────────────────────────────── */
.ryr-vehiculo-single { display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--ryr-space-lg); padding:var(--ryr-space-lg) 0; align-items:start; }
.ryr-vehiculo-single-info h1 { font-size:clamp(24px,3vw,36px); font-weight:800; margin-bottom:var(--ryr-space-sm); }
.ryr-vehiculo-meta { display:flex; flex-direction:column; gap:8px; margin-bottom:var(--ryr-space-md); }
.ryr-vehiculo-meta p { font-size:13px; color:var(--ryr-text-muted); margin:0; display:flex; align-items:center; gap:8px; }
.ryr-vehiculo-meta strong { color:var(--ryr-text); min-width:80px; font-weight:600; }
.ryr-precio { font-size:36px; font-weight:900; color:var(--ryr-red); margin:var(--ryr-space-md) 0; line-height:1; }
.ryr-precio span { font-size:14px; font-weight:500; color:var(--ryr-text-muted); }
.ryr-vehiculo-descripcion { background:var(--ryr-light); border-left:3px solid var(--ryr-gold); padding:var(--ryr-space-md); border-radius:0 var(--ryr-radius) var(--ryr-radius) 0; margin:var(--ryr-space-md) 0; }
.ryr-vehiculo-descripcion h3 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ryr-text-muted); margin-bottom:10px; }
.ryr-descripcion-texto { font-size:14px; color:var(--ryr-text); line-height:1.7; }

/* ── SLIDER ──────────────────────────────────────────── */
.ryr-vehiculo-slider { width:100%; position:relative; top:0; }
.ryr-slider-main { width:100%; height:440px; overflow:hidden; position:relative; border-radius:var(--ryr-radius-lg); background:var(--ryr-dark); }
.ryr-slider-track { display:flex; height:100%; transition:transform 0.5s ease; }
.ryr-slide { min-width:100%; height:100%; }
.ryr-slide img { width:100%; height:100%; object-fit:contain; object-position:center; }
.ryr-slider-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.55); color:var(--ryr-white); border:none; width:44px; height:44px; border-radius:50%; cursor:pointer; z-index:10; font-size:20px; display:flex; align-items:center; justify-content:center; transition:var(--ryr-transition); backdrop-filter:blur(4px); }
.ryr-slider-btn:hover { background:var(--ryr-red); }
.ryr-slider-prev { left:12px; }
.ryr-slider-next { right:12px; }
.ryr-slider-dots { text-align:center; margin-top:12px; }
.ryr-dot { display:inline-block; width:8px; height:8px; margin:0 4px; background:var(--ryr-border); border-radius:50%; cursor:pointer; transition:var(--ryr-transition); }
.ryr-dot.active { background:var(--ryr-red); width:24px; border-radius:4px; }
.ryr-slider-thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.ryr-thumb { width:76px; height:56px; object-fit:cover; border-radius:var(--ryr-radius-sm); cursor:pointer; opacity:0.55; transition:var(--ryr-transition); flex-shrink:0; border:2px solid transparent; }
.ryr-thumb.active { opacity:1; border-color:var(--ryr-red); }
.ryr-thumb:hover { opacity:0.85; }

/* ── RELACIONADOS ────────────────────────────────────── */
.ryr-relacionados { padding:var(--ryr-space-xl) 0; border-top:1px solid var(--ryr-border); margin-top:var(--ryr-space-xl); }
.ryr-relacionados-title { font-size:26px; font-weight:800; text-transform:uppercase; margin-bottom:var(--ryr-space-lg); }
.ryr-relacionados-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ryr-space-md); }
.ryr-relacionado-card { background:var(--ryr-white); border-radius:var(--ryr-radius-lg); overflow:hidden; border:1px solid var(--ryr-border); transition:var(--ryr-transition); }
.ryr-relacionado-card:hover { transform:translateY(-4px); box-shadow:var(--ryr-shadow-md); border-color:var(--ryr-gold); }
.ryr-relacionado-img { height:190px; overflow:hidden; background:var(--ryr-dark); }
.ryr-relacionado-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.ryr-relacionado-card:hover .ryr-relacionado-img img { transform:scale(1.04); }
.ryr-relacionado-info { padding:var(--ryr-space-sm) var(--ryr-space-md); }
.ryr-relacionado-info h3 { font-size:15px; font-weight:700; margin-bottom:6px; }
.ryr-relacionado-precio { font-size:18px; font-weight:800; color:var(--ryr-red); margin-bottom:var(--ryr-space-sm); }
.ryr-relacionado-info .ryr-btn-primary { width:100%; justify-content:center; font-size:11px; padding:10px; }

/* ── PARTIALS ────────────────────────────────────────── */
.ryr-confianza { background:var(--ryr-white); padding:var(--ryr-space-lg) 0; border-top:1px solid var(--ryr-border); }
.ryr-confianza-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ryr-space-md); margin-top:var(--ryr-space-md); }
.ryr-confianza-item { text-align:center; padding:var(--ryr-space-md); }
.ryr-confianza-item i { font-size:28px; color:var(--ryr-gold); margin-bottom:10px; }
.ryr-confianza-item p { font-size:13px; font-weight:600; color:var(--ryr-text); text-transform:uppercase; letter-spacing:0.5px; margin:0; }
.ryr-beneficios { background:var(--ryr-light); padding:var(--ryr-space-lg) 0; }
.ryr-beneficios-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ryr-space-md); margin-top:var(--ryr-space-md); }
.ryr-beneficio-item { background:var(--ryr-white); padding:var(--ryr-space-md); border-radius:var(--ryr-radius-lg); text-align:center; border:1px solid var(--ryr-border); transition:var(--ryr-transition); }
.ryr-beneficio-item:hover { border-color:var(--ryr-gold); box-shadow:var(--ryr-shadow-sm); }
.ryr-beneficio-item i { font-size:24px; color:var(--ryr-red); margin-bottom:10px; }
.ryr-beneficio-item p { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--ryr-text); margin:0; }
.ryr-cta-context { background:var(--ryr-white); padding:var(--ryr-space-lg) 0; border-top:1px solid var(--ryr-border); text-align:center; }
.ryr-cta-context h2 { margin-bottom:var(--ryr-space-sm); }
.ryr-cta-context p { color:var(--ryr-text-muted); margin-bottom:var(--ryr-space-md); }
.ryr-cta-final { background:var(--ryr-red); padding:var(--ryr-space-xl) 0; text-align:center; position:relative; overflow:hidden; }
.ryr-cta-final::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,0.03) 10px,rgba(0,0,0,0.03) 20px); }
.ryr-cta-final .ryr-container { position:relative; z-index:1; }
.ryr-cta-final h2 { color:var(--ryr-white); font-size:clamp(24px,4vw,40px); font-weight:900; text-transform:uppercase; margin-bottom:var(--ryr-space-sm); }
.ryr-cta-final p { color:rgba(255,255,255,0.8); font-size:16px; margin-bottom:var(--ryr-space-lg); }
.ryr-btn-large { padding:16px 40px; font-size:14px; }


/*
============================================================
DASHBOARD — LAYOUT SIDEBAR CON COLAPSO
------------------------------------------------------------
TEXTO DE LINKS:
  El texto de cada link vive en <span class="ryr-link-text">.
  Al colapsar ese span se oculta — solo queda el <i> del icono.
  CRÍTICO: el texto NUNCA debe ir como texto plano en el <a>,
  siempre dentro de <span class="ryr-link-text">.

LOGO:
  Los templates v1.7.7 usan UNA sola imagen .ryr-sidebar-logo-img.
  Al colapsar, esa imagen se redimensiona a 32px y se centra.
  El .ryr-sidebar-brand-text (título + subtítulo) se oculta.
  NO se requiere imagen alternativa .ryr-sidebar-logo-icon.
------------------------------------------------------------
*/
.ryr-dashboard { display: flex; min-height: 100vh; background: var(--ryr-light); }


/* ════════════════════════════════════════════════════════
SIDEBAR — BASE
overflow-x:hidden CRÍTICO — sin esto el texto se desborda
fuera del ancho colapsado de 56px.
════════════════════════════════════════════════════════ */
.ryr-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--ryr-dark);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    transition: width 0.3s ease, min-width 0.3s ease;
    flex-shrink: 0;
    z-index: 100;
}
.ryr-sidebar::-webkit-scrollbar { display: none; }

/* ── BRAND / LOGO ── */
.ryr-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
    transition: padding 0.3s ease, justify-content 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
}

/*
LOGO — una sola imagen que se adapta a expandido y colapsado.
En expandido: max-height:44px, muestra completo.
En colapsado: max-height:32px, centrado (ver reglas colapsado).
*/
.ryr-sidebar-logo-img {
    max-height: 44px;
    width: auto;
    display: block;
    flex-shrink: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

/*
Compatibilidad con versiones anteriores que usaban
.ryr-sidebar-logo-icon como imagen separada — se mantiene
oculto por defecto. Si se usa, aparecerá solo en colapsado
cuando se agregue .ryr-sidebar-collapsed.
*/
.ryr-sidebar-logo-icon { display: none; }

/*
BRAND TEXT — título "Centro de Gestión" + subtítulo.
Se oculta al colapsar con opacity + width + overflow.
*/
.ryr-sidebar-brand-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: opacity 0.2s ease, width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}
.ryr-sidebar-brand-title { font-size:13px; font-weight:800; color:var(--ryr-white); text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.ryr-sidebar-brand-sub   { font-size:10px; color:var(--ryr-gold); font-weight:600; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }

/* ── SEPARADORES Y TÍTULOS ── */
.ryr-sidebar-divider { height:1px; background:rgba(255,255,255,0.06); margin:8px 0; flex-shrink:0; }
.ryr-sidebar-section-title {
    padding: var(--ryr-space-sm) var(--ryr-space-md) 8px;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
    color: rgba(255,255,255,0.3);
    white-space: nowrap; overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.3s ease, padding 0.3s ease;
}


/* ════════════════════════════════════════════════════════
SIDEBAR LINKS
------------------------------------------------------------
ESTRUCTURA HTML OBLIGATORIA:
  <a class="ryr-sidebar-link" data-tooltip="Texto">
      <i class="fas fa-icon"></i>
      <span class="ryr-link-text">Texto visible</span>
      <span class="ryr-sidebar-badge">3</span>  ← opcional
  </a>

NUNCA poner el texto como texto plano en el <a>.
════════════════════════════════════════════════════════ */
.ryr-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px var(--ryr-space-md);
    color: rgba(255,255,255,0.55);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: var(--ryr-transition);
    border-left: 3px solid transparent;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}
.ryr-sidebar-link i {
    width: 18px; min-width: 18px;
    font-size: 14px; text-align: center;
    color: rgba(255,255,255,0.3);
    transition: var(--ryr-transition);
    flex-shrink: 0;
}

/*
SPAN DEL TEXTO — elemento clave del colapso limpio.
opacity + width garantizan que desaparezca completamente.
*/
.ryr-link-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.25s ease, width 0.3s ease, max-width 0.3s ease;
}

.ryr-sidebar-link:hover, .ryr-sidebar-link.active {
    color: var(--ryr-white);
    background: rgba(255,255,255,0.05);
    border-left-color: var(--ryr-gold);
}
.ryr-sidebar-link:hover i, .ryr-sidebar-link.active i { color: var(--ryr-gold); }

/*
BADGE — contador de items activos (ej: arriendos activos).
display:inline-flex en estado normal.
En colapsado se usa display:none — ver regla más abajo.
*/
.ryr-sidebar-badge {
    margin-left: auto;
    background: var(--ryr-red); color: #fff;
    font-size: 9px; font-weight: 800;
    padding: 2px 7px; border-radius: 100px;
    min-width: 18px; text-align: center;
    flex-shrink: 0;
}


/* ── USUARIO ── */
.ryr-sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    flex-shrink: 0; overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
}
.ryr-sidebar-user-avatar {
    width:34px; height:34px; min-width:34px;
    background:var(--ryr-red); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:#fff; flex-shrink:0;
}
.ryr-sidebar-user-info { flex:1; min-width:0; overflow:hidden; transition:opacity 0.2s ease, width 0.3s ease; }
.ryr-sidebar-user-info span { display:block; font-size:12px; font-weight:700; color:rgba(255,255,255,0.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ryr-sidebar-user-info small { font-size:10px; color:var(--ryr-gold); font-weight:600; }
.ryr-sidebar-logout { color:rgba(255,255,255,0.3); font-size:14px; transition:var(--ryr-transition); padding:4px; flex-shrink:0; }
.ryr-sidebar-logout:hover { color:var(--ryr-red); }


/* ════════════════════════════════════════════════════════
BOTÓN TOGGLE — AL FONDO
════════════════════════════════════════════════════════ */
.ryr-sidebar-toggle-bottom {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; flex-shrink: 0; cursor: pointer;
    background: none; border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    transition: var(--ryr-transition);
    width: 100%; text-align: left; overflow: hidden; white-space: nowrap;
}
.ryr-sidebar-toggle-bottom:hover { background:rgba(255,255,255,0.05); color:var(--ryr-gold); }
.ryr-sidebar-toggle-bottom .ryr-toggle-icon {
    width:28px; height:28px; min-width:28px;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--ryr-radius-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; flex-shrink:0; transition:var(--ryr-transition);
}
.ryr-sidebar-toggle-bottom:hover .ryr-toggle-icon { background:rgba(166,137,83,0.15); border-color:rgba(166,137,83,0.35); color:var(--ryr-gold); }
.ryr-sidebar-toggle-label { overflow:hidden; transition:opacity 0.2s ease, width 0.3s ease, max-width 0.3s ease; white-space:nowrap; }

/* Rotar la flecha al colapsar */
.ryr-sidebar-collapsed #ryr-toggle-icon { transform: rotate(180deg); }


/* ════════════════════════════════════════════════════════
SIDEBAR COLAPSADO
════════════════════════════════════════════════════════ */
.ryr-sidebar-collapsed .ryr-sidebar { width:var(--sidebar-collapsed-width); min-width:var(--sidebar-collapsed-width); }

/* ──────────────────────────────────────────────────────
LOGO EN MODO COLAPSADO — v1.7.5
Se redimensiona el logo principal a 32px y se centra.
El brand-text (título + subtítulo) desaparece con opacity+width.
No se necesita imagen alternativa .ryr-sidebar-logo-icon.
────────────────────────────────────────────────────────── */
.ryr-sidebar-collapsed .ryr-sidebar-brand {
    justify-content: center;
    padding: 12px 0;
}
.ryr-sidebar-collapsed .ryr-sidebar-logo-img {
    max-height: 32px;
}
.ryr-sidebar-collapsed .ryr-sidebar-brand-text {
    opacity: 0;
    width: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Títulos de sección */
.ryr-sidebar-collapsed .ryr-sidebar-section-title {
    opacity:0; max-height:0; padding-top:0; padding-bottom:0; overflow:hidden; pointer-events:none;
}

/* ════ TEXTO DE LINKS — DESAPARECE COMPLETAMENTE ════
   opacity:0 lo hace invisible.
   width:0 + max-width:0 elimina su espacio en el layout.
*/
.ryr-sidebar-collapsed .ryr-link-text {
    opacity: 0;
    width: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ════ BADGE — ELIMINADO DEL FLUJO ════
   CRÍTICO v1.7.5: display:none !important en lugar de
   opacity:0 + width:0. Con opacity+width el badge seguía
   en el flujo flex del link y se desplazaba fuera como
   ícono flotante independiente (llave dorada suelta).
   display:none lo elimina completamente del DOM visual.
*/
.ryr-sidebar-collapsed .ryr-sidebar-badge { display: none !important; }

/* Links — solo icono centrado */
.ryr-sidebar-collapsed .ryr-sidebar-link { justify-content:center; padding:13px 0; gap:0; border-left-color:transparent; }
.ryr-sidebar-collapsed .ryr-sidebar-link i { width:auto; min-width:auto; font-size:16px; }
.ryr-sidebar-collapsed .ryr-sidebar-link.active,
.ryr-sidebar-collapsed .ryr-sidebar-link:hover { border-left-color:transparent; border-right:2px solid var(--ryr-gold); }

/* Tooltip en hover colapsado */
.ryr-sidebar-collapsed .ryr-sidebar-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--sidebar-collapsed-width) + 10px);
    top: 50%; transform: translateY(-50%);
    background: var(--ryr-dark-2); color: var(--ryr-white);
    font-size: 11px; font-weight: 700;
    padding: 5px 12px; border-radius: var(--ryr-radius);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.15s ease;
    z-index: 999; box-shadow: var(--ryr-shadow-md);
    border: 1px solid rgba(255,255,255,0.08);
}
.ryr-sidebar-collapsed .ryr-sidebar-link:hover::after { opacity:1; }

/* Usuario — solo avatar */
.ryr-sidebar-collapsed .ryr-sidebar-user { justify-content:center; padding:12px 0; }
.ryr-sidebar-collapsed .ryr-sidebar-user-info,
.ryr-sidebar-collapsed .ryr-sidebar-logout { opacity:0; width:0; overflow:hidden; pointer-events:none; }

/* Toggle bottom — solo ícono */
.ryr-sidebar-collapsed .ryr-sidebar-toggle-bottom { justify-content:center; padding:10px 0; }
.ryr-sidebar-collapsed .ryr-sidebar-toggle-label { opacity:0; width:0; max-width:0; overflow:hidden; pointer-events:none; }


/* ════════════════════════════════════════════════════════
DASHBOARD — CONTENIDO
════════════════════════════════════════════════════════ */
.ryr-dashboard-content { flex:1; padding:var(--ryr-space-lg); overflow:auto; min-width:0; transition:padding 0.3s ease; }
.ryr-dashboard-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--ryr-space-lg); padding-bottom:var(--ryr-space-md); border-bottom:1px solid var(--ryr-border); flex-wrap:wrap; gap:12px; }
.ryr-dashboard-title { font-size:24px; font-weight:800; color:var(--ryr-text); text-transform:uppercase; letter-spacing:-0.5px; }
.ryr-dashboard-date { font-size:12px; color:var(--ryr-text-muted); font-weight:500; margin:0; }

/* KPI */
.ryr-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ryr-space-md); margin-bottom:var(--ryr-space-lg); }
.ryr-kpi-card { background:var(--ryr-white); border-radius:var(--ryr-radius-lg); padding:var(--ryr-space-md); border:1px solid var(--ryr-border); display:flex; align-items:flex-start; gap:var(--ryr-space-sm); transition:var(--ryr-transition); }
.ryr-kpi-card:hover { box-shadow:var(--ryr-shadow-md); border-color:var(--ryr-gold); }
.ryr-kpi-icon { width:48px; height:48px; min-width:48px; border-radius:var(--ryr-radius); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.ryr-kpi-icon-red   { background:var(--ryr-red-light);  color:var(--ryr-red); }
.ryr-kpi-icon-gold  { background:var(--ryr-gold-light); color:var(--ryr-gold); }
.ryr-kpi-icon-green { background:rgba(34,197,94,0.1);   color:#16a34a; }
.ryr-kpi-icon-orange{ background:rgba(249,115,22,0.1);  color:#ea580c; }
.ryr-kpi-body { flex:1; min-width:0; }
.ryr-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ryr-text-muted); margin-bottom:6px; }
.ryr-kpi-value { font-size:28px; font-weight:900; color:var(--ryr-text); line-height:1; margin-bottom:4px; }
.ryr-kpi-sub { font-size:11px; color:var(--ryr-text-muted); }

/* Tablas */
.ryr-dashboard-card { background:var(--ryr-white); border-radius:var(--ryr-radius-lg); border:1px solid var(--ryr-border); margin-bottom:var(--ryr-space-md); overflow:hidden; }
.ryr-dashboard-card-header { display:flex; align-items:center; justify-content:space-between; padding:var(--ryr-space-md) var(--ryr-space-md) var(--ryr-space-sm); border-bottom:1px solid var(--ryr-border); flex-wrap:wrap; gap:8px; }
.ryr-dashboard-card-title { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--ryr-text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ryr-dashboard-card-title i { color:var(--ryr-gold); }
.ryr-table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ryr-table { width:100%; border-collapse:collapse; font-size:13px; }
.ryr-table thead th { background:var(--ryr-light); padding:10px var(--ryr-space-md); text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--ryr-text-muted); border-bottom:1px solid var(--ryr-border); white-space:nowrap; }
.ryr-table tbody td { padding:12px var(--ryr-space-md); border-bottom:1px solid var(--ryr-border); color:var(--ryr-text); vertical-align:middle; }
.ryr-table tbody tr:last-child td { border-bottom:none; }
.ryr-table tbody tr:hover td { background:var(--ryr-light); }
.ryr-table-empty { text-align:center; padding:var(--ryr-space-lg); color:var(--ryr-text-muted); font-size:13px; }
.ryr-table-empty i { font-size:32px; color:var(--ryr-border); display:block; margin-bottom:10px; }

/* Alertas */
.ryr-alert { padding:var(--ryr-space-sm) var(--ryr-space-md); border-radius:var(--ryr-radius); margin-bottom:10px; display:flex; align-items:flex-start; gap:12px; font-size:13px; }
.ryr-alert i { font-size:16px; margin-top:1px; flex-shrink:0; }
.ryr-alert-warning { background:rgba(249,115,22,0.08); border:1px solid rgba(249,115,22,0.25); color:#9a3412; }
.ryr-alert-warning i { color:#ea580c; }
.ryr-alert-danger { background:rgba(124,34,33,0.08); border:1px solid rgba(124,34,33,0.2); color:var(--ryr-red); }
.ryr-alert-danger i { color:var(--ryr-red); }
.ryr-alert-success { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); color:#15803d; }
.ryr-alert-success i { color:#16a34a; }
.ryr-alert-info { background:rgba(166,137,83,0.08); border:1px solid rgba(166,137,83,0.2); color:#92620a; }
.ryr-alert-info i { color:var(--ryr-gold); }
.ryr-alert-body strong { display:block; font-weight:700; margin-bottom:2px; }
.ryr-alert-body span { font-size:12px; opacity:0.8; }

/* Semáforos */
.ryr-semaforo { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:88px; height:24px; border-radius:100px; font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden; cursor:default; flex-shrink:0; }
.ryr-semaforo > i.fa-circle { font-size:6px; flex-shrink:0; line-height:1; }
.ryr-semaforo > i.fa-tools, .ryr-semaforo > i.fa-wrench, .ryr-semaforo > i.fa-check { font-size:9px; flex-shrink:0; }
.ryr-semaforo-text { font-size:10px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1; }
.ryr-semaforo--verde    { background:rgba(34,197,94,0.1);    color:#16a34a;        border:1px solid rgba(34,197,94,0.2); }
.ryr-semaforo--amarillo { background:rgba(234,179,8,0.1);    color:#a16207;        border:1px solid rgba(234,179,8,0.25); }
.ryr-semaforo--rojo     { background:rgba(124,34,33,0.1);    color:var(--ryr-red); border:1px solid rgba(124,34,33,0.2); animation:ryr-semaforo-pulso 2s ease-in-out infinite; }
.ryr-semaforo--negro    { background:rgba(107,114,128,0.08); color:#6b7280;        border:1px solid rgba(107,114,128,0.15); }
.ryr-semaforo--naranja  { background:rgba(249,115,22,0.1);   color:#c2410c;        border:1px solid rgba(249,115,22,0.2); }
.ryr-semaforo--ok       { background:rgba(34,197,94,0.06);   color:#15803d;        border:1px solid rgba(34,197,94,0.12); }
@keyframes ryr-semaforo-pulso { 0%,100% { opacity:1; } 50% { opacity:0.6; } }



/* ════════════════════════════════════════════════════════
SIDEBAR BRAND HEADER v1.8.0
------------------------------------------------------------
Texto "Centro de Gestión / Empresarial & Legal" ahora
vive ENCIMA del logo en .ryr-sidebar-brand-header.
El .ryr-sidebar-brand ahora solo contiene el logo.
CAMBIO: antes el texto estaba dentro de .ryr-sidebar-brand
        al lado del logo — no cabía visualmente.
════════════════════════════════════════════════════════ */
.ryr-sidebar-brand-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.3s ease, padding 0.3s ease;
    flex-shrink: 0;
}
.ryr-sidebar-brand-header .ryr-sidebar-brand-title {
    display: block;
    font-size: 11px; font-weight: 800; color: var(--ryr-white);
    text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.ryr-sidebar-brand-header .ryr-sidebar-brand-sub {
    display: block;
    font-size: 9px; color: var(--ryr-gold); font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
LOGO DUAL v1.8.0
------------------------------------------------------------
.ryr-logo-expandido → logo horizontal, visible en expandido
.ryr-logo-colapsado → logo cuadrado/isotipo, visible en colapsado
Ambos PNG transparentes en assets/img/
════════════════════════════════════════════════════════ */
.ryr-logo-expandido { display: block; }
.ryr-logo-colapsado { display: none; }

/* Al colapsar: mostrar logo cuadrado, ocultar horizontal */
.ryr-sidebar-collapsed .ryr-logo-expandido { display: none; }
.ryr-sidebar-collapsed .ryr-logo-colapsado { display: block; max-height: 36px; width: auto; }

/* Brand header oculto al colapsar */
.ryr-sidebar-collapsed .ryr-sidebar-brand-header {
    max-height: 0; opacity: 0;
    padding-top: 0; padding-bottom: 0;
    border-bottom: none; pointer-events: none;
}

/* Brand centrado al colapsar */
.ryr-sidebar-collapsed .ryr-sidebar-brand {
    justify-content: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* === FIN SIDEBAR v1.8.0 === */

/*
============================================================
RESPONSIVE
============================================================
*/
@media (max-width: 1280px) { .ryr-kpi-grid { grid-template-columns:repeat(2,1fr); } }

@media (max-width: 1024px) {
    .ryr-footer-grid { grid-template-columns:1fr 1fr; gap:var(--ryr-space-md); }
    .ryr-confianza-grid,.ryr-beneficios-grid { grid-template-columns:repeat(2,1fr); }
    .ryr-catalogo-grid { grid-template-columns:repeat(2,1fr); }
    .ryr-stats-grid { grid-template-columns:repeat(2,1fr); }
    .ryr-dashboard { flex-direction:column; min-height:100vh; padding-bottom:64px; }
    .ryr-sidebar {
        position:fixed; bottom:0; left:0; right:0; top:auto !important;
        width:100% !important; min-width:100% !important;
        height:64px; flex-direction:row; align-items:center; justify-content:center;
        overflow-x:auto; overflow-y:hidden; padding:0; z-index:200;
        box-shadow:0 -2px 16px rgba(0,0,0,0.35);
        border-top:2px solid rgba(166,137,83,0.25);
    }
    .ryr-sidebar::-webkit-scrollbar { display:none; }
    .ryr-sidebar-brand, .ryr-sidebar-section-title, .ryr-sidebar-divider,
    .ryr-sidebar-user, .ryr-sidebar-toggle-bottom { display:none !important; }
    .ryr-sidebar-link {
        flex-direction:column; align-items:center; justify-content:center;
        gap:3px; flex-shrink:0; padding:6px 12px;
        border-left:none !important; border-right:none !important;
        border-top:3px solid transparent;
        font-size:9px; letter-spacing:0; min-width:64px; text-align:center;
        height:64px; overflow:visible; white-space:nowrap;
    }
    .ryr-sidebar-link i { width:auto; font-size:16px; margin:0; }
    .ryr-sidebar-link .ryr-link-text { opacity:1 !important; width:auto !important; max-width:none !important; font-size:9px; }
    .ryr-sidebar-link.active, .ryr-sidebar-link:hover { border-top-color:var(--ryr-gold); border-left:none !important; border-right:none !important; background:rgba(255,255,255,0.07); }
    .ryr-sidebar-badge { display:none; }
    .ryr-sidebar-collapsed .ryr-sidebar-link::after { display:none; }
    .ryr-dashboard-content { padding:var(--ryr-space-md); }
    .ryr-dashboard-2col { flex-direction:column; }
    .ryr-dashboard-2col > * { width:100% !important; min-width:unset !important; }
}

@media (max-width: 768px) {
    .ryr-hero-slider { width: 100vw; max-width: 100vw; left: 0; right: 0; }
    .ryr-vehiculo-single { grid-template-columns:1fr; }
    .ryr-slider-main { height:280px; }
    .ryr-relacionados-grid { grid-template-columns:1fr; }
    .ryr-hero-title { font-size:36px; }
    .ryr-hero-subtitle { font-size:28px; }
    .ryr-hero-actions { flex-direction:column; }
    .ryr-kpi-grid { grid-template-columns:1fr 1fr; }
    .ryr-dashboard-content { padding:var(--ryr-space-sm); }
    .ryr-dashboard-header { flex-direction:column; align-items:flex-start; gap:10px; }
    .ryr-dashboard-header > div:last-child { width:100%; }
    .ryr-dashboard-title { font-size:20px; }
    .ryr-kpi-value { font-size:22px; }
    .ryr-kpi-card { padding:var(--ryr-space-sm); gap:12px; }
    .ryr-kpi-icon { width:40px; height:40px; min-width:40px; font-size:16px; }
    .ryr-table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .ryr-table { min-width:600px; }
    .ryr-semaforo { width:78px; height:22px; font-size:9px; }

}

@media (max-width: 480px) {
    .ryr-container { width:94%; }
    /* .ryr-catalogo-grid ya es flex slider desde 768px */
    .ryr-stats-grid { grid-template-columns:1fr 1fr; }
    .ryr-footer-grid { grid-template-columns:1fr; }
    .ryr-slider-main { height:220px; }
    .ryr-confianza-grid,.ryr-beneficios-grid { grid-template-columns:1fr 1fr; }
    .ryr-kpi-grid { grid-template-columns:1fr; }
    .ryr-kpi-value { font-size:20px; }
    .ryr-dashboard-content { padding:var(--ryr-space-xs); }
    .ryr-sidebar { height:56px; }
    .ryr-sidebar-link { min-width:52px; padding:5px 8px; font-size:8px; height:56px; }
    .ryr-sidebar-link i { font-size:14px; }
    .ryr-sidebar-link .ryr-link-text { font-size:8px; }
    .ryr-dashboard { padding-bottom:56px; }
    .ryr-semaforo { width:68px; height:20px; font-size:9px; gap:3px; }
    .ryr-semaforo-text { font-size:9px; }
}


/*
============================================================
╔══════════════════════════════════════════════════════════╗
║         DOCUMENTACIÓN INTERNA — PARA IAs Y DEVS         ║
╚══════════════════════════════════════════════════════════╝

ARCHIVO:   assets/css/frontend.css
VERSIÓN:   1.7.5
ACTUALIZADO: 2026-03-05

────────────────────────────────────────────────────────────
CORRECCIONES v1.7.5
────────────────────────────────────────────────────────────
1. BADGE CON display:none AL COLAPSAR
   PROBLEMA: Al colapsar, el .ryr-sidebar-badge del link
   de Arriendos se desplazaba fuera del link y aparecía como
   un ícono dorado flotante en la barra lateral (llave suelta).
   CAUSA: opacity:0 + width:0 lo hace invisible pero no lo
   saca del flujo flex. Al cambiar el link a justify-content:center,
   el badge (aún en el flujo) se reposicionaba fuera del área visible.
   SOLUCIÓN: display:none !important — elimina el elemento
   completamente del DOM visual y del flujo flex.

2. LOGO EN MODO COLAPSADO — UNA SOLA IMAGEN
   PROBLEMA: El CSS anterior usaba .ryr-sidebar-logo-icon
   como imagen alternativa para el modo colapsado, pero los
   templates v1.7.7 solo tienen una imagen .ryr-sidebar-logo-img.
   Al colapsar, el CSS hacía display:none del logo principal
   y display:block del logo-icon (que no existía) → área vacía.
   SOLUCIÓN: El logo principal .ryr-sidebar-logo-img se
   redimensiona de max-height:44px a max-height:32px al colapsar
   y se centra con justify-content:center en el brand.
   El .ryr-sidebar-brand-text (título + subtítulo) se oculta con
   opacity:0 + width:0 + pointer-events:none.
   .ryr-sidebar-logo-icon se mantiene en el CSS (display:none)
   para compatibilidad con plantillas antiguas pero NO es necesario.

────────────────────────────────────────────────────────────
CORRECCIÓN v1.7.4 (heredada)
────────────────────────────────────────────────────────────
TEXTO VISIBLE AL COLAPSAR — .ryr-link-text con
opacity:0 + width:0 + max-width:0 al colapsar.
El texto de cada link SIEMPRE en <span class="ryr-link-text">.

────────────────────────────────────────────────────────────
REGLAS CRÍTICAS
────────────────────────────────────────────────────────────
BADGE:   display:none en colapsado — NUNCA opacity:0 + width:0
LOGO:    una sola imagen .ryr-sidebar-logo-img, se redimensiona
TEXTO:   SIEMPRE en <span class="ryr-link-text">
OVERFLOW: .ryr-sidebar overflow-x:hidden — NUNCA quitar
COLAPSO: clase .ryr-sidebar-collapsed en #ryr-dashboard-wrapper
TOGGLE:  id="ryr-sidebar-toggle" en el botón al fondo
PALETA:  nunca cambiar --ryr-red, --ryr-gold, --ryr-dark
SEMÁF.:  width:88px FIJO

============================================================
*/