/* =====================================================
   XASARU CORE — Capa CSS Base
   Motor visual compartido para todos los templates
   -----------------------------------------------------
   USO:
     1. Incluir ANTES de </head>:
        <link rel="stylesheet" href="css/xasaru-core.css">
     2. Sobrescribir variables :root por template en un
        bloque <style> local para adaptar colores.
   ===================================================== */

:root {
  --xu-accent: #d4af37;
  --xu-accent-2: #8b6a14;
  --xu-bg: #080808;
  --xu-bg-2: #0d1118;
  --xu-text: #fff;
  --xu-muted: #9aa0a6;
  --xu-radius: 18px;
  --xu-radius-lg: 24px;
  --xu-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ----------- BUSCADOR STICKY ----------- */
.xu-search{
  position:sticky; top:0; z-index:999;
  max-width:470px; margin:0 auto 12px;
  padding:10px 12px 6px;
  background:linear-gradient(180deg,var(--xu-bg), rgba(0,0,0,.85));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.xu-search-row{
  display:flex; gap:8px; align-items:center;
  background:var(--xu-bg-2);
  border:1px solid color-mix(in srgb, var(--xu-accent) 25%, transparent);
  border-radius:14px;
  padding:6px 10px;
}
.xu-search-row i{ color:var(--xu-accent); }
.xu-search-row input{
  flex:1; background:transparent; border:0; outline:none;
  color:var(--xu-text); font-size:13px; padding:6px 2px;
  font-family: inherit;
}
.xu-search-row button{
  border:0; cursor:pointer; border-radius:10px;
  background:linear-gradient(90deg, var(--xu-accent), var(--xu-accent-2));
  color:#0b0b0b; font-weight:700; padding:7px 12px;
  font-size:12px; letter-spacing:.2px;
}
.xu-results{
  display:none; margin-top:8px;
  background:var(--xu-bg-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; overflow:hidden;
  max-height:320px; overflow-y:auto;
}
.xu-result{
  display:flex; gap:10px; align-items:center; padding:10px 12px;
  cursor:pointer; border-bottom:1px solid rgba(255,255,255,.04);
  transition: background .15s ease;
}
.xu-result:hover{ background:color-mix(in srgb, var(--xu-accent) 12%, transparent); }
.xu-result img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid color-mix(in srgb, var(--xu-accent) 45%, transparent);
}
.xu-result div{ display:flex; flex-direction:column; min-width:0 }
.xu-result strong{ color:var(--xu-text); font-size:13px }
.xu-result small{ color:var(--xu-muted); font-size:11px }

/* ----------- ONLINE STATUS ----------- */
.xu-online{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; letter-spacing:.3px;
  color: var(--xu-muted);
  margin: 4px 0 8px;
}
.xu-online .dot{
  width:8px; height:8px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 10px #22c55e;
  animation: xu-pulse 1.6s infinite;
}
@keyframes xu-pulse{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.15); opacity:.8 }
}

/* ----------- ACTIONS (5 botones: Like/Save/Share/Valorar/Huella) ----------- */
.xu-actions{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap:8px; margin:12px 0 6px;
}
.xu-action{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 4px 8px;
  cursor:pointer; user-select:none;
  transition: transform .15s, border-color .15s, background .15s;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--xu-text);
}
.xu-action:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--xu-accent) 50%, transparent); }
.xu-action i{
  color: color-mix(in srgb, var(--xu-accent) 90%, white);
  font-size:16px;
}
.xu-action span{ font-size:10.5px; color:var(--xu-muted) }
.xu-action.active{
  border-color: color-mix(in srgb, var(--xu-accent) 60%, transparent);
  background: color-mix(in srgb, var(--xu-accent) 20%, transparent);
}

/* ----------- SECTION / CARD-BOX XU ----------- */
.xu-section{
  background:var(--xu-bg-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--xu-radius-lg);
  padding:18px;
  margin:14px 0;
  box-shadow: var(--xu-shadow);
}
.xu-section-title{
  font-family: inherit;
  font-size:15px; font-weight:800;
  margin:0 0 12px;
  letter-spacing:.4px;
  color:var(--xu-text);
  display:flex; align-items:center; gap:8px;
}
.xu-section-title::before{
  content:""; width:3px; height:16px; border-radius:3px;
  background:linear-gradient(180deg, var(--xu-accent), var(--xu-accent-2));
}

/* ----------- REACTIONS ----------- */
.xu-reactions{
  display:grid; grid-template-columns: repeat(5,1fr);
  gap:8px; margin-bottom:12px;
}
.xu-reaction{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 2px;
  text-align:center; cursor:pointer; user-select:none;
  transition: all .15s ease;
}
.xu-reaction:hover{
  border-color: color-mix(in srgb, var(--xu-accent) 50%, transparent);
  transform: translateY(-1px);
}
.xu-reaction .e{ font-size:20px; line-height:1; display:block }
.xu-reaction .c{ font-size:11px; color:var(--xu-muted); margin-top:4px; display:block }

/* ----------- HUELLA ----------- */
.xu-foot{
  margin-top:8px;
  padding:14px 16px;
  border-radius:16px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--xu-accent) 14%, transparent),
    color-mix(in srgb, var(--xu-accent-2) 10%, transparent));
  border:1px solid color-mix(in srgb, var(--xu-accent) 30%, transparent);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer;
  transition: transform .15s, border-color .15s;
}
.xu-foot:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--xu-accent) 55%, transparent); }
.xu-foot-left{ display:flex; align-items:center; gap:10px }
.xu-foot-left i{ color:var(--xu-accent); font-size:18px }
.xu-foot-label{ font-size:13px; color:var(--xu-text); font-weight:600 }
.xu-foot-sub{ font-size:11px; color:var(--xu-muted) }
.xu-foot-ok{
  font-size:12px; font-weight:700;
  color:#22c55e;
  display:inline-flex; align-items:center; gap:4px;
}
#xuFootLabel{ display:none }

/* ----------- STARS / RATING ----------- */
.xu-stars{
  display:flex; align-items:center; gap:6px;
  padding:4px 0 8px;
}
.xu-stars button{
  background:transparent; border:0; cursor:pointer;
  font-size:26px; padding:2px;
  color:#4a4a4a;
  transition: color .1s, transform .1s;
}
.xu-stars button:hover{ transform: scale(1.12); }
.xu-stars button.active{ color: var(--xu-accent); text-shadow: 0 0 8px color-mix(in srgb, var(--xu-accent) 60%, transparent); }
.xu-rating-info{ color:var(--xu-muted); font-size:12.5px; margin-left:8px }
.xu-rating-info b{ color:var(--xu-text) }

/* ----------- COMMENTS ----------- */
.xu-comment-box{
  display:flex; gap:8px; margin-bottom:12px;
}
.xu-comment-box textarea{
  flex:1;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:var(--xu-text);
  border-radius:12px;
  padding:10px 12px;
  font-family: inherit; font-size:13px;
  resize:vertical; min-height:54px;
  outline:none;
  transition: border-color .15s;
}
.xu-comment-box textarea:focus{ border-color: color-mix(in srgb, var(--xu-accent) 55%, transparent); }
.xu-comment-box button{
  border:0; cursor:pointer;
  background:linear-gradient(90deg, var(--xu-accent), var(--xu-accent-2));
  color:#0b0b0b; font-weight:800;
  padding:0 14px;
  border-radius:12px;
  font-size:12px; letter-spacing:.2px;
}
.xu-comment{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:10px 12px;
  margin:8px 0;
}
.xu-comment strong{ color:var(--xu-text); font-size:12.5px }
.xu-comment small{ color:var(--xu-muted); font-size:10.5px; margin-left:6px }
.xu-comment p{ margin:6px 0 8px; color:color-mix(in srgb, var(--xu-text) 92%, black); font-size:13px; line-height:1.45 }
.xu-comment .btn-useful{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--xu-text);
  padding:5px 10px;
  border-radius:10px;
  cursor:pointer; font-size:11.5px;
  transition: all .15s;
}
.xu-comment .btn-useful:hover{
  border-color: color-mix(in srgb, var(--xu-accent) 50%, transparent);
  color:var(--xu-accent);
}

/* ----------- CHAT MODAL (Swal) ----------- */
.xu-chat{
  min-height: 520px;
  max-height: 72vh;
  display:flex; flex-direction:column;
  background: var(--xu-bg);
  color: var(--xu-text);
  border-radius: 20px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--xu-accent) 35%, transparent);
}
.xu-chat-head{
  padding:14px 16px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--xu-accent) 16%, transparent),
    transparent);
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.xu-chat-head img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid color-mix(in srgb, var(--xu-accent) 55%, transparent);
}
.xu-chat-head strong{ font-size:14px; display:block }
.xu-chat-status{ font-size:11.5px; color:#22c55e; margin-top:2px }
.xu-context{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:10px 12px;
  background:rgba(0,0,0,.25);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.xu-chip{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--xu-text);
  padding:6px 10px;
  border-radius:999px;
  font-size:11.5px; cursor:pointer;
  transition: all .15s;
}
.xu-chip:hover{ border-color: color-mix(in srgb, var(--xu-accent) 50%, transparent); }
.xu-chip.active{
  background: color-mix(in srgb, var(--xu-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--xu-accent) 65%, transparent);
  color: var(--xu-accent);
  font-weight:700;
}
.xu-messages{
  flex:1;
  padding:12px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--xu-accent) 10%, transparent), transparent);
}
.xu-msg{
  max-width: 82%;
  padding:9px 12px;
  border-radius:14px;
  font-size:13px; line-height:1.45;
  position:relative;
  animation: xu-fade-in .25s ease both;
}
.xu-msg small{
  display:block; font-size:10px; opacity:.7;
  margin-top:4px;
}
.xu-msg.owner{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  align-self:flex-start;
  border-top-left-radius: 4px;
}
.xu-msg.visitor{
  background: linear-gradient(90deg, var(--xu-accent), var(--xu-accent-2));
  color:#0b0b0b;
  align-self:flex-end;
  font-weight:600;
  border-top-right-radius: 4px;
}
.xu-msg.visitor small{ color:#1e1e1e }
@keyframes xu-fade-in{
  from{ opacity:0; transform: translateY(4px) scale(.98) }
  to{ opacity:1; transform:none }
}
.xu-chat-input{
  display:flex; gap:8px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.25);
}
.xu-chat-input input{
  flex:1;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  color:var(--xu-text);
  padding:10px 12px;
  font-size:13px;
  outline:none; font-family: inherit;
  transition: border-color .15s;
}
.xu-chat-input input:focus{ border-color: color-mix(in srgb, var(--xu-accent) 55%, transparent); }
.xu-chat-input button{
  width:44px; border:0; cursor:pointer;
  border-radius:12px;
  background:linear-gradient(90deg, var(--xu-accent), var(--xu-accent-2));
  color:#0b0b0b;
  font-size:16px;
}

/* ----------- SWEETALERT2 ADAPTADO ----------- */
.swal2-popup{ font-family: inherit !important }

/* ----------- RESPONSIVE MOBILE ----------- */
@media (max-width: 600px){
  .xu-actions{ grid-template-columns: repeat(5, 1fr); gap:6px }
  .xu-action span{ font-size:9.5px }
  .xu-action i{ font-size:14px }
  .xu-reactions{ grid-template-columns: repeat(5,1fr); gap:6px }
  .xu-reaction .e{ font-size:18px }
  .xu-section{ padding:14px 12px }
  .xu-chat{ min-height: 62vh; max-height: 80vh }
  .xu-context{ padding: 8px 10px }
  .xu-chip{ font-size: 10.5px; padding:5px 8px }
}
@media (max-width: 420px){
  .xu-chat-head img{ width:38px; height:38px }
  .xu-msg{ max-width:86% }
}