/* Estilos mejorados para el sistema de mensajería - solo HTML/CSS con múltiples chats */
:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --accent:#4f46e5;
  --accent-2:#7c3aed;
  --muted:#6b7280;
  --incoming:#eef2ff;
  --outgoing:#dcfce7;
  --border:#eef2f7;
  --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,'Helvetica Neue',sans-serif;background:var(--bg);display:flex;justify-content:center;align-items:flex-start;padding:32px}
.app{width:100%;max-width:var(--max-width);height:82vh;display:flex;gap:20px}

.sidebar{width:320px;background:var(--card);border-radius:14px;padding:18px;box-shadow:0 12px 30px rgba(15,23,42,0.06);display:flex;flex-direction:column}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sidebar-header h1{margin:0;font-size:18px;font-weight:600}
.unread{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px}
.subtitle{margin:6px 0 12px;color:var(--muted);font-size:13px}
.search{margin-bottom:8px}
.search input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fbfcff}
.contacts{list-style:none;padding:8px 0;margin:0;overflow:auto}
.contact{display:flex;gap:12px;padding:0;border-radius:10px;align-items:center;transition:all .15s}
.contact a{display:flex;gap:12px;padding:12px;border-radius:10px;align-items:center;color:inherit;text-decoration:none;flex:1;cursor:pointer;transition:background .15s,transform .08s}
.contact a:hover{background:rgba(99,102,241,0.06);transform:translateY(-1px)}

/* Por defecto, Ana está resaltada */
.contact a[href="#chat-ana"]{background:linear-gradient(90deg, rgba(79,70,229,0.08), transparent)}

/* Cuando otros chats son target, resaltarlos y quitar de Ana */
.app:has(#chat-carlos:target) .contact a[href="#chat-ana"]{background:transparent}
.app:has(#chat-carlos:target) .contact a[href="#chat-carlos"]{background:linear-gradient(90deg, rgba(79,70,229,0.08), transparent)}

.app:has(#chat-equipo:target) .contact a[href="#chat-ana"]{background:transparent}
.app:has(#chat-equipo:target) .contact a[href="#chat-equipo"]{background:linear-gradient(90deg, rgba(79,70,229,0.08), transparent)}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#60a5fa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0}
.avatar.small{width:40px;height:40px}
.meta strong{display:block;font-weight:600}
.preview{font-size:13px;color:var(--muted);max-width:170px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chat{display:none;flex:1;background:var(--card);border-radius:14px;padding:12px;flex-direction:column;box-shadow:0 12px 30px rgba(15,23,42,0.06)}
.chat#chat-ana{display:flex}
.chat:target{display:flex}
.chat:not(#chat-ana):target ~ #chat-ana{display:none}
.chat-header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border)}
.chat-info h2{margin:0;font-size:16px}
.status{font-size:13px;color:var(--muted)}
.chat-actions{margin-left:auto;display:flex;gap:8px}
.icon-btn{background:transparent;border:none;font-size:16px;padding:6px;border-radius:8px;cursor:not-allowed}

.messages{flex:1;padding:18px 20px;overflow:auto;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg, rgba(250,252,255,0.6), transparent)}
.date-sep{align-self:center;background:#f1f5f9;color:var(--muted);font-size:13px;padding:6px 12px;border-radius:999px}
.message{max-width:78%;padding:12px 14px;border-radius:14px;position:relative;line-height:1.4;box-shadow:0 4px 10px rgba(2,6,23,0.04)}
.message p{margin:0}
.message .time{display:block;font-size:11px;color:var(--muted);margin-top:6px;text-align:right}
.incoming{align-self:flex-start;background:var(--incoming)}
.incoming:after{content:"";position:absolute;left:-8px;top:12px;width:14px;height:14px;background:var(--incoming);transform:rotate(45deg);border-radius:2px}
.outgoing{align-self:flex-end;background:var(--outgoing)}
.outgoing:after{content:"";position:absolute;right:-8px;top:12px;width:14px;height:14px;background:var(--outgoing);transform:rotate(45deg);border-radius:2px}

.composer{display:flex;gap:10px;padding:12px;border-top:1px solid var(--border);align-items:center}
.composer input{flex:1;padding:12px;border-radius:999px;border:1px solid var(--border);outline:none}
.composer input:focus{box-shadow:0 6px 18px rgba(79,70,229,0.08);border-color:var(--accent)}
.composer button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:10px 16px;border-radius:999px;cursor:pointer;transition:opacity .15s}
.composer button:hover{opacity:0.9}

/* Scrollbar limpio */
.contacts::-webkit-scrollbar,.messages::-webkit-scrollbar{width:10px}
.contacts::-webkit-scrollbar-thumb,.messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.06);border-radius:10px}

/* RESPONSIVE TABLET - 641px a 900px */
@media (max-width:900px){
  body{padding:16px}
  .app{flex-direction:column;height:auto;gap:12px}
  .sidebar{width:100%;order:2;padding:14px}
  .chat{order:1}
  .message{max-width:85%}
}

/* RESPONSIVE MOBILE - hasta 640px */
@media (max-width:640px){
  html,body{height:auto}
  body{padding:12px;margin:0}
  .app{height:auto;flex-direction:column;gap:8px}
  .sidebar{width:100%;padding:12px;border-radius:10px}
  .sidebar-header h1{font-size:16px}
  .subtitle{font-size:12px}
  .search input{padding:8px 10px;font-size:14px}
  .contacts{padding:4px 0}
  .contact a{padding:10px;gap:10px}
  .avatar{width:40px;height:40px}
  .avatar.small{width:32px;height:32px}
  .meta strong{font-size:14px}
  .preview{font-size:12px;max-width:120px}
  
  .chat{padding:8px;border-radius:10px}
  .chat-header{padding:8px 10px;flex-wrap:wrap}
  .chat-info h2{font-size:14px}
  .status{font-size:12px}
  .icon-btn{font-size:14px;padding:4px}
  
  .messages{padding:12px 10px;gap:10px}
  .date-sep{font-size:11px;padding:4px 10px}
  .message{max-width:90%;padding:10px 12px;border-radius:10px;font-size:14px}
  .message p{font-size:14px}
  .message .time{font-size:10px}
  
  .composer{padding:8px;gap:6px}
  .composer input{padding:10px;font-size:14px}
  .composer button{padding:8px 14px;font-size:14px}
}

/* RESPONSIVE MOBILE PEQUEÑO - hasta 375px */
@media (max-width:375px){
  body{padding:8px}
  .sidebar{padding:10px}
  .sidebar-header h1{font-size:14px}
  .search input{padding:6px 8px;font-size:13px}
  .contact a{padding:8px;gap:8px}
  .avatar{width:36px;height:36px}
  .avatar.small{width:28px;height:28px}
  
  .chat-header{gap:8px}
  .chat-info h2{font-size:13px}
  
  .messages{padding:10px 8px;gap:8px}
  .message{max-width:92%;padding:8px 10px;font-size:13px}
  .message p{font-size:13px}
  .message .time{font-size:9px}
  
  .composer input{padding:8px};
  .composer button{padding:6px 12px;font-size:12px}
}