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

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

:root {
  --azul: #0F2044;
  --azul2: #1E3A6E;
  --azul-hover: #0A1830;
  --naranja: #F97316;
  --naranja-hover: #EA6C0A;
  --naranja-light: #FFF7ED;
  --naranja-border: #FED7AA;
  --azul-light: #EFF6FF;
  --azul-border: #BFDBFE;
  --fondo: #F1F5F9;
  --borde: #E2E8F0;
  --texto: #1E293B;
  --texto2: #64748B;
  --texto3: #94A3B8;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--fondo); color: var(--texto); font-size: 14px; line-height: 1.5; min-height: 100vh; }

/* NAV */
.nav { background: var(--azul); padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.logo { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; color: #fff; cursor: pointer; letter-spacing: -0.5px; }
.logo span { color: var(--naranja); }
.logo small { font-size: 13px; font-weight: 400; color: #94A3B8; }
.nav-r { display: flex; gap: 8px; align-items: center; }
.nav-user { display: flex; align-items: center; gap: 10px; }

/* BUTTONS */
.btn { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: background .15s; }
.btn:hover { background: rgba(255,255,255,.1); }
.btn-p { background: var(--naranja); border: none; color: #fff; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: background .15s; }
.btn-p:hover { background: var(--naranja-hover); }
.btn-p:disabled { background: #CBD5E1; cursor: default; }
.btn-w { width: 100%; padding: 9px 14px; }

/* Botones dentro de modales y sidebar (fondo blanco) */
.modal .btn, .sbox .btn { border-color: #CBD5E1; color: var(--azul); }
.modal .btn:hover, .sbox .btn:hover { background: var(--fondo); }

/* PAGES */
.page { display: none; }
.page.on { display: block; }

/* HERO */
.hero { background: var(--azul); padding: 40px 24px; }
.hero-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: -.5px; }
.hero p { font-size: 14px; color: #93C5FD; margin-bottom: 22px; }
.sbar { display: flex; background: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 16px; border: 2px solid transparent; transition: border-color .15s; }
.sbar:focus-within { border-color: var(--naranja); }
.sbar i { padding: 0 12px; color: var(--texto3); font-size: 16px; display: flex; align-items: center; }
.sbar input { flex: 1; border: none; background: none; padding: 10px 4px; font-size: 14px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--texto); outline: none; }
.sbar button { background: var(--naranja); border: none; color: #fff; padding: 0 22px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: background .15s; }
.sbar button:hover { background: var(--naranja-hover); }
.quick-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qtag { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #E0F2FE; font-size: 12px; padding: 4px 12px; border-radius: 20px; cursor: pointer; transition: background .15s; }
.qtag:hover { background: rgba(255,255,255,.2); }

/* TABS */
.tabs { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--borde); background: var(--azul2); }
.tab { padding: 10px 16px; font-size: 13px; font-weight: 500; border: none; background: none; cursor: pointer; color: #93C5FD; font-family: 'Plus Jakarta Sans', sans-serif; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.tab.on { color: #fff; border-bottom-color: var(--naranja); }
.tab:hover:not(.on) { color: #fff; }

/* BODY GRID */
.body-grid { display: grid; grid-template-columns: 1fr 210px; gap: 18px; max-width: 860px; margin: 0 auto; padding: 18px 16px; }

/* SIDEBAR */
.sbox { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.sbox h3 { font-size: 11px; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.sbox-sub { font-size: 12px; color: var(--texto2); margin-bottom: 12px; }
.cat-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; color: var(--texto2); cursor: pointer; }
.cat-item:hover { color: var(--naranja); }
.cat-count { font-size: 11px; background: var(--naranja-light); color: #C2410C; padding: 2px 7px; border-radius: 10px; }

/* CARDS */
.card { background: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; margin-bottom: 10px; display: flex; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: #93C5FD; box-shadow: 0 2px 12px rgba(15,32,68,.08); }
.card-bar { width: 4px; background: #E2E8F0; flex-shrink: 0; position: relative; }
.card-bar-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--naranja); transition: height .4s; }
.card-inner { padding: 13px 15px; flex: 1; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.card-title { font-size: 14px; font-weight: 600; color: var(--texto); line-height: 1.3; }
.badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.badge-open { background: var(--naranja-light); color: #C2410C; border: 1px solid var(--naranja-border); }
.badge-full { background: #F8FAFC; color: #94A3B8; border: 1px solid #E2E8F0; }
.badge-fin { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.card-preview { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; }
.card-thumb { width: 52px; height: 44px; border-radius: 7px; background: var(--azul-light); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--texto2); flex-shrink: 0; overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-desc-short { font-size: 12px; color: var(--texto2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-footer { display: flex; align-items: center; gap: 10px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--azul-light); color: #1D4ED8; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.card-meta { font-size: 11px; color: var(--texto3); flex: 1; }
.offers-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--naranja); display: inline-block; margin-right: 3px; }

/* DETAIL */
.detail-wrap { max-width: 860px; margin: 0 auto; padding: 16px; }
.back-btn { display: flex; align-items: center; gap: 5px; color: var(--azul); font-size: 13px; font-weight: 500; cursor: pointer; background: none; border: none; font-family: 'Plus Jakarta Sans', sans-serif; padding: 0; margin-bottom: 16px; }
.back-btn:hover { color: var(--naranja); }
.detail-grid { display: grid; grid-template-columns: 1fr 240px; gap: 18px; }
.detail-main { background: #fff; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.detail-main-img { width: 100%; height: 220px; background: var(--azul-light); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--borde); }
.detail-main-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-content { padding: 20px; }
.detail-title { font-size: 20px; font-weight: 700; color: var(--texto); line-height: 1.3; margin-bottom: 8px; }
.detail-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dmi { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texto3); }
.gallery { display: flex; gap: 7px; margin-bottom: 18px; }
.gthumb { flex: 1; height: 64px; border-radius: 8px; background: var(--azul-light); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; overflow: hidden; transition: border-color .15s; }
.gthumb img { width: 100%; height: 100%; object-fit: cover; }
.gthumb.on { border-color: var(--naranja); }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texto3); margin-bottom: 6px; }
.detail-desc { font-size: 13px; color: var(--texto2); line-height: 1.7; margin-bottom: 16px; }
.detail-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 20px; }
.dtag { font-size: 11px; background: var(--azul-light); color: #1D4ED8; border: 1px solid var(--azul-border); padding: 2px 9px; border-radius: 20px; }

/* SIDEBAR DETAIL */
.action-box { background: #fff; border: 1px solid var(--borde); border-radius: 13px; padding: 16px; margin-bottom: 10px; }
.action-box h3 { font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 3px; }
.action-box .sub { font-size: 11px; color: var(--texto3); margin-bottom: 12px; }
.obar-track { height: 5px; background: #E2E8F0; border-radius: 3px; overflow: hidden; margin: 4px 0 10px; }
.obar-fill { height: 100%; background: var(--naranja); border-radius: 3px; transition: width .4s; }
.olabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto3); }
.stats-row { display: flex; gap: 8px; margin-top: 10px; }
.stat-box { flex: 1; background: var(--fondo); border-radius: 7px; padding: 7px 8px; text-align: center; }
.stat-num { font-size: 16px; font-weight: 700; color: var(--azul); }
.stat-lbl { font-size: 10px; color: var(--texto3); margin-top: 1px; }
.user-box { background: #fff; border: 1px solid var(--borde); border-radius: 13px; padding: 14px; }
.user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avatar-lg { width: 44px; height: 44px; border-radius: 50%; background: var(--azul-light); color: #1D4ED8; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 2px solid var(--borde); }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.user-name { font-size: 13px; font-weight: 600; color: var(--texto); }
.user-since { font-size: 11px; color: var(--texto3); }
.user-bio { font-size: 12px; color: var(--texto2); line-height: 1.5; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde); }

/* OFFERS */
.offers-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); }
.offers-section h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--texto3); margin-bottom: 10px; }
.offer-card { border: 1px solid var(--borde); border-radius: 9px; padding: 12px; margin-bottom: 8px; background: #FAFBFC; }
.offer-card.selected { border-color: var(--naranja); background: var(--naranja-light); }
.offer-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.offer-name { font-size: 13px; font-weight: 600; color: var(--texto); }
.offer-desc { font-size: 12px; color: var(--texto2); line-height: 1.5; margin-bottom: 5px; }
.offer-price { font-size: 13px; font-weight: 700; color: var(--naranja); }
.sel-badge { font-size: 10px; background: var(--naranja); color: #fff; padding: 2px 8px; border-radius: 20px; margin-left: auto; }
.sel-btn { font-size: 11px; background: var(--naranja); color: #fff; border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; margin-top: 6px; font-weight: 600; }
.sel-btn:hover { background: var(--naranja-hover); }

/* PROFILE */
.profile-wrap { max-width: 860px; margin: 0 auto; padding: 16px; }
.profile-box { background: #fff; border: 1px solid var(--borde); border-radius: 13px; padding: 20px; margin-bottom: 16px; display: flex; gap: 18px; align-items: flex-start; }
.profile-avatar-wrap { position: relative; cursor: pointer; flex-shrink: 0; }
.profile-avatar-wrap:hover .av-overlay { display: flex; }
.av-overlay { display: none; position: absolute; inset: 0; border-radius: 50%; background: rgba(15,32,68,.5); align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.av-xl { width: 72px; height: 72px; border-radius: 50%; background: var(--azul-light); color: #1D4ED8; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid var(--borde); overflow: hidden; }
.av-xl img { width: 100%; height: 100%; object-fit: cover; }
.profile-info { flex: 1; }
.profile-name { font-size: 20px; font-weight: 700; color: var(--texto); margin-bottom: 2px; }
.profile-since { font-size: 12px; color: var(--texto3); margin-bottom: 8px; }
.profile-bio { font-size: 13px; color: var(--texto2); line-height: 1.6; }
.profile-stats { display: flex; gap: 10px; margin-top: 12px; }
.pstat { background: var(--fondo); border-radius: 8px; padding: 8px 14px; text-align: center; }
.pstat-n { font-size: 18px; font-weight: 700; color: var(--azul); }
.pstat-l { font-size: 10px; color: var(--texto3); }
.profile-edit-btn { font-size: 12px; color: var(--azul); background: none; border: 1px solid var(--borde); padding: 5px 12px; border-radius: 7px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; margin-top: 12px; font-weight: 500; }
.profile-edit-btn:hover { background: var(--fondo); }
.my-tabs { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--borde); }
.my-tab { padding: 6px 16px; font-size: 13px; font-weight: 500; border: none; background: none; cursor: pointer; color: var(--texto3); font-family: 'Plus Jakarta Sans', sans-serif; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.my-tab.on { color: var(--azul); border-bottom-color: var(--naranja); }
.my-card { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; cursor: pointer; transition: border-color .15s; }
.my-card:hover { border-color: #93C5FD; }
.my-card-title { font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 3px; }
.my-card-meta { font-size: 11px; color: var(--texto3); }
.st { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.st-active { background: var(--naranja-light); color: #C2410C; }
.st-full { background: #FFFBEB; color: #B45309; }
.st-fin { background: #F0FDF4; color: #166534; }
.st-pend { background: #FFFBEB; color: #B45309; }
.st-sel { background: #F0FDF4; color: #166534; }

/* MODALS */
.mwrap { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; align-items: center; justify-content: center; padding: 16px; }
.mwrap.on { display: flex; }
.modal { background: #fff; border-radius: 14px; width: 420px; max-width: 100%; padding: 22px; border: 1px solid var(--borde); max-height: 90vh; overflow-y: auto; }
.modal-lg { width: 520px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }
.modal-head h2 { font-size: 20px; font-weight: 700; color: var(--azul); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--texto3); font-size: 18px; padding: 0; }
.modal-close:hover { color: var(--azul); }
.modal-sub { font-size: 12px; color: var(--texto3); margin-bottom: 16px; }
.ff { margin-bottom: 12px; }
.ff label { display: block; font-size: 12px; font-weight: 600; color: var(--texto2); margin-bottom: 4px; }
.label-hint { font-weight: 400; color: var(--texto3); }
.ff input, .ff textarea, .ff select { width: 100%; border: 1px solid #CBD5E1; border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--texto); background: #FAFBFC; outline: none; transition: border-color .15s; }
.ff input:focus, .ff textarea:focus, .ff select:focus { border-color: var(--azul); }
.ff textarea { resize: vertical; min-height: 72px; }
.mfooter { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 14px; }
.modal-link { font-size: 12px; color: var(--naranja); cursor: pointer; text-decoration: underline; }
.char-count { font-size: 11px; color: var(--texto3); text-align: right; margin-top: 2px; }
.tip-box { font-size: 11px; color: #1D4ED8; background: var(--azul-light); border-radius: 6px; padding: 7px 10px; margin-bottom: 12px; border: 1px solid var(--azul-border); }
.fup-area { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed #CBD5E1; border-radius: 8px; padding: 11px; text-align: center; cursor: pointer; color: var(--texto3); font-size: 12px; background: #FAFBFC; transition: border-color .15s; }
.fup-area:hover { border-color: var(--naranja); color: var(--naranja); }
.fup-sm { padding: 7px 14px; font-size: 12px; max-width: 180px; margin: 8px auto 0; }
.foto-previews { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.foto-prev { width: 56px; height: 50px; border-radius: 7px; overflow: hidden; position: relative; border: 1px solid var(--borde); }
.foto-prev img { width: 100%; height: 100%; object-fit: cover; }
.foto-rem { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(15,32,68,.8); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.avatar-edit-wrap { text-align: center; margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-error { font-size: 12px; color: #DC2626; min-height: 16px; }

/* MISC */
.loading-msg { text-align: center; color: var(--texto3); padding: 28px 0; font-size: 13px; }
.empty-msg { text-align: center; color: var(--texto3); padding: 28px 0; font-size: 13px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--azul); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px; z-index: 999; transition: transform .3s; pointer-events: none; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* FOOTER */
.site-footer { text-align: center; padding: 24px 16px; font-size: 12px; color: var(--texto3); border-top: 1px solid var(--borde); background: #fff; margin-top: 40px; }
.site-footer a { color: var(--naranja); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .body-grid { grid-template-columns: 1fr; }
  aside { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 22px; }
}

/* NOTIFICACIONES */
.notif-wrap { position: relative; cursor: pointer; display: flex; align-items: center; }
.notif-badge { position: absolute; top: -5px; right: -7px; background: var(--naranja); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); cursor: pointer; }
.notif-item:hover { background: var(--fondo); border-radius: 8px; padding: 12px 8px; }
.notif-unread { background: var(--azul-light); border-radius: 8px; padding: 12px 8px; }
.notif-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--naranja-light); color: var(--naranja); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }

/* CHAT */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 58px); max-width: 700px; margin: 0 auto; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--borde); gap: 12px; }
.chat-header-title { font-size: 14px; font-weight: 600; color: var(--texto); flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fondo); }
.msg-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-me { flex-direction: row-reverse; }
.msg-bubble { background: #fff; border: 1px solid var(--borde); border-radius: 12px 12px 12px 2px; padding: 10px 13px; max-width: 70%; }
.msg-bubble-me { background: var(--azul); border-color: var(--azul); color: #fff; border-radius: 12px 12px 2px 12px; }
.msg-bubble-me div { color: #fff !important; }
.chat-input-wrap { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--borde); }
.chat-input { flex: 1; border: 1px solid #CBD5E1; border-radius: 10px; padding: 9px 13px; font-size: 13px; font-family: 'Plus Jakarta Sans', sans-serif; resize: none; outline: none; max-height: 100px; }
.chat-input:focus { border-color: var(--azul); }
.chat-send { background: var(--naranja); border: none; color: #fff; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; flex-shrink: 0; }
.chat-send:hover { background: var(--naranja-hover); }

/* BOTÓN ELIMINAR */
.btn-delete { background: none; border: 1px solid #FCA5A5; color: #DC2626; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 5px; }
.btn-delete:hover { background: #FEF2F2; }

/* FILTROS */
.filter-bar{background:#fff;border-bottom:1px solid var(--borde);padding:10px 24px;display:flex;gap:10px;align-items:center;}
.filter-select{border:1px solid #CBD5E1;border-radius:8px;padding:7px 11px;font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;color:var(--texto);background:#FAFBFC;outline:none;cursor:pointer;}
.filter-select:focus{border-color:var(--azul);}

/* VER MÁS */
.btn-loadmore{background:none;border:1px solid var(--borde);color:var(--azul);padding:8px 24px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
.btn-loadmore:hover{background:var(--fondo);}

/* NOTIFICACIONES */
.notif-wrap{position:relative;cursor:pointer;display:flex;align-items:center;}
.notif-badge{position:absolute;top:-5px;right:-7px;background:var(--naranja);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px 8px;border-bottom:1px solid var(--borde);cursor:pointer;border-radius:8px;}
.notif-item:hover{background:var(--fondo);}
.notif-unread{background:var(--azul-light);}
.notif-icon{width:34px;height:34px;border-radius:50%;background:var(--naranja-light);color:var(--naranja);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}

/* CHAT */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 58px);max-width:700px;margin:0 auto;}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#fff;border-bottom:1px solid var(--borde);gap:12px;}
.chat-header-title{font-size:14px;font-weight:600;color:var(--texto);flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--fondo);}
.msg-row{display:flex;align-items:flex-end;gap:8px;}
.msg-me{flex-direction:row-reverse;}
.msg-bubble{background:#fff;border:1px solid var(--borde);border-radius:12px 12px 12px 2px;padding:10px 13px;max-width:70%;}
.msg-bubble-me{background:var(--azul);border-color:var(--azul);color:#fff;border-radius:12px 12px 2px 12px;}
.msg-bubble-me div{color:#fff!important;}
.chat-input-wrap{display:flex;align-items:flex-end;gap:8px;padding:12px 16px;background:#fff;border-top:1px solid var(--borde);}
.chat-input{flex:1;border:1px solid #CBD5E1;border-radius:10px;padding:9px 13px;font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;resize:none;outline:none;max-height:100px;}
.chat-input:focus{border-color:var(--azul);}
.chat-send{background:var(--naranja);border:none;color:#fff;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex-shrink:0;}
.chat-send:hover{background:var(--naranja-hover);}

/* CALIFICACIONES */
.star-selector{display:flex;gap:6px;font-size:28px;margin:4px 0;}
.star{cursor:pointer;color:#CBD5E1;transition:color .1s;}
.star.active{color:#F97316;}
.star:hover{color:#F97316;}
.stars-display{color:#F97316;font-size:13px;letter-spacing:1px;}
.cal-item{padding:10px 0;border-bottom:1px solid var(--borde);}
.cal-item:last-child{border-bottom:none;}
.cals-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--borde);}

/* REPORTE */
.btn-report{display:flex;align-items:center;gap:5px;background:none;border:none;color:var(--texto3);font-size:11px;cursor:pointer;padding:6px 0;font-family:'Plus Jakarta Sans',sans-serif;margin-top:4px;}
.btn-report:hover{color:#DC2626;}

/* ELIMINAR */
.btn-delete{background:none;border:1px solid #FCA5A5;color:#DC2626;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:5px;}
.btn-delete:hover{background:#FEF2F2;}

/* CÓMO FUNCIONA */
.how-it-works{background:#fff;border-bottom:1px solid var(--borde);padding:28px 24px;}
.how-inner{max-width:860px;margin:0 auto;text-align:center;}
.how-inner h2{font-size:16px;font-weight:700;color:#0F2044;margin-bottom:20px;text-transform:uppercase;letter-spacing:.5px;}
.steps{display:flex;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:wrap;}
.step{background:#F8FAFC;border:1px solid var(--borde);border-radius:12px;padding:16px 14px;width:160px;text-align:center;}
.step-icon{font-size:28px;margin-bottom:8px;}
.step-title{font-size:13px;font-weight:700;color:#0F2044;margin-bottom:4px;}
.step-desc{font-size:11px;color:#64748B;line-height:1.5;}
.step-arrow{font-size:20px;color:#CBD5E1;padding-top:28px;}
@media(max-width:640px){.step-arrow{display:none;}.step{width:140px;}}