/* ========================================
   CALLAITA MATCH — Party Matching System
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&display=swap');

:root {
  --black: #0a0a0a;
  --black-light: #111;
  --black-card: #1a1a1a;
  --dark-red: #8B0000;
  --crimson: #DC143C;
  --crimson-bright: #ff1744;
  --green: #00c850;
  --white: #f5f5f5;
  --white-soft: rgba(255,255,255,0.85);
  --white-dim: rgba(255,255,255,0.5);
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;overflow-x:hidden}
body{font-family:'Outfit',sans-serif;background:var(--black);color:var(--white);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
input,select,textarea{font-family:inherit;outline:none}

/* ========== VIEWS ========== */
.view{display:none;min-height:100vh;min-height:100dvh;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;animation:fadeUp .4s ease}
.view.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ========== LANDING ========== */
.landing{text-align:center;background:radial-gradient(circle at 50% 40%,rgba(139,0,0,.2),var(--black))}
.landing__logo{width:min(70vw,340px);margin-bottom:.8rem;filter:drop-shadow(0 0 30px rgba(220,20,60,.5))}
.landing__tagline{font-size:clamp(.9rem,2.5vw,1.15rem);color:var(--white-dim);margin-bottom:2.5rem;letter-spacing:1px}
.landing__buttons{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:320px}

/* ========== BUTTONS ========== */
.btn{width:100%;padding:.9rem 1.5rem;border-radius:var(--radius-sm);font-weight:700;font-size:1rem;text-align:center;transition:all var(--transition);text-transform:uppercase;letter-spacing:1px}
.btn-primary{background:linear-gradient(135deg,var(--dark-red),var(--crimson));color:var(--white)}
.btn-primary:hover{box-shadow:0 6px 25px rgba(220,20,60,.4);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.2)}
.btn-outline:hover{border-color:var(--crimson);color:var(--crimson)}
.btn-small{padding:.6rem 1rem;font-size:.85rem;width:auto}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ========== FORMS ========== */
.form-container{width:100%;max-width:420px}
.form-container h2{text-align:center;font-size:1.6rem;margin-bottom:.3rem;color:var(--crimson);text-transform:uppercase;letter-spacing:2px}
.form-container .subtitle{text-align:center;color:var(--white-dim);font-size:.85rem;margin-bottom:2rem}
.form-box{background:var(--black-card);border:1px solid rgba(220,20,60,.15);border-radius:var(--radius);padding:2rem 1.5rem;position:relative;overflow:hidden}
.form-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--dark-red),var(--crimson),var(--dark-red))}
.form-group{margin-bottom:1.3rem}
.form-group label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--white-dim);margin-bottom:.4rem}
.form-input{width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--white);font-size:.95rem;transition:border-color var(--transition),background var(--transition)}
.form-input:focus{border-color:var(--crimson);background:rgba(220,20,60,.05)}
.form-input::placeholder{color:rgba(255,255,255,.25)}
select.form-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,.5)' viewBox='0 0 16 16'%3E%3Cpath d='m8 11-5-5h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
select.form-input option{background:var(--black-card);color:var(--white)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-check{display:flex;align-items:flex-start;gap:.6rem;margin-top:.5rem}
.form-check input[type=checkbox]{margin-top:3px;accent-color:var(--crimson);width:16px;height:16px;flex-shrink:0}
.form-check label{font-size:.8rem;color:var(--white-dim);line-height:1.4;cursor:pointer}
.form-error{color:var(--crimson-bright);font-size:.8rem;background:rgba(220,20,60,.08);padding:.6rem .8rem;border-radius:var(--radius-sm);border:1px solid rgba(220,20,60,.2);margin-bottom:1rem;text-align:center;display:none}
.form-error.show{display:block;animation:fadeUp .3s ease}
.form-link{text-align:center;margin-top:1.2rem;font-size:.85rem;color:var(--white-dim)}
.form-link a{color:var(--crimson);font-weight:600}
.form-link a:hover{text-decoration:underline}

/* RUT status */
.rut-status{font-size:.75rem;font-weight:600;margin-top:.25rem;min-height:1em}
.rut-status.valid{color:var(--green)}
.rut-status.invalid{color:var(--crimson)}

/* ========== MATCH APP ========== */
.app-header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;background:rgba(10,10,10,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);z-index:100}
.app-header h2{font-size:1.1rem;color:var(--crimson);letter-spacing:2px}
.match-view{padding-top:60px;justify-content:flex-start}
.match-view .card-area{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:400px;padding:.5rem 0}

/* Photo Upload */
.photo-upload{text-align:center;margin-bottom:1.3rem}
.photo-dropzone{width:120px;height:120px;border-radius:50%;border:2px dashed rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin:0 auto .6rem;cursor:pointer;overflow:hidden;transition:all var(--transition);position:relative;background:rgba(255,255,255,.03)}
.photo-dropzone:hover,.photo-dropzone.dragover{border-color:var(--crimson);background:rgba(220,20,60,.05)}
.photo-dropzone img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.photo-dropzone__placeholder{color:var(--white-dim);font-size:.7rem;text-align:center;line-height:1.3;padding:.5rem}
.photo-dropzone__placeholder svg{display:block;margin:0 auto .3rem;opacity:.4}
.photo-label{font-size:.75rem;color:var(--white-dim);cursor:pointer}
.photo-label:hover{color:var(--crimson)}

/* Bio textarea + counter */
textarea.form-input{resize:none;min-height:70px;line-height:1.4}
.bio-counter{text-align:right;font-size:.7rem;color:var(--white-dim);margin-top:.2rem;transition:color var(--transition)}
.bio-counter.warn{color:#ff9800}
.bio-counter.limit{color:var(--crimson)}

/* ========== PROFILE CARD (Tinder-style) ========== */
.profile-card{background:var(--black-card);border:1px solid rgba(220,20,60,.12);border-radius:20px;width:100%;position:relative;overflow:hidden;transition:transform .4s ease,opacity .4s ease;aspect-ratio:3/4.5}

/* Large photo area */
.profile-card__photo{position:relative;width:100%;height:70%;overflow:hidden;background:linear-gradient(135deg,var(--dark-red),var(--crimson))}
.profile-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
.profile-card__photo-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;background:linear-gradient(135deg,rgba(139,0,0,.4),rgba(220,20,60,.2))}

/* Gradient overlay at bottom of photo for text readability */
.profile-card__photo::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(10,10,10,.9) 0%,rgba(10,10,10,.4) 50%,transparent 100%);pointer-events:none}

/* Name + gender overlaid on photo bottom */
.profile-card__identity{position:absolute;bottom:.8rem;left:1.2rem;right:1.2rem;z-index:2}
.profile-card__name{font-size:1.5rem;font-weight:800;margin-bottom:.15rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.profile-card__gender{font-size:.8rem;color:var(--white-soft);text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* "Nuevo 🔥" badge */
.profile-card__badge{position:absolute;top:.8rem;right:.8rem;z-index:3;background:linear-gradient(135deg,var(--crimson),#ff6b35);color:var(--white);font-size:.7rem;font-weight:700;padding:.3rem .7rem;border-radius:50px;letter-spacing:.5px;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 2px 12px rgba(220,20,60,.4)}

/* Info section below photo */
.profile-card__info{padding:1rem 1.2rem .8rem;display:flex;flex-direction:column;gap:.6rem}
.profile-card__section{margin:0}
.profile-card__section h4{font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:var(--white-dim);margin-bottom:.25rem}
.profile-card__section p{font-size:.88rem;line-height:1.45;color:var(--white-soft)}

/* Swipe animation classes */
.profile-card.swipe-left{transform:translateX(-120%) rotate(-15deg);opacity:0}
.profile-card.swipe-right{transform:translateX(120%) rotate(15deg);opacity:0}

/* New profiles notification toast */
.new-profiles-toast{position:fixed;top:115px;left:50%;transform:translateX(-50%) translateY(-20px);background:linear-gradient(135deg,var(--dark-red),var(--crimson));color:var(--white);padding:.5rem 1.2rem;border-radius:50px;font-size:.8rem;font-weight:600;z-index:150;opacity:0;transition:all .4s ease;pointer-events:none;box-shadow:0 4px 20px rgba(220,20,60,.4);cursor:pointer}
.new-profiles-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* Action Buttons */
.action-buttons{display:flex;gap:1.5rem;padding:1rem 0 1.5rem;justify-content:center}
.action-btn{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;transition:all var(--transition);border:2px solid}
.action-btn.pass{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:var(--white)}
.action-btn.pass:hover{border-color:var(--white);background:rgba(255,255,255,.1);transform:scale(1.1)}
.action-btn.like{border-color:rgba(220,20,60,.4);background:rgba(220,20,60,.1);color:var(--crimson)}
.action-btn.like:hover{border-color:var(--crimson);background:var(--crimson);color:var(--white);transform:scale(1.1);box-shadow:0 0 30px rgba(220,20,60,.4)}

/* Empty / Match states */
.empty-state{text-align:center;padding:3rem 1.5rem}
.empty-state .emoji{font-size:3rem;margin-bottom:1rem}
.empty-state h3{font-size:1.3rem;margin-bottom:.5rem}
.empty-state p{color:var(--white-dim);font-size:.9rem}

/* Match overlay */
.match-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;animation:fadeUp .5s ease;text-align:center;padding:2rem}
.match-overlay .hearts{font-size:4rem;margin-bottom:1rem;animation:pulse 1s ease-in-out infinite}
.match-overlay h2{font-size:2rem;background:linear-gradient(135deg,var(--crimson),var(--crimson-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}
.match-overlay p{color:var(--white-dim);margin-bottom:2rem;font-size:1rem}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ========== APP TABS ========== */
.app-tabs{display:flex;gap:0;padding:0 1rem;width:100%;max-width:460px;margin-top:60px}
.app-tab{flex:1;padding:.75rem 1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:var(--white-dim);font-size:.85rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:all var(--transition);position:relative;cursor:pointer}
.app-tab:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.app-tab:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.app-tab.active{background:rgba(220,20,60,.12);border-color:rgba(220,20,60,.3);color:var(--white)}
.app-tab.active::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:var(--crimson);border-radius:2px}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--crimson);color:var(--white);font-size:.65rem;font-weight:700;margin-left:.4rem;animation:pulse .8s ease-in-out infinite}

/* Tab Panels */
.tab-panel{display:none;width:100%;flex:1;flex-direction:column;align-items:center}
.tab-panel.active{display:flex}

/* ========== MATCHES LIST ========== */
.matches-container{width:100%;max-width:460px;padding:.5rem 1rem 2rem}
.matches-search{margin-bottom:1rem}
.matches-search .form-input{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);padding:.65rem 1rem;font-size:.9rem;border-radius:50px}
.matches-search .form-input:focus{border-color:var(--crimson);background:rgba(220,20,60,.04)}

.matches-list{display:flex;flex-direction:column;gap:.6rem}

.match-card{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--black-card);border:1px solid rgba(220,20,60,.1);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
.match-card:hover{border-color:rgba(220,20,60,.3);background:rgba(220,20,60,.05);transform:translateX(4px)}

.match-card__avatar{width:52px;height:52px;min-width:52px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--dark-red),var(--crimson));display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:2px solid rgba(220,20,60,.3)}
.match-card__avatar img{width:100%;height:100%;object-fit:cover}

.match-card__info{flex:1;min-width:0}
.match-card__name{font-weight:700;font-size:.95rem;display:block;margin-bottom:.15rem}
.match-card__preview{font-size:.78rem;color:var(--white-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

.match-card__meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.match-card__time{font-size:.65rem;color:var(--white-dim)}
.match-card__unread{min-width:20px;height:20px;border-radius:10px;background:var(--crimson);color:var(--white);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px}

.matches-empty{text-align:center;padding:3rem 1.5rem;color:var(--white-dim)}
.matches-empty .emoji{font-size:2.5rem;margin-bottom:.8rem}
.matches-empty h3{color:var(--white);font-size:1.1rem;margin-bottom:.4rem}

/* ========== CHAT VIEW ========== */
.chat-view{padding:0;justify-content:flex-start}
.chat-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:.7rem;padding:.6rem 1rem;background:rgba(10,10,10,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(220,20,60,.15);z-index:100}
.chat-back{background:none;color:var(--white);font-size:1.4rem;padding:.4rem;cursor:pointer;transition:color var(--transition);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.chat-back:hover{color:var(--crimson);background:rgba(220,20,60,.1)}
.chat-header__avatar{width:38px;height:38px;min-width:38px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--dark-red),var(--crimson));display:flex;align-items:center;justify-content:center;font-size:1rem;border:2px solid rgba(220,20,60,.3)}
.chat-header__avatar img{width:100%;height:100%;object-fit:cover}
.chat-header__info{flex:1}
.chat-header__name{display:block;font-weight:700;font-size:.95rem}
.chat-header__status{display:block;font-size:.7rem;color:var(--green)}

.chat-messages{flex:1;overflow-y:auto;padding:70px 1rem 80px;display:flex;flex-direction:column;gap:.5rem;scroll-behavior:smooth}

/* Chat Bubbles */
.chat-bubble{max-width:78%;padding:.6rem 1rem;border-radius:16px;font-size:.9rem;line-height:1.45;word-wrap:break-word;animation:fadeUp .2s ease}
.chat-bubble.sent{align-self:flex-end;background:linear-gradient(135deg,var(--dark-red),var(--crimson));color:var(--white);border-bottom-right-radius:4px}
.chat-bubble.received{align-self:flex-start;background:var(--black-card);border:1px solid rgba(255,255,255,.06);color:var(--white-soft);border-bottom-left-radius:4px}
.chat-bubble__time{font-size:.6rem;color:rgba(255,255,255,.4);margin-top:.3rem;display:block;text-align:right}
.chat-bubble.received .chat-bubble__time{text-align:left}

.chat-date-sep{text-align:center;color:var(--white-dim);font-size:.7rem;padding:.5rem 0;text-transform:uppercase;letter-spacing:1px}

/* Chat Input Bar */
.chat-input-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:rgba(10,10,10,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.06)}
.chat-input{flex:1;padding:.7rem 1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:50px;color:var(--white);font-size:.9rem;transition:border-color var(--transition)}
.chat-input:focus{border-color:var(--crimson);outline:none}
.chat-input::placeholder{color:rgba(255,255,255,.3)}
.chat-send{width:42px;height:42px;min-width:42px;border-radius:50%;background:linear-gradient(135deg,var(--dark-red),var(--crimson));color:var(--white);display:flex;align-items:center;justify-content:center;transition:all var(--transition);cursor:pointer;border:none}
.chat-send:hover{transform:scale(1.08);box-shadow:0 0 16px rgba(220,20,60,.4)}
.chat-send:active{transform:scale(.95)}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--dark-red);border-radius:3px}
::selection{background:rgba(220,20,60,.3);color:var(--white)}

/* ========== RESPONSIVE ========== */
@media(max-width:480px){
  .form-row{grid-template-columns:1fr}
  .form-box{padding:1.5rem 1.2rem}
  .action-btn{width:56px;height:56px;font-size:1.3rem}
  .app-tab{font-size:.78rem;padding:.6rem .8rem}
  .match-card{padding:.7rem .8rem}
  .chat-bubble{max-width:85%}
}