/* ============================================
   Digital-Public — CSS Principal v3.0
   Moderno · Responsivo · Flexbox/Grid
   Compatible: Chrome, Firefox, Safari, Edge, iOS, Android
   ============================================ */

:root {
  --color-primary:    #C62828;
  --color-primary-dk: #8e1a1a;
  --color-primary-lt: #ef5350;
  --color-accent:     #F09000;
  --color-dark:       #1a1a1a;
  --color-gray-dk:    #2e2e2e;
  --color-gray:       #6c757d;
  --color-gray-lt:    #9199A1;
  --color-border:     #E4E4E4;
  --color-bg:         #F7F7F9;
  --color-white:      #ffffff;
  --color-success:    #2e7d32;
  --color-info:       #0277bd;
  --color-warning:    #e65100;
  --font-main:   'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --navbar-h:    62px;
  --navbar-h-sm: 56px;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.11);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.14);
  --transition: all .22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,html {
  padding: 0; margin: 0; width: 100%;
  font-family: var(--font-main);
  font-size: 16px; line-height: 1.55;
  color: var(--color-dark);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { padding-top: var(--navbar-h); }
img  { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a:hover,a:focus { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-xs); }

/* ── Utilidades ── */
.text-light     { font-weight: 300; }
.text-semi-bold { font-weight: 600; }
.text-bold      { font-weight: 700; }
.full-width { width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
.divider { width: 95%; display: block; margin: 12px auto; height: 0; border: 0; border-top: 1px solid var(--color-border); }
.section { padding: 56px 0; }
.res-msj { margin-top: 10px; display: none; }

.skip-link {
  position: absolute; top: -50px; left: 0;
  background: var(--color-primary); color: #fff;
  padding: 8px 16px; z-index: 9999; font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* Tables */
.div-table { display: table; height: auto; width: 100%; }
.div-table-row { display: table-row; }
.div-table-cell { display: table-cell; height: 36px; line-height: 36px; text-align: center; border: 1px solid #fff; box-sizing: border-box; }
.div-table-cell-c { background-color: var(--color-bg); color: #333; }

/* File input */
.custom-input-file {
  overflow: hidden; position: relative; cursor: pointer;
  height: 150px; width: 150px; line-height: 150px;
  text-align: center; font-size: 64px;
  color: var(--color-border);
  border-radius: var(--radius-full);
  border: 2px dashed var(--color-border);
  display: block; margin: 0 auto;
  transition: var(--transition);
  background: var(--color-bg);
}
.custom-input-file:hover { border-color: var(--color-primary); color: var(--color-primary); background: #fff5f5; }
.custom-input-file .input-file { margin:0;padding:0;outline:0;font-size:10000px;border:10000px solid transparent;opacity:0;position:absolute;right:-1000px;top:-1000px;cursor:pointer; }
.media-object { width: 64px; height: 64px; border-radius: var(--radius-full); object-fit: cover; }

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.NavBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--navbar-h);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  display: flex; align-items: center;
}
.NavBar-logo {
  position: absolute; top: 0; left: 0;
  width: 210px; height: var(--navbar-h);
  display: flex; align-items: center;
}
.NavBar-logo a { display: flex; align-items: center; height: 100%; padding: 0 18px; gap: 8px; }
.NavBar-logo img { height: 30px; width: auto; }

.NavBar-Nav {
  position: absolute; top: 0; right: 0;
  width: calc(100% - 210px); height: var(--navbar-h);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px;
}
.NavBar-Nav ul {
  display: flex; align-items: center; height: var(--navbar-h);
  margin: 0; padding: 0; list-style: none; gap: 2px;
}
.NavBar-Nav ul li { display: flex; align-items: center; position: relative; }
.NavBar-Nav ul li a {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--navbar-h);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 0 9px; color: var(--color-gray);
  transition: var(--transition); position: relative; white-space: nowrap;
}
.NavBar-Nav ul li a::after {
  content: ''; position: absolute; bottom: 0; left: 9px; right: 9px;
  height: 2px; background: var(--color-primary);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  transform: scaleX(0); transition: transform .2s;
}
.NavBar-Nav ul li a:hover { color: var(--color-dark); }
.NavBar-Nav ul li a:hover::after { transform: scaleX(1); }
.NavBar-Nav ul li a.active { color: var(--color-primary); }
.NavBar-Nav ul li a.active::after { transform: scaleX(1); }

.NavBar-Nav-icon {
  width: 36px; height: 36px; line-height: 36px;
  border-radius: var(--radius-full);
  border: 1.5px solid #d0d5da; color: #7a8190;
  text-align: center; font-size: 18px;
  background-color: #f0f1f3;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
}
.NavBar-Nav-icon:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
img.NavBar-Nav-icon { border-width: 1px; object-fit: cover; }

.btn-mobile-menu {
  display: none; position: absolute; top: 0; right: 0;
  width: var(--navbar-h-sm); height: var(--navbar-h-sm);
  line-height: var(--navbar-h-sm); text-align: center;
  font-size: 22px; color: var(--color-primary);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--transition);
}
.btn-search-mobile { right: var(--navbar-h-sm); }
.btn-mobile-menu:hover { color: var(--color-primary-dk); }

/* ══════════════════════════════════════════
   POPUP LOGIN
══════════════════════════════════════════ */
.PopUpLogin {
  width: 380px; padding: 20px;
  background-color: var(--color-white);
  border: 1px solid #dde1e7; border-radius: var(--radius-md);
  position: fixed; top: calc(var(--navbar-h) + 10px); right: 12px;
  z-index: 1100; display: none; box-shadow: var(--shadow-lg);
}
@keyframes popupIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.PopUpLogin.visible { animation: popupIn .2s ease; }
.PopUpLogin a, .PopUpLogin button { display: block; text-align: center; margin: 9px auto; }
.PopUpLogin::after,.PopUpLogin::before { bottom:100%;right:16px;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none; }
.PopUpLogin::after  { border-color:transparent;border-bottom-color:var(--color-white);border-width:10px; }
.PopUpLogin::before { border-color:transparent;border-bottom-color:#dde1e7;border-width:12px;margin-right:-2px; }
.PopUpLogin-2 { width:200px;padding:8px 0; }
.PopUpLogin-2 a,.PopUpLogin-2 button { margin:0;text-align:left;padding:9px 16px;color:#333;font-weight:400;font-size:14px;display:block;width:100%;background:none;border:none;cursor:pointer;border-radius:var(--radius-sm); }
.PopUpLogin-2 a:hover,.PopUpLogin-2 button:hover { background-color:var(--color-bg);color:var(--color-primary); }

/* ══════════════════════════════════════════
   SEARCH MOBILE
══════════════════════════════════════════ */
.Search-mobile {
  position: fixed; top: var(--navbar-h-sm); left: 0; right: 0;
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  padding: 14px 16px; z-index: 998;
  background-color: var(--color-white); box-shadow: var(--shadow-md); display: none;
}
.Search-mobile button { display: block; width: 100%; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer { background-color: var(--color-gray-dk); color: var(--color-white); padding: 50px 0 28px; }
.footer ul { list-style: none; padding: 0; }
.footer ul li,.social-post li { display: inline-block; }
.footer ul li a { text-decoration: none; color: rgba(255,255,255,.8); transition: var(--transition); }
.footer ul li a:hover { color: #fff; }
.footer p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.7; }

.footer-social li a i {
  width: 40px; height: 40px; line-height: 40px; margin: 5px; font-size: 17px;
  border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.35);
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; transition: var(--transition); color: #fff;
}
.footer-social li a i:hover { transform: translateY(-3px) scale(1.1); }
.footer-social li a i.fa-facebook:hover    { background:#2B4073; border-color:#2B4073; }
.footer-social li a i.fa-linkedin:hover    { background:#278DD8; border-color:#278DD8; }
.footer-social li a i.fa-google-plus:hover { background:#C63E24; border-color:#C63E24; }
.footer-social li a i.fa-twitter:hover     { background:#67CDEE; border-color:#67CDEE; }
.footer-social li a i.fa-youtube:hover     { background:#D72823; border-color:#D72823; }
.footer-social li a i.fa-instagram:hover   { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);border-color:transparent; }

.footer-app-store li a {
  height: 36px; line-height: 36px; border-radius: var(--radius-sm);
  font-weight: 300; font-size: 13px; border: 1px solid rgba(255,255,255,.35);
  padding: 0 14px; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px; color: rgba(255,255,255,.85);
}
.footer-app-store li a:hover { background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.6);transform:translateY(-1px); }
.footer-copyright li { font-size: 12.5px; font-weight: 300; margin: 5px 8px; color: rgba(255,255,255,.5); }
.footer-copyright li a { color: rgba(255,255,255,.5); }
.footer-copyright li a:hover { color: rgba(255,255,255,.85); }

/* ══════════════════════════════════════════
   LOGIN / REGISTRO
══════════════════════════════════════════ */
.container-login {
  background-color: var(--color-white); padding: 32px 28px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.container-login button { display: block; width: 100%; }
.container-login a { display: block; text-align: center; margin: 18px 0; }
.container-login-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; width: 80px; height: 80px;
  font-size: 44px; text-align: center; border-radius: var(--radius-full);
  background: linear-gradient(135deg,#fff5f5,#ffe5e5);
  border: 2px solid var(--color-primary-lt); color: var(--color-primary);
}

/* ══════════════════════════════════════════
   INDEX HERO
══════════════════════════════════════════ */
.header-index {
  background: url(../assets/img/header-index.jpg) center center / cover no-repeat;
  min-height: 500px; padding: 80px 0; position: relative;
  display: flex; align-items: center;
}
.header-index::before {
  content:'';position:absolute;inset:0;
  background: linear-gradient(150deg,rgba(0,0,0,.58) 0%,rgba(140,10,10,.35) 100%);
}
.header-index .container { position: relative; z-index: 1; }
.header-index h1 { font-size: clamp(1.9rem,4.5vw,3rem); font-weight:700; margin-bottom:.4rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.header-index h2 { font-size: clamp(1rem,2.5vw,1.45rem); margin-bottom:2rem; opacity:.9; color:rgba(255,255,255,.9); font-weight:300; text-shadow:0 1px 6px rgba(0,0,0,.3); }

.hero-search-wrap .input-group { box-shadow: var(--shadow-lg); border-radius: var(--radius-full); overflow:hidden; }
.hero-search-wrap .form-control { border-radius:0!important; border:none!important; height:52px; font-size:15px; padding:0 20px; box-shadow:none!important; }
.hero-search-wrap .btn { border-radius:0!important; height:52px; font-size:15px; padding:0 24px; }

/* ══════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════ */
.stats-bar { background:var(--color-white); border-bottom:1px solid var(--color-border); padding:24px 0; }
.stats-bar .stat { display:inline-flex;flex-direction:column;align-items:center;margin:0 28px; }
.stats-bar .stat strong { font-size:28px;font-weight:700;color:var(--color-primary);display:block;line-height:1; }
.stats-bar .stat span { font-size:12px;color:var(--color-gray);margin-top:2px; }

/* ══════════════════════════════════════════
   CATEGORÍAS
══════════════════════════════════════════ */
.container-category {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; padding: 10px 0;
}
.container-category a {
  text-decoration: none; width: 130px; height: 130px;
  background-color: var(--color-white);
  border: 1.5px solid #d8eeff; border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; transition: var(--transition);
  box-shadow: var(--shadow-xs); color: #555;
  position: relative; padding: 10px 6px;
}
.container-category a:hover { color:var(--color-white); transform:translateY(-5px); box-shadow:var(--shadow-md); }
.container-category i { font-size:36px; margin-bottom:10px; transition:transform .2s; }
.container-category a:hover i { transform:scale(1.12); }
.container-category span { font-size:11px;font-weight:700;letter-spacing:.04em;text-align:center;line-height:1.3; }

#categori-1:hover  { background:#E65100;border-color:#E65100; }
#categori-2:hover  { background:#B71C1C;border-color:#B71C1C; }
#categori-3:hover  { background:#1A237E;border-color:#1A237E; }
#categori-4:hover  { background:#03A9F4;border-color:#03A9F4; }
#categori-5:hover  { background:#263238;border-color:#263238; }
#categori-6:hover  { background:#AFB42B;border-color:#AFB42B; }
#categori-7:hover  { background:#00ACC1;border-color:#00ACC1; }
#categori-8:hover  { background:#EF6C00;border-color:#EF6C00; }
#categori-9:hover  { background:#00695C;border-color:#00695C; }
#categori-10:hover { background:#607D8B;border-color:#607D8B; }
#categori-11:hover { background:#1976D2;border-color:#1976D2; }
#categori-12:hover { background:#3949AB;border-color:#3949AB; }

.icon-index {
  font-size:72px; width:148px; height:148px;
  display:flex; align-items:center; justify-content:center;
  margin:20px auto; border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-lt));
  color:var(--color-white); transition:var(--transition); box-shadow:var(--shadow-sm);
}
.icon-index:hover { transform:scale(1.06) rotate(-2deg); box-shadow:var(--shadow-md); }

/* ══════════════════════════════════════════
   POSTS / TARJETAS
══════════════════════════════════════════ */
.container-post { display:flex; flex-wrap:wrap; gap:12px; padding:16px 0; }

.post {
  border: 1.5px solid #eaecf0; border-radius: var(--radius-md);
  width: 210px; display: flex; flex-direction: column;
  position: relative; color: var(--color-gray-lt); overflow: hidden;
  transition: var(--transition); box-shadow: var(--shadow-xs);
  background-color: var(--color-white); flex-shrink: 0;
}
.post:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#d0d5dd; }

.post-img { position:relative; height:168px; overflow:hidden; flex-shrink:0; background:var(--color-bg); }
.post > figure { height:168px; }
.post > figure > img,.post-img > img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease; }
.post:hover .post-img > img,.post:hover > figure > img { transform:scale(1.04); }

.post-info { flex:1; position:relative; padding:10px 10px 30px; background:#fff; }
.post-info-title { display:block;font-size:13px;font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px; }
.post-info-price { display:block;color:var(--color-accent);font-size:15px;font-weight:700;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.post-info-zone,.post-info-date { position:absolute;bottom:8px;font-size:11px;color:#aaa; }
.post-info-zone { left:10px;right:55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.post-info-date { right:10px;white-space:nowrap; }
.post-info-like {
  position:absolute; right:8px; top:8px;
  height:30px;width:30px;line-height:30px;text-align:center;
  border-radius:var(--radius-full); background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  cursor:pointer;font-size:14px; transition:var(--transition);
  box-shadow:var(--shadow-sm); z-index:2; color:#ccc;
}
.post-info-like:hover { color:var(--color-primary);transform:scale(1.2); }
.post-info-like.liked { color:var(--color-primary); }

/* Post bloque horizontal */
.post-block { display:flex;flex-direction:row;width:100%;height:auto; }
.post-block .post-img { width:220px;min-width:220px;height:160px;flex-shrink:0; }
.post-block .post-info { flex:1;padding:16px 16px 32px;height:auto;position:relative; }
.post-block .post-info-zone { left:16px; }
.post-block .post-info-date { right:16px; }

/* ══════════════════════════════════════════
   POST DETAIL
══════════════════════════════════════════ */
.post-user-info { margin:12px 0;background:var(--color-bg);padding:18px;border-radius:var(--radius-md);border:1px solid var(--color-border); }
.post-user-info i.NavBar-Nav-icon,.post-user-info img.NavBar-Nav-icon { cursor:inherit;height:72px;width:72px;line-height:72px;font-size:40px;margin:8px auto;display:flex;align-items:center;justify-content:center; }
.post-user-info p { height:auto;line-height:1.5;margin:6px 0;text-align:center; }
.social-post li a { color:var(--color-gray); }
.social-post li a i { border-color:var(--color-gray); }
.social-post li a i:hover { color:#fff;border-color:#fff; }

.bar-info-user { margin-bottom:20px;display:flex;align-items:center;gap:8px; }
.bar-info-user i { width:34px;height:34px;border-radius:var(--radius-full);background:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0; }
.bar-info-user div { font-weight:700;font-size:15px;letter-spacing:.04em;border-bottom:2px solid #009F97;padding-bottom:1px; }
.perfil-password { display:none; }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.dp-toast {
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:#1e1e2e;color:#fff;
  padding:12px 20px;border-radius:var(--radius-md);
  font-size:14px;box-shadow:var(--shadow-lg);
  max-width:340px;opacity:0;transform:translateY(16px);
  transition:opacity .28s,transform .28s;
  pointer-events:none;display:flex;align-items:center;gap:10px;
}
.dp-toast.show { opacity:1;transform:translateY(0);pointer-events:auto; }
.dp-toast.success { background:#1b5e20; }
.dp-toast.error   { background:#b71c1c; }
.dp-toast.info    { background:#01579b; }

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-control {
  border-radius:var(--radius-sm)!important;
  border-color:#d0d5dd!important;
  transition:border-color .2s,box-shadow .2s;
  font-size:15px;
}
.form-control:focus { border-color:var(--color-primary)!important;box-shadow:0 0 0 3px rgba(198,40,40,.14)!important;outline:none; }
.form-control::placeholder { color:#b0b8c1; }

.btn {
  border-radius:var(--radius-sm)!important;
  font-weight:600!important;letter-spacing:.03em;
  transition:var(--transition)!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
}
.btn:active { transform:scale(.97)!important; }
.btn-danger { background-color:var(--color-primary)!important;border-color:var(--color-primary-dk)!important; }
.btn-danger:hover { background-color:var(--color-primary-dk)!important;transform:translateY(-1px)!important;box-shadow:0 4px 12px rgba(198,40,40,.3)!important; }

/* ══════════════════════════════════════════
   MOBILE MENU HEADER
══════════════════════════════════════════ */
.header-menu-mobile {
  background:linear-gradient(135deg,#fff5f5,#fff);
  border-bottom:1px solid var(--color-border);
  padding:24px 16px;position:relative;text-align:center;
}
.header-menu-mobile-icon {
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 4px;width:76px;height:76px;font-size:38px;
  border-radius:var(--radius-full);
  border:2px solid var(--color-primary-lt);
  color:var(--color-primary);background:#fff5f5;
}
.header-menu-mobile-btn { display:block!important;width:82%;margin:8px auto!important; }
.header-menu-mobile-close-btn {
  position:absolute;top:10px;left:10px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;color:#555;
  border-radius:var(--radius-full);transition:var(--transition);
}
.header-menu-mobile-close-btn:hover { background:rgba(0,0,0,.08); }

/* ══════════════════════════════════════════
   BADGES & ACCIONES EN TARJETA
══════════════════════════════════════════ */
.post-img { position:relative; }

.post-badge {
  position:absolute;top:8px;left:8px;z-index:3;
  padding:3px 9px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;border-radius:var(--radius-full);
  color:#fff;line-height:1.4;text-transform:uppercase;
  pointer-events:none;display:inline-block;margin-bottom:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.post-badge + .post-badge { top:32px; }

.badge-success { background:#2e7d32; }
.badge-info    { background:#0277bd; }
.badge-warning { background:#e65100; }
.badge-danger  { background:var(--color-primary); }

.post-actions {
  position:absolute;bottom:8px;right:8px;z-index:3;
  display:flex;gap:5px;
  opacity:0;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease;
}
.post:hover .post-actions,.post:focus-within .post-actions { opacity:1;transform:translateY(0); }
@media (hover:none) { .post-actions { opacity:1;transform:translateY(0); } }

.btn-action {
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:none;background:rgba(255,255,255,.94);
  color:#444;font-size:13px;cursor:pointer;padding:0;
  box-shadow:var(--shadow-sm);
  transition:background-color .15s,color .15s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn-action:hover { background:var(--color-primary);color:#fff;transform:scale(1.1); }
.btn-action:active { transform:scale(.93); }

.post-stats { display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px;font-size:11px;color:var(--color-gray); }
.post-stats small { display:inline-flex;align-items:center;gap:3px; }

.post-info-expiry,.post-info-buyer {
  position:absolute;bottom:8px;right:10px;
  font-size:11px;color:var(--color-gray);max-width:60%;
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.post-info-price small.text-success { font-size:11px;font-weight:400; }

/* ══════════════════════════════════════════
   SECTION TITLE
══════════════════════════════════════════ */
.section-title { text-align:center;margin:32px 0 20px; }
.section-title h3 { font-weight:700;position:relative;display:inline-block; }
.section-title h3::after {
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:48px;height:3px;border-radius:var(--radius-full);background:var(--color-primary);
}

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb { background:transparent;padding:8px 0;margin-bottom:16px;font-size:13px; }
.breadcrumb > li + li::before { color:#bbb; }
.breadcrumb > .active { color:var(--color-gray); }

/* Bootstrap panels */
.panel { border-radius:var(--radius-md)!important;border-color:var(--color-border)!important;box-shadow:var(--shadow-xs)!important; }
.panel-heading { border-radius:var(--radius-md) var(--radius-md) 0 0!important; }

/* Ver más */
.ver-mas { text-align:center;margin:24px 0 32px; }

/* Loading */
.cat-loading { text-align:center;padding:28px;color:#bbb; }

/* Animaciones de entrada */
@keyframes fadeInUp { from { opacity:0;transform:translateY(18px); } to { opacity:1;transform:translateY(0); } }
.animate-in { animation:fadeInUp .35s ease both; }
.animate-in-delay-1 { animation-delay:.08s; }
.animate-in-delay-2 { animation-delay:.16s; }
.animate-in-delay-3 { animation-delay:.24s; }

/* ══════════════════════════════════════════
   MEDIA QUERIES
══════════════════════════════════════════ */
@media (max-width:991px) {
  body { padding-top:var(--navbar-h-sm); }
  .NavBar { height:var(--navbar-h-sm); }
  .NavBar-logo { width:calc(100% - 115px);height:var(--navbar-h-sm);line-height:var(--navbar-h-sm); }
  .NavBar-logo img { height:26px; }
  .btn-mobile-menu { display:flex;align-items:center;justify-content:center;height:var(--navbar-h-sm);line-height:normal; }
  .NavBar-Nav {
    position:fixed;width:100%;height:100%;padding-right:0;top:0;left:0;z-index:1050;
    pointer-events:none;opacity:0;transition:opacity .25s ease;
  }
  .NavBar-Nav-show { pointer-events:auto;opacity:1; }
  .NavBar-Nav ul {
    position:absolute;top:0;right:0;z-index:2;
    height:100%;width:min(300px,85vw);background:var(--color-white);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:-4px 0 30px rgba(0,0,0,.16);
    flex-direction:column;justify-content:flex-start;gap:0;
  }
  .NavBar-Nav-bg {
    position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
    background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .NavBar-Nav ul li,.NavBar-Nav ul li a { display:block;width:100%;height:auto; }
  .NavBar-Nav ul li a { text-align:left;padding:13px 20px;font-size:14.5px;font-weight:500;color:#333;border-bottom:1px solid var(--color-bg);line-height:1.4;gap:10px; }
  .NavBar-Nav ul li a::after { display:none; }
  .NavBar-Nav ul li a:hover { background:var(--color-bg);color:var(--color-primary); }
  .NavBar-Nav ul li a.active { border-left:3px solid var(--color-primary);color:var(--color-primary);background:#fff5f5; }
  .NavBar-Nav ul div { height:auto;z-index:5; }
  .PopUpLogin { display:none!important; }
  .Search-mobile { top:var(--navbar-h-sm); }
  .header-index { min-height:380px;padding:60px 0; }
  .menu-commercial { display:none; }
  .section { padding:40px 0; }
  .stats-bar .stat { margin:0 16px; }
}

@media (max-width:767px) {
  .div-table-cell-xs { width:100%;display:block; }
  .bar-info-user { flex-wrap:wrap; }
  .user-menu-xs { display:none; }
  .container-post { gap:10px; }
  .post { width:calc(50% - 6px);flex-shrink:0; }
  .post-img { height:148px; }
  .post > figure { height:148px; }
  .container-category a { width:90px;height:100px; }
  .container-category i { font-size:26px;margin-bottom:8px; }
  .container-category span { font-size:10px; }
  .footer .col-xs-12 { margin-bottom:20px; }
  .post-block { flex-direction:column; }
  .post-block .post-img { width:100%;height:180px; }
  .post-block .post-info { padding:12px 12px 32px; }
  .dp-toast { left:16px;right:16px;bottom:16px;width:calc(100% - 32px); }
  .header-index { min-height:300px;padding:40px 0; }
  .stats-bar .stat { margin:0 10px; }
  .stats-bar .stat strong { font-size:22px; }
}

@media (max-width:480px) {
  .post { width:100%; }
  .post-img,.post > figure { height:190px; }
  .container-category a { width:76px;height:86px;margin:2px; }
  .container-category i { font-size:22px;margin-bottom:6px; }
  .container-category span { font-size:9px; }
}

@media (min-width:768px) and (max-width:991px) {
  .menu-commercial,.user-menu-xs { display:block!important; }
}
@media (min-width:992px) {
  .menu-commercial,.user-menu-xs { display:block!important; }
}

@media print {
  .NavBar,.footer,.btn-mobile-menu,.Search-mobile { display:none!important; }
  body { padding-top:0; }
  a::after { content:' (' attr(href) ')'; }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; }
}