/* ============================================================
   ClassModels — Directorio de talento
   Hoja de estilos principal (sin build; se sirve directa).
   Basada en el diseño del demo, adaptada y ampliada.
   ============================================================ */

:root {
    /* Tipografía editorial: serif de carácter para titulares, sans limpia para texto */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Base cálida tipo papel + tinta */
    --paper: #f4efe8;
    --paper-2: #efe8df;
    --ink: #1c1622;
    --ink-soft: #4a4351;
    --surface: #ffffff;
    --line: #e7ddd2;
    --primary: #e91e63;
    --primary-dark: #c2185b;
    --primary-light: #f8bbd0;
    /* Acento dorado (combina con el logo Bliss MX) */
    --gold: #c9a24b;
    --gold-soft: #e6c76e;
    --secondary: #6c5ce7;
    --secondary-dark: #5a4bd6;
    --success: #00b894;
    --warning: #fdcb6e;
    --danger: #d63031;
    --info: #0984e3;
    --dark: #1c1622;
    --dark-secondary: #2a2130;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    /* Tintas cálidas, no grises fríos: el papel es #f4efe8 y un gris neutro
       encima se ve sucio. Estos salen de la misma familia que la tinta #1c1622.
       Contraste sobre papel: 4.8, 6.3 y 8.0 — el mínimo legible es 4.5.
       Antes: 2.34, 4.03 y 5.41. El texto «muted» no llegaba ni a la mitad. */
    --gray-500: #6f6675;
    --gray-600: #5b5560;
    --gray-700: #443e4a;
    --gray-800: #424242;
    --gray-900: #212121;
    --white: #ffffff;
    --shadow-sm: 0 1px 2px rgba(28, 22, 34, 0.05), 0 1px 3px rgba(28, 22, 34, 0.05);
    --shadow-md: 0 6px 22px rgba(28, 22, 34, 0.08);
    --shadow-lg: 0 18px 48px rgba(28, 22, 34, 0.12);
    --shadow-xl: 0 30px 70px rgba(28, 22, 34, 0.18);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --maxw: 1280px;
}

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

body {
    font-family: var(--font-body);
    background:
        radial-gradient(1200px 600px at 100% -5%, rgba(233, 30, 99, 0.06), transparent 60%),
        radial-gradient(1000px 500px at -10% 0%, rgba(108, 92, 231, 0.05), transparent 55%),
        var(--paper);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Tipografía editorial ===== */
h1, h2, h3, .results-title, .section-title, .plan-name, .plan-price,
.profile-name, .auth-card h1, .dash-header h1, .hero h1, .stat-tile .num,
.logo-header, .swipe-card-info h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
}
.logo-header { letter-spacing: -0.02em; font-weight: 900; }

/* ===== Aparición escalonada de tarjetas ===== */
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .models-grid .model-card { animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
    .models-grid .model-card:nth-child(1) { animation-delay: 0.02s; }
    .models-grid .model-card:nth-child(2) { animation-delay: 0.06s; }
    .models-grid .model-card:nth-child(3) { animation-delay: 0.10s; }
    .models-grid .model-card:nth-child(4) { animation-delay: 0.14s; }
    .models-grid .model-card:nth-child(5) { animation-delay: 0.18s; }
    .models-grid .model-card:nth-child(6) { animation-delay: 0.22s; }
    .models-grid .model-card:nth-child(7) { animation-delay: 0.26s; }
    .models-grid .model-card:nth-child(8) { animation-delay: 0.30s; }
    .models-grid .model-card:nth-child(n+9) { animation-delay: 0.34s; }
}

a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.flex { display: flex; }
.muted { color: var(--gray-500); }
.text-center { text-align: center; }

/* ============ TOP BAR ============ */
.top-bar { background: var(--dark); color: var(--white); padding: 8px 0; font-size: 12px; }
.top-bar-content {
    max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.top-bar a { color: var(--gray-300); text-decoration: none; transition: var(--transition); }
.top-bar a:hover { color: var(--white); }

/* ============ HEADER ============ */
.main-header {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 1000;
}
.header-content {
    max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.logo-header {
    display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 900;
    color: var(--primary); cursor: pointer; letter-spacing: -0.5px; text-decoration: none;
}
.logo-header i { font-size: 28px; }
.brand-logo { height: 60px; width: auto; display: block; }
.brand-logo--light { filter: brightness(0) invert(1); }
.search-box { flex: 1; max-width: 400px; position: relative; }
.search-box input {
    width: 100%; padding: 10px 40px 10px 16px; border: 2px solid var(--gray-200);
    border-radius: 25px; font-size: 14px; font-family: inherit; background: var(--gray-50);
}
.search-box input:focus {
    outline: none; border-color: var(--primary); background: var(--white);
    box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.1);
}
.search-box button {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: var(--primary); color: var(--white); border: none;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
}
.header-actions { display: flex; gap: 10px; align-items: center; }
.search-toggle { display: none; }              /* en escritorio el buscador siempre está visible */
body.landing .search-toggle { display: none !important; }

/* ============ BOTONES ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 22px; border-radius: 25px; font-weight: 700; font-size: 14px;
    border: none; cursor: pointer; text-decoration: none; transition: var(--transition);
    font-family: inherit; line-height: 1.2;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--primary), #ff4d7d); color: var(--white); box-shadow: 0 6px 18px rgba(233, 30, 99, 0.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(233, 30, 99, 0.38); }
.btn-secondary { background: var(--secondary); color: var(--white); box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4); }
.btn-success { background: var(--success); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-whatsapp { background: #25D366; color: var(--white); }
.btn-whatsapp:hover { background: #1ea952; transform: translateY(-2px); }
.btn-outline { background: transparent; border: 2px solid var(--gray-300); color: var(--gray-700); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: var(--gray-100); color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-200); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 14px 30px; font-size: 16px; }
.btn-block { width: 100%; }

/* ============ USER MENU ============ */
.user-menu { position: relative; }
.user-menu-trigger {
    display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
    border: 2px solid var(--gray-200); border-radius: 25px; background: var(--white);
    cursor: pointer; font-weight: 600; font-size: 13px; color: var(--gray-800);
}
.user-menu-trigger:hover { border-color: var(--primary); }
.user-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.user-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); background: var(--white);
    border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    min-width: 210px; padding: 8px; z-index: 1200;
}
.user-dropdown a, .user-dropdown button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--gray-800);
    text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--gray-100); color: var(--primary); }
.user-dropdown hr { border: none; border-top: 1px solid var(--gray-200); margin: 6px 0; }
.user-dropdown .role-tag { font-size: 11px; color: var(--gray-500); padding: 4px 12px 8px; }

/* ============ CATEGORY NAV ============ */
.category-nav { background: var(--white); border-bottom: 1px solid var(--gray-200); }
.category-nav-content {
    max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
    display: flex; overflow-x: auto; scrollbar-width: none;
}
.category-nav-content::-webkit-scrollbar { display: none; }
.cat-link {
    padding: 14px 18px; color: var(--gray-600); font-weight: 600; font-size: 13px;
    white-space: nowrap; border-bottom: 3px solid transparent; cursor: pointer;
    transition: var(--transition); text-decoration: none;
}
.cat-link:hover, .cat-link.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ============ LAYOUT PRINCIPAL ============ */
.page { flex: 1; }
.main-layout {
    max-width: var(--maxw); margin: 0 auto; padding: 24px 20px;
    display: grid; grid-template-columns: 260px 1fr; gap: 24px;
}
.sidebar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px;
    box-shadow: var(--shadow-sm); height: fit-content; position: sticky; top: 150px;
}
.sidebar h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.filter-section { margin-bottom: 20px; border-bottom: 1px solid var(--gray-200); padding-bottom: 16px; }
.filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-section h4 {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--gray-700); margin-bottom: 10px;
}
.filter-option {
    display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer;
    font-size: 13px; color: var(--gray-700);
}
.filter-option input[type="checkbox"], .filter-option input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }
.filter-select-custom, .form-control {
    width: 100%; padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit; color: var(--gray-800); background: var(--white);
}
.filter-select-custom:focus, .form-control:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

/* ============ CONTENIDO ============ */
.content-area { min-height: 500px; width: 100%; }
.results-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.results-title { font-size: 22px; font-weight: 800; }
.results-count { color: var(--gray-500); font-weight: 400; font-size: 14px; }
.sort-select {
    padding: 8px 14px; border: 1px solid var(--gray-300); border-radius: 20px;
    font-size: 13px; font-family: inherit; cursor: pointer; background: var(--white);
}

/* ============ GRID DE TARJETAS ============ */
.models-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.model-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex; flex-direction: column;
}
.model-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.model-card-image { position: relative; height: 270px; overflow: hidden; background: var(--paper-2); }
.model-card-image img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}
.model-card:hover .model-card-image img { transform: scale(1.08); filter: grayscale(0); }
/* En pantallas táctiles (sin hover) se muestran a color */
@media (hover: none) {
    .model-card-image img { filter: grayscale(0); }
}
/* Caption sobre la imagen (estilo mosaico agencia) */
.model-card-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.82));
    transition: padding-bottom 0.3s ease;
}
.model-card:hover .model-card-caption { padding-bottom: 14px; }
.model-card-caption .n { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 5px; letter-spacing: -0.01em; }
.model-card-caption .c { font-size: 12px; opacity: 0.88; margin-top: 1px; }
.model-card-badge {
    position: absolute; top: 10px; left: 10px; background: var(--primary); color: var(--white);
    padding: 4px 10px; border-radius: 15px; font-size: 11px; font-weight: 700;
}
.model-card-verified {
    position: absolute; top: 10px; right: 10px; background: var(--white); color: var(--secondary);
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 13px; box-shadow: var(--shadow-md);
}
.model-card-body { padding: 14px; flex: 1; }
.model-card-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.model-card-location { font-size: 12px; color: var(--gray-500); margin: 4px 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
    display: inline-block; background: var(--gray-100); padding: 3px 10px; border-radius: 12px;
    font-size: 11px; color: var(--gray-700); font-weight: 600;
}
.chip.cat { background: rgba(108, 92, 231, 0.1); color: var(--secondary); }
.model-card-rate { font-weight: 700; color: var(--primary); margin-top: 8px; font-size: 14px; }
.model-card-footer { display: flex; gap: 8px; padding: 0 14px 14px; }
.model-card-footer .btn { flex: 1; }

/* rating estrellas */
.stars { color: #f59e0b; letter-spacing: 1px; }

/* ============ PAGINACIÓN ============ */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 30px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 36px; height: 36px; padding: 0 10px; border-radius: 50%; border: 1px solid var(--gray-300);
    background: var(--white); cursor: pointer; font-weight: 600; font-size: 13px;
    display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--gray-700);
}
.pagination a:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
.pag-nav { display: contents; }
.pagination .active, .pagination span[aria-current] { background: var(--primary); color: var(--white); border-color: var(--primary); }
.pagination .disabled { opacity: 0.4; cursor: default; }
.pagination .dots { border: none; background: transparent; }

/* ============ EMPTY STATE ============ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--gray-500); }
.empty-state i { font-size: 48px; color: var(--gray-300); margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; color: var(--gray-700); margin-bottom: 8px; }

/* ============ CARDS GENÉRICAS ============ */
.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 20px; }
.card h2, .card h3 { margin-bottom: 14px; }
.section-title { font-size: 20px; font-weight: 800; margin-bottom: 16px; }

/* ============ FORMULARIOS / AUTH ============ */
.auth-wrap { max-width: 460px; margin: 40px auto; padding: 0 20px; }
/* Hero de autenticación con foto de fondo (estilo agencia) */
.auth-hero {
    min-height: calc(100vh - 100px);
    display: flex; align-items: center; justify-content: center;
    padding: 32px 16px; position: relative;
    background:
        linear-gradient(rgba(22, 16, 28, 0.66), rgba(22, 16, 28, 0.82)),
        url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1600&q=80') center/cover no-repeat;
}
.auth-card { background: var(--surface); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-xl); max-width: 460px; width: 100%; margin: 0 auto; }
.auth-hero .auth-card { backdrop-filter: saturate(120%); }
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-brand .logo-header { justify-content: center; font-size: 30px; }
.auth-card h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.auth-sub { color: var(--gray-500); font-size: 14px; margin-bottom: 22px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-700); margin-bottom: 6px; }
.form-hint { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
textarea.form-control { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-error { color: var(--danger); font-size: 12px; margin-top: 5px; }
.form-control.is-invalid { border-color: var(--danger); }
.auth-alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--gray-600); }
.auth-alt a { color: var(--primary); font-weight: 700; text-decoration: none; }

/* Selector de rol en registro */
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.role-option {
    border: 2px solid var(--gray-200); border-radius: var(--radius-md); padding: 16px; text-align: center;
    cursor: pointer; transition: var(--transition);
}
.role-option i { font-size: 26px; color: var(--gray-400); margin-bottom: 8px; }
.role-option strong { display: block; font-size: 15px; }
.role-option small { color: var(--gray-500); font-size: 12px; }
.role-option:hover { border-color: var(--primary); }
.role-option.selected { border-color: var(--primary); background: rgba(233, 30, 99, 0.05); }
.role-option.selected i { color: var(--primary); }
.role-option input { display: none; }

/* ============ ALERTAS ============ */
.alert { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 18px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: rgba(0, 184, 148, 0.12); color: #0a7d63; border-left: 4px solid var(--success); }
.alert-danger { background: rgba(214, 48, 49, 0.1); color: #a12626; border-left: 4px solid var(--danger); }
.alert-warning { background: rgba(253, 203, 110, 0.18); color: #8a6d1a; border-left: 4px solid var(--warning); }
.alert-info { background: rgba(9, 132, 227, 0.1); color: #0a5c9e; border-left: 4px solid var(--info); }

/* ============ BADGES ============ */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.badge-approved { background: rgba(0,184,148,.12); color: #0a7d63; }
.badge-pending  { background: rgba(253,203,110,.2); color: #8a6d1a; }
.badge-rejected { background: rgba(214,48,49,.12); color: #a12626; }
.badge-draft    { background: var(--gray-200); color: var(--gray-700); }
.badge-verified { background: rgba(108,92,231,.12); color: var(--secondary); }

/* ============ TABLAS ============ */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
    background: var(--gray-100); padding: 12px 14px; text-align: left; font-weight: 700;
    font-size: 12px; text-transform: uppercase; color: var(--gray-700); white-space: nowrap;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
table.data tr:hover td { background: var(--gray-50); }

/* ============ DASHBOARD ============ */
.dash-layout { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px; display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.dash-nav { background: var(--white); border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm); height: fit-content; position: sticky; top: 90px; }
.dash-nav a {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm);
    color: var(--gray-700); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 4px;
}
.dash-nav a:hover { background: var(--gray-100); }
.dash-nav a.active { background: var(--primary); color: var(--white); }
.dash-main { min-width: 0; }
.dash-header { margin-bottom: 22px; }
.dash-header h1 { font-size: 26px; font-weight: 800; }
.dash-header p { color: var(--gray-500); font-size: 14px; }

/* Stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); }
.stat-tile .num { font-size: 28px; font-weight: 800; color: var(--primary); }
.stat-tile .lbl { font-size: 12px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }

/* ============ PLANES ============ */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 18px 20px; }
.plan-card.featured { border-color: var(--primary); box-shadow: var(--shadow-lg); position: relative; }
.plan-card.featured::before {
    content: 'Recomendado'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 12px;
}
.plan-name { font-size: 16px; font-weight: 700; }
.plan-price { font-size: 26px; font-weight: 700; color: var(--primary); margin: 6px 0; }
.plan-price small { font-size: 14px; color: var(--gray-500); font-weight: 600; }
.plan-features { list-style: none; margin: 16px 0; }
.plan-features { margin: 12px 0; }
.plan-features li { padding: 5px 0; font-size: 13px; color: var(--gray-700); display: flex; gap: 8px; align-items: flex-start; }
.plan-features li i { color: var(--success); margin-top: 3px; }

/* ============ PERFIL ============ */
.profile-wrapper { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-600); text-decoration: none; font-weight: 600; font-size: 14px; margin-bottom: 18px; }
.back-link:hover { color: var(--primary); }
.profile-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; height: 440px; box-shadow: var(--shadow-md); }
.profile-gallery-main { height: 100%; }
.profile-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.profile-gallery-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.profile-gallery-side img { width: 100%; height: 100%; object-fit: cover; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-full { grid-column: 1 / -1; }
.profile-detail-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.profile-name { font-size: 30px; font-weight: 900; letter-spacing: -0.5px; display: flex; align-items: center; gap: 10px; }
.profile-rating { text-align: center; }
.profile-rating .stars { font-size: 22px; }
.profile-rating .num { font-size: 20px; font-weight: 800; }
/* 3 columnas fijas: así se puede saber cuántas sobran en el último renglón. */
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
/* Si el último renglón queda a medias, el último dato se estira y llena el hueco:
   1 solo en la fila -> ocupa las 3 columnas; 2 en la fila -> el segundo ocupa 2. */
.detail-item:last-child:nth-child(3n + 1) { grid-column: span 3; }
.detail-item:last-child:nth-child(3n + 2) { grid-column: span 2; }
.detail-item { background: var(--gray-50); padding: 14px; border-radius: var(--radius-sm); text-align: center; }
.detail-label { font-size: 11px; text-transform: uppercase; color: var(--gray-500); letter-spacing: 0.5px; margin-bottom: 6px; font-weight: 700; }
.detail-value { font-size: 16px; font-weight: 700; }
.detail-value.is-long { font-size: 13px; }
.contact-locked { background: var(--gray-50); border: 2px dashed var(--gray-300); border-radius: var(--radius-md); padding: 22px; text-align: center; }
/* Solo el candado decorativo va grande — no los iconos de los botones de adentro. */
.contact-locked > i { font-size: 30px; color: var(--gray-400); margin-bottom: 10px; }
.contact-box { display: flex; flex-direction: column; gap: 10px; }
.contact-box a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--gray-50); text-decoration: none; color: var(--gray-800); font-weight: 600; }
.contact-box a:hover { background: var(--gray-100); }

/* Reseñas */
.review-card { background: var(--gray-50); border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px; }
.review-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.review-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.review-score { text-align: center; background: var(--white); padding: 10px 6px; border-radius: var(--radius-sm); font-size: 12px; color: var(--gray-600); }

/* ============ SWIPE / DESCUBRIDOR DE CASTING ============ */
.swipe-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 10001;
    flex-direction: column; align-items: center; justify-content: center; padding: 20px;
}
.swipe-overlay.active { display: flex; }
.swipe-topbar { position: absolute; top: 15px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 18px; }
.swipe-pill { background: rgba(255, 255, 255, 0.15); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.swipe-deck { position: relative; width: 90%; max-width: 360px; height: 540px; }
.swipe-card {
    position: absolute; inset: 0; background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); will-change: transform; user-select: none;
}
.swipe-card img { width: 100%; height: 82%; object-fit: cover; pointer-events: none; }
.swipe-card-info { padding: 12px 16px; }
.swipe-card-info h3 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.swipe-card-info .loc { color: var(--gray-500); font-size: 12px; margin: 2px 0; }
.swipe-card-info .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.swipe-card-info .tags .chip { font-size: 10px; padding: 2px 8px; }
.swipe-stamp {
    position: absolute; top: 26px; font-size: 30px; font-weight: 900; padding: 6px 16px; border: 4px solid;
    border-radius: 10px; opacity: 0; transform: rotate(-15deg); text-transform: uppercase;
}
.swipe-stamp.like { right: 20px; color: var(--success); border-color: var(--success); }
.swipe-stamp.pass { left: 20px; color: #ff4757; border-color: #ff4757; transform: rotate(15deg); }
.swipe-actions { display: flex; gap: 20px; margin-top: 24px; align-items: center; }
.swipe-btn {
    width: 64px; height: 64px; border-radius: 50%; border: none; font-size: 24px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
.swipe-btn:active { transform: scale(0.9); }
.swipe-btn.pass { background: linear-gradient(135deg, #ff6b7d, #ff2d55); }
.swipe-btn.like { background: linear-gradient(135deg, #2bd6a6, #00b894); }
.swipe-btn.undo { width: 52px; height: 52px; font-size: 18px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #3a2c05; }
.swipe-btn.pass:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 16px 32px rgba(255, 45, 85, 0.5); }
.swipe-btn.like:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 16px 32px rgba(0, 184, 148, 0.5); }
.swipe-btn.undo:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 28px rgba(201, 162, 75, 0.5); }
.swipe-btn.pulse { animation: btnPulse 0.32s ease; }
@keyframes btnPulse { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* Estampas y glow al decidir */
.swipe-stamp.like { color: var(--success); border-color: var(--success); }
.swipe-stamp.pass { color: #ff2d55; border-color: #ff2d55; }
.swipe-empty { color: var(--gray-700); text-align: center; max-width: 360px; }
.swipe-empty > i { font-size: 46px; color: var(--primary); margin-bottom: 14px; }

/* ============ MODAL GENÉRICO ============ */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 10002; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal { background: var(--white); border-radius: var(--radius-lg); padding: 26px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); }
.modal h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.modal-close { float: right; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--gray-100); cursor: pointer; }

/* ============ TOAST ============ */
.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 20000; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: var(--dark); color: var(--white); padding: 14px 20px; border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 10px; font-size: 14px;
    border-left: 4px solid var(--primary); animation: slideIn 0.3s ease;
}
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============ FLOATING ============ */
.float-btn { position: fixed; bottom: 20px; right: 20px; width: 52px; height: 52px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; z-index: 998; box-shadow: 0 4px 15px rgba(233,30,99,.4); border: none; cursor: pointer; }
.float-btn:hover { transform: translateY(-3px); }

/* ============ HERO (para páginas de marketing) ============ */
.hero {
    background:
        radial-gradient(900px 400px at 80% -20%, rgba(233, 30, 99, 0.35), transparent 60%),
        radial-gradient(700px 400px at 0% 120%, rgba(108, 92, 231, 0.30), transparent 55%),
        linear-gradient(135deg, var(--dark), var(--dark-secondary));
    color: #fff; padding: 44px 20px; text-align: center; position: relative;
}
.hero h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.hero p { font-size: 15px; color: rgba(255, 255, 255, 0.75); max-width: 560px; margin: 0 auto; }
.hero .btn { margin: 0 6px; }

/* ============ LANDING HERO (entrada) ============ */
.landing-hero {
    position: relative; min-height: 86vh; display: flex; align-items: center;
    padding: 48px 20px; color: #fff; background: #16101c; overflow: hidden;
}
.lh-layer { position: absolute; inset: 0; background-size: cover; background-position: center 22%; opacity: 0; transition: opacity 1.1s ease; }
.lh-layer.show { opacity: 1; }
.lh-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,16,28,0.85), rgba(22,16,28,0.35) 72%), linear-gradient(rgba(22,16,28,0.25), rgba(22,16,28,0.72)); }
.landing-hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.landing-logo { height: clamp(64px, 11vw, 150px); width: auto; margin: 4px 0 10px; }
.landing-scroll { z-index: 2; }

/* ===== LANDING: cabecero transparente sobre el hero (la foto es la estrella) ===== */
body.landing .top-bar { display: none; }
body.landing .category-nav { display: none; }
body.landing .main-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: transparent; border-bottom: 1px solid transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
body.landing .main-header .brand-logo { filter: brightness(0) invert(1); transition: filter .35s ease; }
body.landing .main-header .search-box { display: none; }
body.landing .btn-filtros { display: none; }
body.landing .main-header .header-actions .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: transparent; }
body.landing .main-header .header-actions .btn-outline:hover { border-color: #fff; color: #fff; }
/* El hero arranca desde arriba; el directorio deja espacio para el cabecero fijo */
body.landing #directorio { padding-top: 80px; }

/* Al hacer scroll, el cabecero se vuelve sólido */
body.landing.scrolled .main-header {
    background: rgba(255, 255, 255, 0.96) !important; box-shadow: var(--shadow-sm) !important; border-bottom-color: var(--line) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
}
body.landing.scrolled .main-header .brand-logo { filter: none !important; }
body.landing.scrolled .main-header .search-box { display: block; }
body.landing.scrolled .btn-filtros { display: inline-flex; }
body.landing.scrolled .main-header .header-actions .btn-outline { color: var(--gray-700); border-color: var(--gray-300); }

/* ===== LANDING en MÓVIL: foto protagonista, texto mínimo ===== */
@media (max-width: 760px) {
    body.landing .landing-logo { display: none; }        /* el header ya muestra el logo */
    body.landing .landing-cats { display: none; }        /* sin botones de género en móvil */
    body.landing .landing-hero { align-items: flex-end; }
    body.landing .landing-hero-inner { padding-bottom: 8vh; }
    body.landing .landing-eyebrow { font-size: 11px; letter-spacing: 0.24em; }
    body.landing .landing-tag { font-size: 17px; line-height: 1.35; margin-bottom: 18px; max-width: 92%; }
    body.landing .landing-cta .btn { padding: 12px 18px; font-size: 14px; }
    /* Header transparente más limpio: solo logo + Ingresar */
    body.landing:not(.scrolled) .main-header .header-actions .btn-secondary,
    body.landing:not(.scrolled) .main-header .header-actions .btn-primary { display: none; }
    /* Coverflow en móvil */
    .cf-stage { height: min(56vh, 460px); }
    .cf-card { width: min(72vw, 252px); border-radius: 18px; }
    .cf-card-info { padding: 44px 15px 15px; }
    .cf-card-info h4 { font-size: 19px; }
    .cf-nav { width: 46px; height: 46px; }
    .cf-nav i { font-size: 16px !important; }
    .cf-nav.prev { left: -2px; }
    .cf-nav.next { right: -2px; }
    #picks-title { font-size: 21px; }
    #cf-hint { font-size: 12px; }
    .cf-action { padding: 10px 18px; font-size: 13px; }
}
.landing-eyebrow { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.32em; font-size: 12px; font-weight: 700; color: var(--gold-soft); }
.landing-eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold); }
.landing-brand { font-family: var(--font-display); font-size: clamp(44px, 8vw, 88px); font-weight: 900; letter-spacing: -0.02em; line-height: 0.95; margin: 10px 0 6px; }
.landing-brand span { color: var(--primary); }
.landing-tag { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(17px, 2.2vw, 23px); line-height: 1.4; opacity: 0.95; max-width: 560px; margin-bottom: 26px; }
.landing-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.landing-cats a {
    background: var(--primary); color: #fff; padding: 12px 24px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; font-size: 12px; text-decoration: none;
    transition: var(--transition); border-radius: 2px;
}
.landing-cats a:hover { background: var(--primary-dark); transform: translateY(-2px); }
.landing-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.landing-scroll {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 24px; text-decoration: none; opacity: 0.85; animation: bob 1.8s infinite;
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ============ NAV LIMPIO + FILTROS PÍLDORA + TILES + DRAWER ============ */
.cat-link { padding: 13px 15px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; }

.pill-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pill {
    padding: 8px 18px; border: 1px solid var(--line); border-radius: 30px; font-size: 12px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
    transition: var(--transition); background: var(--surface); white-space: nowrap;
}
.pill:hover { border-color: var(--primary); color: var(--primary); }
.pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.talent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px; }
.tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.5s ease; }
.tile:hover img { filter: grayscale(0); transform: scale(1.06); }
.tile-badge { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--secondary); display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 3; }
.tile-star { position: absolute; top: 8px; left: 8px; z-index: 3; }
.tile-star button { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,0.4); color: #fff; cursor: pointer; }
.tile-star button:hover { background: var(--primary); }
.tile-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #fff; opacity: 0; transition: opacity 0.3s ease; background: linear-gradient(transparent 45%, rgba(194,24,91,0.5), rgba(22,16,28,0.88)); }
.tile:hover .tile-overlay { opacity: 1; }
.tile-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 5px; }
.tile-meta { font-size: 12px; opacity: 0.9; margin-top: 2px; }
.tile-rate { font-size: 12px; font-weight: 700; margin-top: 6px; }
@keyframes tileIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
#dir-content.is-loading { opacity: 0.4; transition: opacity 0.12s ease; }
@media (hover: none) {
    .tile img { filter: grayscale(0); }
    .tile-overlay { opacity: 1; background: linear-gradient(transparent 55%, rgba(22,16,28,0.85)); }
}

.filter-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10050; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.filter-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.filter-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 340px; max-width: 88vw; background: var(--surface); box-shadow: var(--shadow-xl); z-index: 10051; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); overflow-y: auto; padding: 20px; }
.filter-drawer.open { transform: translateX(0); }
.filter-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.filter-drawer-head h3 { font-size: 18px; }

/* ============ HOME MASTHEAD ============ */
.home-masthead { max-width: var(--maxw); margin: 0 auto; padding: 36px 20px 10px; }
.home-masthead .eyebrow {
    text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; font-weight: 700;
    color: var(--primary); display: inline-flex; align-items: center; gap: 8px;
}
.home-masthead .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--primary); display: inline-block; }
.home-masthead h1 {
    font-size: clamp(30px, 5vw, 48px); font-weight: 600; line-height: 1.04;
    letter-spacing: -0.02em; margin: 12px 0 8px; max-width: 780px; color: var(--ink);
}
.home-masthead h1 em { font-style: italic; color: var(--primary); }
.home-masthead p { color: var(--ink-soft); max-width: 560px; font-size: 16px; }

/* ============ DISCOVER (escenario centrado) ============ */
.discover-stage {
    background:
        radial-gradient(700px 460px at 50% 12%, rgba(233, 30, 99, 0.18), transparent 60%),
        radial-gradient(600px 400px at 50% 100%, rgba(108, 92, 231, 0.14), transparent 55%),
        #16101c;
    min-height: calc(100vh - 118px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 32px;
}
.discover-stage h1 { color: #fff; font-size: 22px; }
.discover-stage p, .discover-stage .muted { color: rgba(255, 255, 255, 0.7) !important; }
.discover-stage #swipe-count { color: #fff; }
.discover-stage .swipe-deck { width: min(92vw, 384px); height: min(68vh, 600px); }
.swipe-card { cursor: grab; }
.swipe-card:active { cursor: grabbing; }
.discover-full { min-height: 100vh; position: relative; overflow-x: hidden; }
.discover-close {
    position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 18px; text-decoration: none; z-index: 6; transition: var(--transition);
}
.discover-close:hover { background: rgba(255, 255, 255, 0.28); }
.picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; max-width: 640px; margin: 6px auto 0; max-height: 50vh; overflow-y: auto; padding: 4px; }
.pick { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; text-decoration: none; }
.pick img { width: 100%; height: 100%; object-fit: cover; }
.pick span { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); }
/* ============ Coverflow de selección final (premium) ============ */
.discover-full .swipe-empty { max-width: 100%; width: 100%; color: #fff; }
/* Reset de la regla vieja: los iconos del coverflow heredan tamaño normal */
.swipe-empty .cf-nav i, .swipe-empty .cf-view i,
.swipe-empty .cf-remove i, .swipe-empty .cf-card-info i,
.swipe-empty .cf-action i { margin: 0; }

.coverflow { position: relative; width: 100%; max-width: 1060px; margin: 2px auto 0; display: flex; align-items: center; justify-content: center; }
.cf-stage { position: relative; width: 100%; height: min(58vh, 520px); perspective: 1500px; }
.cf-card {
    position: absolute; top: 0; left: 50%; width: min(62vw, 300px); height: 100%;
    border-radius: 22px; overflow: hidden; background: #241b2c;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, box-shadow .45s ease;
    transform-style: preserve-3d; cursor: grab; will-change: transform;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.cf-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, rgba(15,10,20,.15), rgba(15,10,20,.55)); transition: opacity .5s ease; }
.cf-card.is-center::after { opacity: 0; }
.cf-card.is-center {
    box-shadow: 0 44px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(230, 199, 110, 0.55), 0 0 60px rgba(230, 199, 110, 0.14);
}
.cf-card:active { cursor: grabbing; }
.cf-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cf-card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 18px 18px; z-index: 2;
    background: linear-gradient(transparent, rgba(15, 10, 20, 0.94)); }
.cf-card-info h4 { font-family: var(--font-display); font-size: 22px; line-height: 1.12; color: #fff; display: flex; align-items: center; gap: 6px; }
.cf-card-info h4 i { font-size: 15px !important; }
.cf-card-info span { font-size: 13px; color: rgba(255, 255, 255, 0.82); }

/* Pills de acción — solo visibles en la tarjeta central */
.cf-view, .cf-card .cf-remove {
    position: absolute; z-index: 4; top: 14px; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .01em;
    border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(18, 12, 24, 0.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease, background .2s ease, border-color .2s ease;
}
.cf-view { left: 14px; color: #fff; text-decoration: none; }
.cf-view i { font-size: 12px !important; color: var(--gold-soft) !important; }
.cf-view:hover { background: var(--primary); border-color: transparent; }
.cf-view:hover i { color: #fff !important; }
.cf-card .cf-remove { right: 14px; color: rgba(255, 255, 255, 0.94); cursor: pointer; }
.cf-card.is-center .cf-remove:hover { background: var(--primary); border-color: transparent; }
.cf-card.is-center .cf-remove:hover i { color: #fff !important; }
.cf-remove i { font-size: 12px !important; color: var(--gold-soft) !important; }
.cf-card.is-center .cf-view, .cf-card.is-center .cf-remove { opacity: 1; transform: translateY(0); }

/* Flechas de navegación ‹ › */
.cf-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
    width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(230, 199, 110, 0.42); background: rgba(255, 255, 255, 0.05); color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cf-nav i { font-size: 20px !important; color: inherit !important; line-height: 1; }
.cf-nav:hover { background: var(--secondary); color: #1b1120; border-color: transparent; transform: translateY(-50%) scale(1.09); box-shadow: 0 16px 40px rgba(230, 199, 110, 0.38); }
.cf-nav:active { transform: translateY(-50%) scale(.95); }
.cf-nav.prev { left: 0; }
.cf-nav.next { right: 0; }

#cf-count { letter-spacing: .08em; font-size: 13px; }

/* Botones inferiores (pantalla oscura) */
.cf-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.cf-action { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px;
    font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; transition: var(--transition);
    background: var(--primary); color: #fff; border: 1px solid transparent; }
.cf-action i { font-size: 14px !important; color: #fff !important; }
.cf-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cf-action.ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.cf-action.ghost:hover { background: rgba(255, 255, 255, 0.14); filter: none; }

/* ============ BOOK / LIGHTBOX ============ */
.book-btn {
    position: absolute; bottom: 12px; right: 12px; z-index: 2;
    background: rgba(22, 16, 28, 0.82); color: #fff; border: none; padding: 10px 18px; border-radius: 30px;
    font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: var(--transition);
}
.book-btn:hover { background: var(--primary); transform: translateY(-2px); }
.profile-gallery-main, .profile-gallery-side img { cursor: pointer; }
.lightbox { position: fixed; inset: 0; background: rgba(10, 8, 14, 0.95); z-index: 10060; display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); color: #fff; border: none; width: 52px; height: 52px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: var(--transition); }
.lb-nav:hover { background: var(--primary); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-close { position: absolute; top: 18px; right: 18px; background: rgba(255, 255, 255, 0.12); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 2; transition: var(--transition); }
.lb-close:hover { background: var(--primary); }
.lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0, 0, 0, 0.5); padding: 6px 14px; border-radius: 20px; }

/* ============ CHAT ============ */
.chat-thread { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; max-height: 58vh; overflow-y: auto; }
.chat-msg { max-width: 76%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.chat-msg.mine { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 5px; }
.chat-msg.theirs { align-self: flex-start; background: var(--gray-100); color: var(--ink); border-bottom-left-radius: 5px; }
.chat-meta { font-size: 11px; opacity: .75; margin-top: 5px; }
.chat-form { display: flex; gap: 10px; margin-top: 14px; }
.chat-form input { flex: 1; }

/* ============ FOOTER ============ */
.site-footer { background: var(--dark); color: var(--gray-300); padding: 40px 20px 24px; margin-top: 40px; }
.footer-content { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.site-footer a { color: var(--gray-400); text-decoration: none; display: block; padding: 4px 0; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.footer-bottom { max-width: var(--maxw); margin: 24px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; text-align: center; color: var(--gray-500); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .main-layout, .dash-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .dash-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
    .dash-nav a { margin-bottom: 0; }
    .profile-grid { grid-template-columns: minmax(0, 1fr); }
    .profile-gallery { grid-template-columns: 1fr; height: auto; }
    .profile-gallery-main { height: 300px; }
    .profile-gallery-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .profile-gallery-side img { height: 150px; }
    .footer-content { grid-template-columns: 1fr; gap: 20px; }
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .models-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .model-card-image { height: 210px; }
    .header-content { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    /* En móvil el buscador vive dentro de "Filtros" (no en el header). */
    .search-box { display: none !important; }
    .brand-logo { height: 34px; }
    .hero h1 { font-size: 30px; }
    .profile-name { font-size: 24px; }
    .swipe-deck { max-width: 320px; height: 480px; }
    .role-picker { grid-template-columns: 1fr; }
}

/* ============================================================= */
/* ============ Nuevas features Bliss (v17) ==================== */
/* ============================================================= */

/* ---- #3 Banda "Los mejores" (marquee con tiers) ---- */
.topband { max-width: 1280px; margin: 0 auto; padding: 26px 20px 4px; }
.topband-head { margin-bottom: 14px; }
.topband-head h2 { font-family: var(--font-display); font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.topband-head h2 i { color: var(--gold); font-size: 20px; }
.topband-head p { color: var(--gray-700); font-size: 13px; margin-top: 2px; }
.topband-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.topband-track { display: flex; gap: 16px; width: max-content; animation: tbscroll 48s linear infinite; }
.topband:hover .topband-track { animation-play-state: paused; }
@keyframes tbscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tb-card { flex: 0 0 auto; width: 168px; text-decoration: none; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 10px 26px rgba(0, 0, 0, .12); transition: transform .3s ease, box-shadow .3s ease; }
.tb-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .2); }
.tb-photo { position: relative; height: 216px; background-size: cover; background-position: center top; }
.tb-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 11px; background: linear-gradient(transparent, rgba(15, 10, 20, .9)); color: #fff; display: flex; flex-direction: column; }
.tb-info strong { font-family: var(--font-display); font-size: 15px; line-height: 1.1; }
.tb-info span { font-size: 11px; opacity: .85; }
.tb-info span i { font-size: 10px; }
.tb-badge { position: absolute; top: 9px; left: 9px; z-index: 2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; color: #2a1e05; display: inline-flex; align-items: center; gap: 4px; }
.tb-badge i { font-size: 9px; }
.tb-badge-oro { background: linear-gradient(135deg, #f3d774, #c9a24b); }
.tb-badge-plata { background: linear-gradient(135deg, #e8ecf2, #b9c2cf); }
.tb-badge-bronce { background: linear-gradient(135deg, #e3b184, #b9773f); color: #fff; }
.tb-rating { position: absolute; top: 9px; right: 9px; z-index: 2; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tb-rating i { color: var(--gold-soft); font-size: 10px; }
.tb-card.tb-oro { box-shadow: 0 10px 26px rgba(201, 162, 75, .28), 0 0 0 1px rgba(201, 162, 75, .45); }

/* ---- #1 Popup flotante "Nueva en Bliss" ---- */
.nm-toast { position: fixed; left: 20px; bottom: 20px; z-index: 900; width: 300px; max-width: calc(100vw - 40px); background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); border: 1px solid var(--line); overflow: hidden; transform: translateY(160%); opacity: 0; transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
.nm-toast.show { transform: translateY(0); opacity: 1; }
.nm-flag { display: block; background: linear-gradient(135deg, var(--primary), #b3164c); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 7px 14px; }
.nm-flag i { margin-right: 5px; }
.nm-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.nm-photo { width: 52px; height: 62px; border-radius: 10px; background-size: cover; background-position: center; flex: 0 0 auto; }
.nm-meta { display: flex; flex-direction: column; min-width: 0; }
.nm-name { font-family: var(--font-display); font-size: 16px; color: #1b1120; }
.nm-zone { font-size: 12px; color: var(--gray-700); }
.nm-go { margin-left: auto; color: var(--primary); }
.nm-close { position: absolute; top: 6px; right: 8px; z-index: 3; background: rgba(255, 255, 255, .28); border: none; color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.nm-close:hover { background: rgba(255, 255, 255, .5); }

/* ---- #6 Banner comercial de proveedores (inicio) ---- */
.providers-cta { max-width: 1280px; margin: 10px auto 40px; padding: 0 20px; }
.providers-cta-inner { background: radial-gradient(600px 300px at 15% 20%, rgba(233, 30, 99, .18), transparent 60%), linear-gradient(135deg, #1b1224, #241a30); border-radius: 24px; padding: 34px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; color: #fff; }
.pc-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-soft); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.pc-text h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; margin: 10px 0 8px; }
.pc-text p { color: rgba(255, 255, 255, .75); font-size: 15px; max-width: 420px; margin-bottom: 18px; }
.pc-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pc-chip { position: relative; height: 112px; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); transition: transform .3s ease; }
.pc-chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(15, 10, 20, .88)); }
.pc-chip:hover { transform: translateY(-4px); }
.pc-chip-name, .pc-chip-tag { position: relative; z-index: 1; color: #fff; }
.pc-chip-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.pc-chip-tag { font-size: 11px; opacity: .85; }

/* ---- #6 Página de proveedores ---- */
.providers-page { max-width: 1180px; margin: 0 auto; padding: 30px 20px 60px; }
.providers-hero { text-align: center; margin-bottom: 30px; }
.providers-hero h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; margin: 8px 0; }
.providers-hero p { color: var(--gray-700); max-width: 560px; margin: 0 auto; }
.providers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.provider-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .07); transition: transform .3s ease, box-shadow .3s ease; }
.provider-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .13); }
.provider-cover { position: relative; height: 170px; background-size: cover; background-position: center; }
.provider-specialty { position: absolute; left: 12px; bottom: 12px; background: rgba(15, 10, 20, .72); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.provider-body { padding: 16px; }
.provider-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.provider-avatar { width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; flex: 0 0 auto; border: 2px solid var(--gold-soft); }
.provider-head h3 { font-family: var(--font-display); font-size: 18px; }
.provider-bio { font-size: 13px; color: var(--gray-700); line-height: 1.6; margin-bottom: 12px; }
.provider-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.provider-portfolio span { height: 64px; border-radius: 8px; background-size: cover; background-position: center; }
.provider-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.provider-price { font-size: 13px; color: var(--gray-700); }
.provider-price strong { color: var(--primary); font-size: 15px; }
.provider-actions { display: flex; gap: 8px; }
.pv-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; text-decoration: none; transition: transform .2s ease; }
.pv-btn:hover { transform: translateY(-2px); }
.pv-wa { background: #25D366; }
.pv-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.pv-web { background: var(--secondary); }
.providers-join { text-align: center; margin-top: 40px; padding: 30px; background: #faf7f5; border-radius: 18px; border: 1px dashed var(--line); }
.providers-join h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 6px; }
.providers-join p { color: var(--gray-700); margin-bottom: 16px; }

/* ---- #5 Calendario de disponibilidad ---- */
.avail-cal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.avail-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.avail-title i { color: var(--secondary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head span { text-align: center; font-size: 11px; font-weight: 700; color: var(--gray-700); padding-bottom: 4px; }
.cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 8px; color: var(--gray-700); background: #f4f1f4; }
.cal-cell.empty { background: transparent; }
.cal-cell.past { opacity: .35; }
.cal-cell.avail { background: rgba(108, 92, 231, .16); color: var(--secondary); font-weight: 700; }
.cal-cell.today { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal-legend { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray-700); margin-top: 10px; }
.cal-dot { width: 12px; height: 12px; border-radius: 3px; background: rgba(108, 92, 231, .35); display: inline-block; }

/* ---- #2 Contenido exclusivo (books / sesiones) ---- */
.exclusive-card { background: linear-gradient(180deg, #fff, #fbf9ff); }
.excl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.excl-sub { white-space: nowrap; }
.excl-sub i { color: var(--gold-soft); }
.excl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.excl-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; background: #fff; }
.excl-item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .12); }
.excl-cover { position: relative; height: 190px; background-size: cover; background-position: center; }
.excl-cover::after { content: ""; position: absolute; inset: 0; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); background: rgba(20, 14, 26, .3); }
.excl-lock { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; opacity: .92; }
.excl-count { position: absolute; z-index: 2; bottom: 10px; right: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.excl-count i { font-size: 10px; margin-right: 3px; }
.excl-meta { padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.excl-meta strong { font-family: var(--font-display); font-size: 16px; }
.excl-price { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.excl-amount { font-size: 18px; font-weight: 800; color: var(--primary); }

/* ---- #4 Contacto directo del admin (registro modelo) ---- */
.model-direct { margin-top: 20px; }
.md-sep { display: flex; align-items: center; gap: 12px; color: var(--gray-700); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.md-sep::before, .md-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.md-lead { font-size: 13px; text-align: center; color: var(--gray-700); margin-bottom: 12px; }
.md-btns { display: flex; gap: 10px; }
.md-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; font-weight: 700; color: #fff; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.md-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.md-wa { background: #25D366; }
.md-tg { background: #2AABEE; }

@media (max-width: 760px) {
    .providers-cta-inner { grid-template-columns: 1fr; padding: 24px; }
    .pc-text h2 { font-size: 23px; }
    .topband-head h2 { font-size: 20px; }
    .tb-card { width: 142px; }
    .tb-photo { height: 186px; }
    .nm-toast { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .providers-hero h1 { font-size: 27px; }
}

/* ---- PWA: botón instalar ---- */
.pwa-install { position: fixed; right: 16px; bottom: 16px; z-index: 850; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(230, 199, 110, .5); background: #17101d; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.pwa-install:hover { transform: translateY(-2px); }
.pwa-install i { color: var(--gold-soft); }
.pwa-install[hidden] { display: none; }

/* ---- Responsive móvil: contener vistas que parten (perfil, books) ---- */
@media (max-width: 600px) {
    .review-scores { grid-template-columns: repeat(2, 1fr); }
    .excl-head { flex-direction: column; align-items: stretch; }
    .excl-sub { white-space: normal; width: 100%; justify-content: center; }
    .pwa-install { bottom: 80px; right: 12px; padding: 10px 15px; font-size: 13px; }
    /* Header: que los botones envuelvan y no desborden en pantallas chicas */
    /* Botones al nivel del logo: en una fila compacta, sin iconos, pantalla más limpia */
    .header-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
    .header-actions .btn { padding: 7px 11px; font-size: 12px; }
    .header-actions .btn i { display: none; }
    /* #6 Píldoras de categoría en una sola fila desplazable (no saturar) */
    .pill-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px 4px; }
    .pill-filters::-webkit-scrollbar { display: none; }
    .pill { flex: 0 0 auto; }
}

/* ---- #3 Estado de disponibilidad (perfil) ---- */
.avail-status { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.avail-status.on { background: rgba(0, 184, 148, .12); color: #0a8f6f; }
.avail-status.off { background: #efeaf0; color: #8a8090; }
.avs-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.avail-status.on .avs-dot { animation: avsPulse 1.8s infinite; }
@keyframes avsPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 184, 148, .5); } 70% { box-shadow: 0 0 0 7px rgba(0, 184, 148, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 184, 148, 0); } }
.avs-eta { font-weight: 600; color: #8a8090; font-size: 12.5px; margin-left: 4px; }

/* ---- #1 Editor de sesiones/packs (panel modelo) ---- */
.sessions-editor { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.session-row { display: flex; gap: 12px; align-items: flex-start; background: var(--gray-50, #f7f5f8); border: 1px solid var(--line, #eee); border-radius: 12px; padding: 12px; }
.session-thumb { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.session-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.session-mini { display: flex; gap: 8px; }
.session-new { background: #fbf9ff; border-style: dashed; margin-bottom: 18px; }

/* ---- #2 Aviso +18 (age-gate) ---- */
html.age-locked { overflow: hidden; }
.age-gate { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(700px 500px at 50% 15%, rgba(233, 30, 99, .22), transparent 60%), rgba(15, 10, 20, .92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ageIn .4s ease; }
@keyframes ageIn { from { opacity: 0; } to { opacity: 1; } }
.age-card { position: relative; max-width: 420px; width: 100%; background: linear-gradient(180deg, #fffdf9, #f6efe4); border-radius: 22px; padding: 34px 28px 26px; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); border: 1px solid rgba(230, 199, 110, .55); }
.age-logo { height: 46px; margin-bottom: 6px; }
.age-badge { position: absolute; top: 18px; right: 18px; background: linear-gradient(135deg, #f3d774, #c9a24b); color: #2a1e05; font-weight: 900; font-size: 13px; padding: 5px 11px; border-radius: 999px; letter-spacing: .03em; }
.age-card h2 { font-family: var(--font-display); font-size: 23px; margin: 8px 0 10px; }
.age-card p { color: #555; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.age-card p a { color: var(--primary); font-weight: 600; }
.age-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.age-leave { color: #8a8090; font-size: 13px; text-decoration: none; }
.age-leave:hover { color: var(--primary); }

/* ---- #4 Agenda por horas ---- */
.hour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.hour-grid.view { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.hour-chip { position: relative; cursor: pointer; display: block; }
.hour-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.hour-chip span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 184, 148, .10); color: #0a8f6f; font-weight: 700; font-size: 13px; transition: all .15s ease; }
.hour-chip input:checked + span { background: rgba(255, 45, 85, .14); color: #d11149; border-color: rgba(255, 45, 85, .4); text-decoration: line-through; }
.hour-slot { text-align: center; padding: 8px 4px; border-radius: 9px; font-weight: 700; font-size: 12.5px; border: 1px solid var(--line); }
.hour-slot.free { background: rgba(0, 184, 148, .10); color: #0a8f6f; }
.hour-slot.busy { background: rgba(255, 45, 85, .12); color: #d11149; text-decoration: line-through; }
.hour-legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.hour-legend.free { background: rgba(0, 184, 148, .4); }
.hour-legend.busy { background: rgba(255, 45, 85, .45); }
.agenda-datebar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.agenda-datebar input[type=date] { max-width: 190px; }
.agenda-daylabel { margin-left: auto; color: var(--gray-600, #777); font-weight: 600; }
.agenda-foot { display: flex; gap: 14px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.agenda-view { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.agenda-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.agenda-nav-btns { display: inline-flex; align-items: center; gap: 8px; }
.agn-arrow { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #efeaf0; color: var(--gray-700, #555); text-decoration: none; font-size: 18px; line-height: 1; }
.agn-arrow:hover { background: var(--primary); color: #fff; }
.agn-day { font-weight: 700; font-size: 13px; min-width: 84px; text-align: center; }

/* ---- #7 Campanita de avisos (admin) ---- */
.bell-menu { position: relative; }
.bell-trigger { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--gray-700, #555); cursor: pointer; font-size: 17px; }
.bell-trigger:hover { color: var(--primary); border-color: var(--primary); }
.bell-count { position: absolute; top: -4px; right: -4px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.bell-dropdown { position: absolute; right: 0; top: 48px; width: 288px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); overflow: hidden; z-index: 200; }
.bell-head { padding: 12px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-600, #777); border-bottom: 1px solid var(--line); }
.bell-dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; text-decoration: none; color: #333; font-size: 14px; font-weight: 600; border-bottom: 1px solid #f0f0f0; }
.bell-dropdown a:hover { background: #f8f8f8; }
.bell-badge { background: #efeaf0; color: var(--gray-700, #555); font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.bell-empty { padding: 16px; text-align: center; color: var(--gray-500, #999); font-size: 13px; }

/* ---- #7 Moderación de reseñas (admin) ---- */
.review-mod { display: flex; flex-direction: column; gap: 12px; }
.rm-body { display: flex; gap: 14px; }
.rm-photo { width: 90px; height: 112px; border-radius: 10px; background-size: cover; background-position: center; flex: 0 0 auto; border: 1px solid var(--line); }
.rm-info { flex: 1; min-width: 0; }
.rm-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.rm-stars { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rm-comment { font-size: 14px; color: var(--gray-700, #555); }
.rm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.rm-actions form { display: inline; margin: 0; }

/* Foto de reseña en el perfil público */
.review-photo { display: block; width: 120px; height: 90px; border-radius: 10px; background-size: cover; background-position: center; margin-top: 10px; border: 1px solid var(--line); }

/* ---- #1 Menú de compartir perfil ---- */
.share-wrap { position: relative; }
.share-menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .16); overflow: hidden; z-index: 40; }
.share-menu a, .share-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; font-weight: 600; color: #333; text-decoration: none; cursor: pointer; }
.share-menu a:last-child, .share-menu button:last-child { border-bottom: 0; }
.share-menu a:hover, .share-menu button:hover { background: #f8f8f8; }

/* ---- #2 Bloqueo por PIN (app instalada) ---- */
.pin-lock { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(700px 500px at 50% 12%, rgba(233, 30, 99, .16), transparent 60%), #16101c; }
.pin-lock[hidden] { display: none !important; }  /* respetar el atributo hidden: solo se muestra vía JS en app instalada */
.pin-card { width: 100%; max-width: 340px; background: linear-gradient(180deg, #201826, #171019); border: 1px solid rgba(230, 199, 110, .28); border-radius: 22px; padding: 28px 24px 24px; text-align: center; color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.pin-card.shake { animation: pinShake .5s; }
@keyframes pinShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.pin-logo { height: 40px; margin-bottom: 12px; filter: brightness(0) invert(1); opacity: .9; }
.pin-card h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 4px; }
.pin-sub { color: rgba(255, 255, 255, .65); font-size: 13px; margin-bottom: 18px; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); transition: all .15s; }
.pin-dots span.on { background: var(--gold-soft); border-color: var(--gold-soft); }
.pin-err { color: #ff6b81; font-size: 13px; margin-bottom: 10px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.pin-pad button { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; font-size: 22px; font-weight: 600; cursor: pointer; transition: background .12s; }
.pin-pad button:hover { background: rgba(255, 255, 255, .14); }
.pin-pad button:active { background: var(--primary); }
.pin-pad .pin-k-alt { font-size: 18px; background: transparent; border-color: transparent; color: rgba(255, 255, 255, .6); }
.pin-recover { margin-top: 18px; }
.pin-recover .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.pin-sep { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .5); font-size: 12px; margin-bottom: 12px; }
.pin-sep::before, .pin-sep::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
.pin-recover .form-control { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; text-align: center; }
.pin-recover .form-control::placeholder { color: rgba(255, 255, 255, .4); }
.pin-back { margin-top: 12px; background: none; border: 0; color: rgba(255, 255, 255, .6); font-size: 13px; cursor: pointer; }

/* ---- Reserva guiada (día → hora → datos) ---- */
.bk-steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.bk-steps span { font-size: 11px; font-weight: 700; color: var(--gray-500, #999); padding: 5px 10px; border-radius: 999px; background: #f0edf1; }
.bk-steps span.on { background: var(--secondary); color: #fff; }
.bk-calnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-month { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: capitalize; }
.bk-day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px; background: #f4f1f4; color: var(--gray-700, #555); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
.bk-day.is-empty { background: transparent; border: 0; cursor: default; }
.bk-day.off { opacity: .32; cursor: not-allowed; }
.bk-day.avail { background: rgba(0, 184, 148, .14); color: #0a8f6f; }
.bk-day.avail:hover { background: var(--secondary); color: #fff; }
.bk-sel { font-weight: 600; margin-bottom: 12px; text-transform: capitalize; }
.bk-hour { padding: 12px 6px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 184, 148, .10); color: #0a8f6f; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .12s, color .12s; }
.bk-hour:hover { background: var(--secondary); color: #fff; border-color: transparent; }
.bk-summary { display: flex; align-items: center; gap: 8px; background: rgba(108, 92, 231, .1); color: var(--secondary); font-weight: 700; padding: 10px 14px; border-radius: 12px; margin-bottom: 16px; text-transform: capitalize; }
.bk-summary i { color: var(--secondary); }

/* ---- Modo de servicio: presencial / solo contenido ---- */
.landing-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.lmode { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: var(--transition); }
.lmode:hover { background: rgba(0, 184, 148, .92); border-color: transparent; transform: translateY(-2px); }
.lmode.lmode-alt:hover { background: var(--secondary); }
.mode-pills { margin-bottom: 10px; }
.pill.mp i { font-size: 11px; margin-right: 3px; }
.tile-mode { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; width: fit-content; }
.tile-mode.is-presencial { background: rgba(0, 184, 148, .92); color: #fff; }
.tile-mode.is-contenido { background: rgba(108, 92, 231, .92); color: #fff; }
.tile-mode i { font-size: 9px; }
.mode-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.mode-chip.contenido { background: rgba(108, 92, 231, .12); color: var(--secondary); }

/* ---- Login enfocado (sin header, compacto) ---- */
body.auth-focus .auth-hero { min-height: 100vh; padding: 18px 16px; }
body.auth-focus .auth-card { padding: 26px 24px; }
body.auth-focus .auth-brand { margin-bottom: 12px; }
body.auth-focus .auth-sub { margin-bottom: 16px; }
body.auth-focus .form-group { margin-bottom: 12px; }

/* ============ Registro por pasos (wizard) ============ */
.auth-card.wizard { max-width: 480px; }
.wz-progress { margin: 4px 0 18px; }
.wz-bar { height: 6px; border-radius: 999px; background: var(--gray-100, #eee); overflow: hidden; }
.wz-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--gold, #c9a24a)); transition: width .35s cubic-bezier(.4,0,.2,1); }
.wz-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 13px; font-weight: 700; }
.wz-meta .muted { font-weight: 500; font-size: 12px; }
.wz-step { animation: wzIn .3s ease; }
.wz-step h1 { font-size: 22px; margin-bottom: 4px; }
@keyframes wzIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.wz-nav { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.wz-nav .btn-ghost { flex: 0 0 auto; }
.wz-nav .btn-block { flex: 1; }

/* Tarjetas de modalidad en el registro */
.mode-cards { display: grid; gap: 10px; }
.mode-opt { display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid var(--line, #e5e5e5); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: all .18s ease; }
.mode-opt i { font-size: 20px; color: var(--gray-400); width: 24px; text-align: center; }
.mode-opt strong { display: block; font-size: 15px; }
.mode-opt small { color: var(--gray-500); font-size: 12px; }
.mode-opt:hover { border-color: var(--primary); }
.mode-opt.selected { border-color: var(--primary); background: rgba(233, 30, 99, 0.05); }
.mode-opt.selected i { color: var(--primary); }

/* ============ Avance del perfil (modelo) ============ */
.profile-progress .pp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.profile-progress .pp-title h3 { margin: 0 0 2px; font-size: 17px; }
.profile-progress .pp-title p { margin: 0; font-size: 13px; }
.pp-pct { font-size: 30px; font-weight: 900; line-height: 1; color: var(--primary); font-family: var(--font-display, inherit); }
.pp-pct small { font-size: 15px; font-weight: 700; }
.pp-pct.is-full { color: var(--success, #16a34a); }
.pp-bar { height: 10px; border-radius: 999px; background: var(--gray-100, #eee); overflow: hidden; margin: 12px 0 14px; }
.pp-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--gold, #c9a24a)); transition: width .4s cubic-bezier(.4,0,.2,1); }
.pp-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.pp-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pp-list li i { font-size: 14px; }
.pp-list li.done { color: var(--gray-500); }
.pp-list li.done i { color: var(--success, #16a34a); }
.pp-list li.todo { font-weight: 600; }
.pp-list li.todo i { color: var(--gray-300, #ccc); }
.pp-cta { margin-top: 14px; }

/* Tarjeta de modalidad en el panel */
.mode-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ============ Planes: chip de modalidad + estado ============ */
.plan-mode-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; background: rgba(233, 30, 99, 0.1); color: var(--primary); }
.plan-mode-chip.alt { background: rgba(108, 92, 231, .12); color: var(--secondary); }
.plan-status { display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; padding: 11px; border-radius: 12px; font-weight: 700; background: rgba(22, 163, 74, .1); color: var(--success, #16a34a); }

/* ============ Editor de books (precio por book) ============ */
.books-editor { display: grid; gap: 12px; }
.book-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line, #e5e5e5); border-radius: 14px; padding: 12px; background: var(--gray-50, #fafafa); }
.book-row.book-new { border-style: dashed; }
.book-thumb { width: 66px; height: 84px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.book-fields { flex: 1; display: grid; gap: 8px; min-width: 0; }
.book-mini { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.book-mini .form-control { max-width: 120px; }
.book-free { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.book-price { display: flex; align-items: center; gap: 4px; }
.book-price > span { font-weight: 700; color: var(--gray-500); }
.book-price .form-control { max-width: 100px; }
.book-price.is-free { opacity: .45; }
.excl-free { color: var(--success, #16a34a) !important; }

/* ============ Calendario de agenda ============ */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { margin: 0; font-size: 18px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 6px; }
.cal-dow-cell { text-align: center; font-size: 12px; font-weight: 800; color: var(--gray-400); letter-spacing: .04em; }
.cal-cell { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line, #e8e8e8); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--ink, #222); background: var(--surface, #fff); transition: all .15s ease; min-height: 44px; }
.cal-cell:hover { border-color: var(--primary); transform: translateY(-1px); }
.cal-cell.cal-empty { border: 0; background: transparent; pointer-events: none; }
.cal-num { font-size: 14px; font-weight: 700; }
.cal-cell.is-today { border-color: var(--primary); }
.cal-cell.is-today .cal-num { color: var(--primary); }
.cal-cell.is-sel { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12)); }
.cal-cell.is-sel .cal-num { color: #fff; }
.cal-cell.has-cita:not(.is-sel) { background: rgba(233, 30, 99, 0.06); }
.cal-dots { display: flex; gap: 3px; align-items: center; margin-top: 3px; min-height: 14px; }
.cal-dot.cita { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.cal-cell.is-sel .cal-dot.cita { background: #fff; color: var(--primary); }
.cal-dot.busy { width: 7px; height: 7px; border-radius: 50%; background: var(--warning, #e0a800); display: inline-block; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12.5px; color: var(--gray-500); align-items: center; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-swatch.today { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--primary); display: inline-block; }
@media (max-width: 480px) {
    .cal-grid { gap: 4px; }
    .cal-cell { min-height: 38px; border-radius: 8px; }
    .cal-num { font-size: 12px; }
}

/* ============ Monitoreo de seguridad (compartir link) ============ */
.monitor-share { margin-top: 16px; border: 1px solid var(--line, #e5e5e5); border-radius: 14px; padding: 14px; background: var(--gray-50, #fafafa); }
.ms-head { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.ms-link { display: flex; gap: 8px; align-items: center; }
.ms-link input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line, #e5e5e5); border-radius: 10px; font-size: 13px; background: #fff; color: var(--ink, #222); }
.md-wa { background: #25D366 !important; color: #fff !important; display: inline-flex; align-items: center; gap: 8px; }

/* ============ Lista de monitores (panel modelo) ============ */
.mon-list { display: flex; flex-direction: column; gap: 8px; }
.mon-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line, #e5e5e5); border-radius: 12px; padding: 10px 12px; }
.mon-ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(233,30,99,.1); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* Avance de la cita (transcurrido/total) en el check-in */
.sess-prog { margin: 14px 0 4px; }
.sess-prog-head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--gray-500); margin-bottom: 6px; }
.sess-prog-bar { height: 10px; border-radius: 999px; background: var(--gray-100, #eee); overflow: hidden; }
.sess-prog-bar span { display: block; height: 100%; border-radius: 999px; width: 0; background: linear-gradient(90deg, var(--gold, #c9a24a), var(--primary)); transition: width .5s ease; }

/* ==================== Disponibilidad por zona (panel modelo) ==================== */
.nav-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a34a;margin-left:6px;vertical-align:middle;animation:navpulse 1.8s infinite}
@keyframes navpulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

.avail-status,.avail-mini{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:18px;border:1px solid var(--line)}
.avail-status.is-on,.avail-mini.is-on{background:linear-gradient(120deg,rgba(22,163,74,.14),rgba(22,163,74,.04));border-color:rgba(22,163,74,.4)}
.avail-status.is-off,.avail-mini.is-off{background:rgba(28,22,34,.03)}
.avail-status__main,.avail-mini__left{display:flex;align-items:center;gap:14px;min-width:0}
.avail-mini__right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.avail-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
.is-on .avail-dot{background:#16a34a;animation:navpulse 1.8s infinite}
.is-off .avail-dot{background:#9aa0aa}
.avail-title{font-size:16px;font-weight:800;color:var(--ink)}
.avail-sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
.avail-actions{display:flex;gap:8px;flex-wrap:wrap}

.zone-chips{display:flex;flex-wrap:wrap;gap:10px}
.zone-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
    background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;
    font-family:inherit;transition:.15s;min-width:120px}
.zone-chip:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 6px 16px rgba(233,30,99,.12)}
.zone-chip.is-active{border-color:#16a34a;background:rgba(22,163,74,.08)}
.zone-chip__name{font-weight:700;font-size:15px;color:var(--ink)}
.zone-chip__min{font-size:12px;color:var(--ink-soft)}
.chip-mini{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:var(--surface);
    border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-family:inherit;font-weight:700;
    font-size:13px;color:var(--ink);transition:.15s}
.chip-mini:hover{border-color:var(--primary);color:var(--primary)}
.chip-mini i{color:var(--primary)}

.zone-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.zone-row{display:flex;gap:10px;align-items:center}
.zone-row .inp{margin:0}
.zone-row__min{display:flex;align-items:center;gap:6px;flex:0 0 130px}
.zone-row__min .inp{width:80px;text-align:center}
.zone-row__min span{font-size:13px;color:var(--ink-soft)}
.zone-del{flex:0 0 auto;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
    background:var(--surface);color:#b91c1c;cursor:pointer;transition:.15s}
.zone-del:hover{background:#fef2f2;border-color:#fca5a5}
@media(max-width:520px){.zone-row{flex-wrap:wrap}.zone-row .inp[name="zone_name[]"]{flex:1 1 100%}}

.avail-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.avail-modal__backdrop{position:absolute;inset:0;background:rgba(20,15,25,.6);backdrop-filter:blur(3px)}
.avail-modal__box{position:relative;background:var(--surface);border-radius:20px;padding:26px;max-width:440px;width:100%;
    text-align:center;box-shadow:var(--shadow-xl);animation:availpop .22s ease}
@keyframes availpop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.avail-modal__ico{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
    background:rgba(233,30,99,.1);color:var(--primary);font-size:24px}
.avail-modal__box h3{font-size:20px;margin-bottom:4px}
.avail-modal__zones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0}
.tile-live{display:inline-flex;align-items:center;gap:6px;background:rgba(22,163,74,.94);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;margin-bottom:8px;width:fit-content;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tile-live .nav-live-dot{background:#fff}
.consent-box{border:1px dashed var(--line);border-radius:14px;padding:16px;margin-top:14px;background:rgba(233,30,99,.03)}
.consent-box__head{font-weight:800;font-size:15px;color:var(--ink);margin-bottom:2px}
.consent-script{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:10px;padding:14px 16px;font-size:15px;line-height:1.65;color:var(--ink)}
.consent-script em{color:var(--primary);font-style:normal;font-weight:700}
/* Gráfica de visitas (panel modelo) */
.visits-chart{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:8px}
.vc-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.vc-val{font-size:11px;font-weight:700;color:var(--ink-soft);height:16px;line-height:16px}
.vc-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.vc-bar{width:70%;max-width:34px;min-height:2px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--primary),var(--primary-dark));transition:height .5s ease}
.vc-col:hover .vc-bar{background:linear-gradient(180deg,var(--gold),var(--primary))}
.vc-lbl{font-size:10px;color:var(--ink-soft);margin-top:6px;white-space:nowrap;transform:rotate(-45deg);transform-origin:center;height:22px}
@media(max-width:600px){.vc-lbl{font-size:9px}.visits-chart{gap:3px}}
/* Pistas de "esto se edita en otra pestaña" (panel modelo) */
.perfil-hint{display:flex;gap:10px;align-items:flex-start;background:rgba(108,92,231,.06);border:1px solid rgba(108,92,231,.20);border-radius:12px;padding:12px 14px;margin:6px 0 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.perfil-hint i{color:var(--secondary);margin-top:3px;flex:0 0 auto}
.perfil-hint a{color:var(--primary);font-weight:700}
/* Redes sociales (pestaña) */
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}
.social-field label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--ink)}
.social-field label i{width:20px;text-align:center;font-size:16px}
@media(max-width:640px){.social-grid{grid-template-columns:1fr}}
/* Books (contenido) — pestaña Mis Books */
.book-create,.book-edit{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.book-create .inp[name="title"]{flex:1 1 220px;margin:0}
.book-edit{margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--line)}
.book-edit .inp[name="title"]{flex:1 1 200px;margin:0}
.book-price{display:flex;align-items:center;gap:5px}
.book-price .inp{width:110px;margin:0;text-align:right}
.book-price span{font-size:12px;color:var(--ink-soft)}
.book-item__head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.book-item__cover{width:64px;height:64px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:var(--paper-2)}
.book-item__cover img{width:100%;height:100%;object-fit:cover}
.book-item__info{flex:1 1 160px;min-width:0}
.book-item__title{font-weight:800;font-size:16px;color:var(--ink)}
.book-item__meta{display:flex;gap:10px;align-items:center;margin-top:4px;font-size:13px}
.book-badge{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px}
.book-badge.paid{background:rgba(201,162,75,.16);color:#8a6d1e}
.book-badge.free{background:rgba(0,184,148,.14);color:#0a7d63}
.book-item__actions{display:flex;gap:8px;flex-wrap:wrap}
.book-upload{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px;background:var(--paper);border-radius:10px}
.book-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:12px}
.book-photo{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden}
.book-photo img{width:100%;height:100%;object-fit:cover}
.book-photo button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(214,48,49,.92);color:#fff;cursor:pointer;font-size:12px;line-height:1}
/* Zonas — editor pulido (override) */
.zone-response{margin-bottom:18px}
.zone-response label{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--ink)}
.zone-response .inp{max-width:340px;margin:0}
.zone-row{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px;transition:.15s}
.zone-row:focus-within{border-color:var(--primary);box-shadow:0 4px 14px rgba(233,30,99,.08)}
.zone-row__pin{width:36px;height:36px;flex:0 0 auto;border-radius:9px;background:rgba(233,30,99,.10);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:15px}
.zone-row__name{flex:1 1 auto}
.zone-row__min{flex:0 0 auto}
.zone-del{width:38px;height:38px}
@media(max-width:520px){.zone-row__name{flex:1 1 60%}}
/* Zonas que cubre — perfil público */
.zone-tags{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
.zone-tag{display:inline-block;background:rgba(108,92,231,.10);color:var(--secondary);border:1px solid rgba(108,92,231,.22);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600}
/* Input base .inp (zonas, books, planes) — mismo look que .form-control */
.inp{padding:10px 12px;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;color:var(--gray-800);background:var(--white);transition:border-color .15s, box-shadow .15s}
.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(233,30,99,.1)}
.inp::placeholder{color:var(--gray-400)}
/* Avisos / notificaciones (panel modelo) */
.alerts-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.alerts-card__head{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:6px}
.alert-line{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:14px;transition:background .12s}
.alert-line:hover{background:rgba(233,30,99,.05)}
.alert-line span{flex:1 1 auto}
.alert-line__go{color:var(--ink-soft);font-size:11px}
/* Aviso "revisión pedida" en moderación admin */
.rm-flag{margin-top:8px;background:rgba(253,203,110,.16);border:1px solid rgba(253,203,110,.5);border-radius:9px;padding:8px 12px;font-size:13px;color:#8a6d1e}
.rm-flag i{color:#c9a24b;margin-right:4px}
/* Dejar reseña — estrellas interactivas */
.rate-main{text-align:center;margin-bottom:16px}
.rate-main__label{display:block;font-weight:700;font-size:13px;color:var(--ink-soft);margin-bottom:8px}
.rate-main__num{display:block;font-weight:800;color:var(--primary);margin-top:6px;font-size:15px}
.rate-stars{display:inline-flex;gap:4px;cursor:pointer}
.rate-stars i{color:var(--gray-300);transition:color .1s, transform .1s}
.rate-stars i.is-on{color:var(--gold)}
.rate-stars--big{gap:8px}
.rate-stars--big i{font-size:36px}
.rate-stars--big i:hover{transform:scale(1.18)}
.rate-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;background:var(--gray-50);border-radius:12px;padding:12px 14px}
.rate-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.rate-row__label{font-size:14px;color:var(--ink)}
.rate-row .rate-stars i{font-size:18px}
.rate-photo{display:flex;align-items:center;gap:8px;cursor:pointer;border:1px dashed var(--gray-300);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--ink-soft)}
.rate-photo:hover{border-color:var(--primary);color:var(--primary)}
.rate-photo i{color:var(--primary)}
/* Descubrir — aviso "te puede interesar" */
.discover-fallback{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px;background:rgba(201,162,75,.16);border:1px solid rgba(201,162,75,.4);color:#f4e2b8;border-radius:999px;padding:8px 16px;font-size:13px;max-width:520px}
.discover-fallback.subtle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}
.discover-fallback a{color:#fff;font-weight:800;text-decoration:underline}
/* ==== Ficha de datos de la modelo — compacta en celular (menos scroll) ==== */
@media(max-width:640px){
    .detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-bottom:16px;background:var(--gray-200,#e6e6e6);border:1px solid var(--gray-200,#e6e6e6);border-radius:12px;overflow:hidden}
    .detail-item{background:var(--gray-50);padding:9px 6px;border-radius:0}
    .detail-label{font-size:9px;letter-spacing:.3px;margin-bottom:2px;line-height:1.2}
    .detail-value{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
    .detail-value.is-long{font-size:12.5px}
}
/* ==== Campanita de avisos — en celular se salía de la pantalla ====
   Ojo: .main-header tiene backdrop-filter, así que ES el bloque contenedor de sus
   hijos position:fixed. Por eso el panel se ancla al header (top:100%) y no al
   viewport: así queda completo bajo la barra y nunca cortado a los lados. */
@media(max-width:640px){
    .bell-dropdown{position:fixed;top:calc(100% + 6px);left:8px;right:8px;bottom:auto;width:auto;max-height:min(70vh,480px);overflow-y:auto;border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.28);z-index:400}
    .bell-head{position:sticky;top:0;z-index:1;background:#fff;padding:13px 16px 11px;font-size:11.5px}
    .bell-dropdown a{padding:14px 16px;font-size:14.5px;align-items:flex-start}
    .bell-dropdown a>span:first-child{display:flex;align-items:flex-start;gap:9px;min-width:0;line-height:1.35}
    .bell-dropdown a>span:first-child i{margin-top:3px;flex:0 0 auto}
    .bell-badge{flex:0 0 auto}
    .bell-empty{padding:20px 18px;line-height:1.5}
}
/* ==== Modal "¿qué te gustaría ver?" (tras el aviso +18) ==== */
/* [hidden] por sí solo NO gana contra el display de abajo: hay que ser más específico */
.gg-overlay[hidden]{display:none}
.gg-overlay{position:fixed;inset:0;z-index:2950;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(16,10,20,.82);backdrop-filter:blur(6px);opacity:0;transition:opacity .28s ease}
.gg-overlay.show{opacity:1}
.gg-card{max-width:440px;width:100%;background:linear-gradient(180deg,#fffdf9,#f6efe4);border:1px solid rgba(230,199,110,.55);border-radius:22px;padding:30px 26px 24px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.gg-overlay.show .gg-card{transform:none}
.gg-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.24em;font-size:10.5px;font-weight:800;color:#a9853a}
.gg-card h2{font-family:var(--font-display);font-size:24px;margin:8px 0 8px}
.gg-sub{color:#5b5560;font-size:13.5px;line-height:1.6;margin-bottom:20px}
.gg-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.gg-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 10px;border-radius:15px;border:1px solid rgba(201,162,75,.4);background:#fff;color:var(--ink);text-decoration:none;font-weight:800;font-size:14.5px;transition:transform .14s,border-color .14s,box-shadow .14s}
.gg-opt i{font-size:24px;color:var(--primary)}
.gg-opt:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 10px 26px rgba(233,30,99,.16)}
.gg-skip{background:none;border:0;color:#8a8090;font-size:13px;font-weight:600;cursor:pointer;padding:6px 10px;font-family:inherit}
.gg-skip:hover{color:var(--primary)}
@media(max-width:420px){.gg-card{padding:26px 18px 20px}.gg-options{grid-template-columns:1fr 1fr;gap:8px}.gg-opt{padding:15px 8px;font-size:13.5px}.gg-opt i{font-size:21px}}
/* ==== Aviso de promoción vigente ==== */
.pp-overlay[hidden]{display:none}
.pp-overlay{position:fixed;inset:0;z-index:2900;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(16,10,20,.8);backdrop-filter:blur(5px);opacity:0;transition:opacity .28s ease}
.pp-overlay.show{opacity:1}
.pp-card{position:relative;max-width:430px;width:100%;background:linear-gradient(180deg,#241a2e,#160f1d);border:1px solid rgba(201,162,75,.45);border-radius:22px;padding:30px 26px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.22,1,.36,1);max-height:88vh;overflow-y:auto}
.pp-overlay.show .pp-card{transform:none}
.pp-close{position:absolute;top:12px;right:14px;background:none;border:0;color:rgba(255,255,255,.5);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.pp-close:hover{color:#fff}
.pp-eyebrow{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#f3d774,#c9a24b);color:#2a1e05;font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:5px 13px;border-radius:999px}
.pp-card h2{font-family:var(--font-display);font-size:24px;line-height:1.25;color:#fff;margin:14px 0 18px}
.pp-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;text-align:left}
.pp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:11px 14px}
.pp-row__name{flex:1 1 130px;min-width:0;color:#fff;font-weight:800;font-size:14.5px}
.pp-row__int{display:block;font-weight:600;font-size:11.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.pp-row__prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pp-old{color:rgba(255,255,255,.42);text-decoration:line-through;font-size:13.5px}
.pp-new{color:#f3d774;font-weight:900;font-size:19px}
.pp-off{background:var(--primary);color:#fff;font-weight:900;font-size:11px;border-radius:999px;padding:3px 8px}
.pp-until{color:rgba(255,255,255,.66);font-size:12.5px;line-height:1.5;margin:0 0 16px}
.pp-until i{color:#c9a24b;margin-right:5px}
.pp-later{background:none;border:0;color:rgba(255,255,255,.45);font-size:13px;font-weight:600;cursor:pointer;padding:10px;font-family:inherit;width:100%}
.pp-later:hover{color:#fff}
@media(max-width:420px){.pp-card{padding:26px 18px 18px}.pp-card h2{font-size:21px}.pp-new{font-size:17px}}
/* ==== Compra de books: precio, promoción y datos de transferencia ==== */
.excl-off{position:absolute;z-index:2;top:10px;left:10px;background:var(--primary);color:#fff;font-weight:900;font-size:11px;border-radius:999px;padding:3px 9px;letter-spacing:.02em}
.excl-was{color:var(--gray-500);text-decoration:line-through;font-weight:600;font-size:13px;margin-right:5px}
.pay-modal{max-width:430px;text-align:center}
.pay-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;font-weight:800;color:var(--gold);margin-bottom:6px}
.pay-title{font-family:var(--font-display);font-size:23px;line-height:1.25;margin:0 0 4px;overflow-wrap:anywhere}
.pay-sub{font-size:13.5px;margin-bottom:16px}
.pay-amount{background:var(--gray-50);border:1px solid var(--line);border-radius:14px;padding:16px 14px;margin-bottom:14px}
.pay-amount.is-free{background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.3)}
.pay-was{color:var(--gray-500);text-decoration:line-through;font-size:15px;margin-right:8px;font-weight:600}
.pay-now{font-family:var(--font-display);font-size:32px;font-weight:900;color:var(--primary);line-height:1}
.pay-per{font-size:14px;font-weight:700;color:var(--ink-soft);margin-left:3px}
.pay-promo{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:rgba(201,162,75,.16);color:#8a6d1e;border:1px solid rgba(201,162,75,.45);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;line-height:1.35;text-align:left}
.pay-promo i{color:#c9a24b;flex:0 0 auto}
.pay-upsell{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(108,92,231,.07);border:1px dashed rgba(108,92,231,.4);border-radius:12px;padding:11px 13px;font-size:13.5px;color:var(--ink);cursor:pointer;font-family:inherit;margin-bottom:14px;line-height:1.4}
.pay-upsell:hover{background:rgba(108,92,231,.12);border-style:solid}
.pay-upsell>i:first-child{color:var(--secondary);flex:0 0 auto}
.pay-upsell span{flex:1 1 auto;min-width:0}
.pay-upsell__go{color:var(--ink-soft);font-size:12px}
.pay-bank{background:var(--gray-50);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:14px;text-align:left}
.pay-bank__head{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:9px}
.pay-bank__head i{color:var(--secondary);margin-right:5px}
.pay-bank__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.pay-bank__row:first-of-type{border-top:0}
.pay-bank__row span{color:var(--ink-soft);flex:0 0 auto}
.pay-bank__row strong{margin-left:auto;text-align:right;overflow-wrap:anywhere;font-weight:800}
.pay-bank__clabe strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;font-size:14px}
.pay-bank__clabe .pay-copy{margin-left:auto}
.pay-copy{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--gray-300);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;font-family:inherit}
.pay-copy:hover{border-color:var(--primary);color:var(--primary)}
.pay-bank__note{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.pay-wa{background:#25D366;border-color:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px}
.pay-wa:hover{background:#1eb457;border-color:#1eb457;color:#fff}
.pay-legal{font-size:11.5px;color:var(--gray-500);line-height:1.5;margin:12px 0 0}
@media(max-width:480px){.pay-title{font-size:20px}.pay-now{font-size:27px}.pay-bank__row{font-size:13px}}
/* ==== Precio de promoción en la página de planes ==== */
.plan-price__was{display:block;font-size:16px;font-weight:600;color:var(--gray-500);text-decoration:line-through;margin-bottom:2px}
.plan-promo-tag{display:flex;align-items:flex-start;gap:7px;justify-content:center;text-align:center;background:rgba(201,162,75,.16);color:#8a6d1e;border:1px solid rgba(201,162,75,.45);border-radius:12px;padding:7px 11px;font-size:12.5px;font-weight:700;line-height:1.4;margin:-4px 0 14px}
.plan-promo-tag i{color:#c9a24b;margin-top:2px;flex:0 0 auto}
.plan-promo-tag em{font-style:normal;font-weight:600;opacity:.85;white-space:nowrap}

/* ==================== GUÍAS VISUALES (clientes / modelos) ==================== */
.guide{max-width:1040px;margin:0 auto;padding:0 20px 60px}
/* --- Cabecera --- */
.gd-hero{padding:26px 0 30px;text-align:center}
.gd-hero .back-link{display:inline-flex;margin-bottom:18px}
.gd-eyebrow{display:block;text-transform:uppercase;letter-spacing:.24em;font-size:11px;font-weight:800;color:var(--gold);margin-bottom:10px}
.gd-hero h1{font-family:var(--font-display);font-size:clamp(30px,5.2vw,46px);line-height:1.1;margin:0 0 12px}
.gd-lead{color:var(--ink-soft);font-size:16.5px;line-height:1.6;max-width:620px;margin:0 auto 22px}
.gd-switch{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.gd-switch a{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;color:var(--ink-soft);transition:.15s}
.gd-switch a:hover{color:var(--primary)}
.gd-switch a.on{background:var(--primary);color:#fff}
/* --- Títulos de sección --- */
.gd-sec,.gd-eco{margin-top:52px}
.gd-h2{display:flex;align-items:baseline;gap:12px;font-family:var(--font-display);font-size:clamp(22px,3.4vw,30px);line-height:1.2;margin:0 0 6px}
.gd-num{font-size:13px;font-weight:900;color:var(--gold);letter-spacing:.1em;flex:0 0 auto}
.gd-sub{color:var(--ink-soft);font-size:15px;line-height:1.6;margin:0 0 22px}
/* --- Ecosistema: cliente <-> Bliss <-> modelo --- */
.eco{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:14px;align-items:center}
.eco-side{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 14px;text-align:center;position:relative}
.eco-side.is-you{border-color:var(--primary);box-shadow:0 0 0 3px rgba(233,30,99,.1)}
.eco-avatar{width:54px;height:54px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff}
.eco-client .eco-avatar{background:linear-gradient(135deg,#6c5ce7,#8b7cf0)}
.eco-model .eco-avatar{background:linear-gradient(135deg,#e91e63,#f0629a)}
.eco-side strong{display:block;font-family:var(--font-display);font-size:19px}
.eco-side>span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.eco-you{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:3px 11px;border-radius:999px;margin:0}
.eco-arrows{color:var(--gold);opacity:.8;height:34px;margin-bottom:6px}
.eco-arrows svg{width:100%;height:100%;display:block}
.eco-shield{background:linear-gradient(180deg,#241a2e,#160f1d);border:1px solid rgba(201,162,75,.4);border-radius:18px;padding:16px 18px;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.eco-shield__top{display:flex;align-items:center;justify-content:center;gap:8px;color:#f3d774;font-weight:800;font-size:14px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid rgba(255,255,255,.12)}
.eco-shield ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.eco-shield li{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.4}
.eco-shield li i{color:var(--gold);margin-top:2px;flex:0 0 auto;width:15px;text-align:center}
/* --- Ruta paso a paso (línea de tiempo) --- */
.road{list-style:none;margin:0;padding:0;position:relative}
.road::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:linear-gradient(180deg,var(--gold),rgba(201,162,75,.25))}
.road-step{position:relative;display:flex;gap:16px;padding-bottom:22px}
.road-step:last-child{padding-bottom:0}
.road-dot{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--surface);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:17px;z-index:1}
.road-body{flex:1 1 auto;min-width:0;padding-top:3px}
.road-body h3{font-family:var(--font-display);font-size:19px;margin:0 0 5px}
.road-body p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0}
.road-ways{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.road-ways span{display:flex;align-items:flex-start;gap:9px;background:var(--gray-50);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.road-ways span i{color:var(--secondary);margin-top:3px;flex:0 0 auto;width:15px;text-align:center}
.road-tip{display:flex;align-items:flex-start;gap:8px;margin-top:10px;background:rgba(201,162,75,.13);border:1px solid rgba(201,162,75,.36);border-radius:11px;padding:9px 12px;font-size:13px;line-height:1.5;color:#7d6220}
.road-tip i{color:#c9a24b;margin-top:2px;flex:0 0 auto}
/* --- Los dos caminos --- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.path{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow-md)}
.path--content{border-top:4px solid var(--secondary)}
.path--live{border-top:4px solid var(--primary)}
.path-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.path-icon{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff}
.path--content .path-icon{background:linear-gradient(135deg,#6c5ce7,#8b7cf0)}
.path--live .path-icon{background:linear-gradient(135deg,#e91e63,#f0629a)}
.path-head h3{font-family:var(--font-display);font-size:20px;margin:0 0 3px;line-height:1.2}
.path-head p{color:var(--ink-soft);font-size:13.5px;margin:0;line-height:1.45}
.path-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.path-steps li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:flex-start}
.path-steps li:first-child{border-top:0;padding-top:0}
.path-steps li>span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--gray-50);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--ink-soft)}
.path--content .path-steps li>span{color:var(--secondary);border-color:rgba(108,92,231,.35);background:rgba(108,92,231,.08)}
.path--live .path-steps li>span{color:var(--primary);border-color:rgba(233,30,99,.32);background:rgba(233,30,99,.07)}
.path-steps li>div{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.55;color:var(--ink-soft);padding-top:2px}
.path-steps li em{font-style:normal;color:var(--ink)}
.path-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding-top:13px;border-top:1px dashed var(--line);font-size:13px;line-height:1.55;color:var(--ink-soft)}
.path-note i{color:var(--gold);margin-top:3px;flex:0 0 auto}
/* ==================== ADMIN: lista de perfiles + panel de acciones ==================== */
.prof-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:12px 6px;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;font-family:inherit;transition:background .12s}
.prof-row:first-of-type{border-top:0}
.prof-row:hover{background:var(--gray-50)}
.prof-avatar{width:48px;height:60px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.prof-id{flex:1 1 auto;min-width:0}
.prof-id>strong{display:block;font-size:15px;color:var(--ink);line-height:1.25}
.prof-mail{display:block;font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.prof-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.prof-chips>span{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ink-soft);background:var(--gray-50);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.prof-chips>span i{font-size:10px;color:var(--gray-400)}
.prof-chips>span.ok{color:#0a7a5f;background:rgba(0,184,148,.1);border-color:rgba(0,184,148,.35)}
.prof-chips>span.ok i{color:#0a7a5f}
.prof-chips>span.gold{color:#8a6d1e;background:rgba(201,162,75,.13);border-color:rgba(201,162,75,.42)}
.prof-chips>span.gold i{color:#c9a24b}
.prof-badge{flex:0 0 auto}
.prof-go{flex:0 0 auto;color:var(--gray-300);font-size:14px}
.prof-row:hover .prof-go{color:var(--primary)}
/* Panel de acciones */
.act-modal{max-width:460px;text-align:left}
.act-title{font-family:var(--font-display);font-size:22px;margin:0 0 3px;padding-right:34px;line-height:1.2}
.act-sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 16px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;overflow-wrap:anywhere}
.act-list{display:flex;flex-direction:column;gap:7px}
.act-list form{margin:0}
.act-btn{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface);cursor:pointer;font-family:inherit;text-decoration:none;color:var(--ink);transition:.13s}
.act-btn:hover{border-color:var(--primary);background:rgba(233,30,99,.04);color:var(--ink)}
.act-btn>i:first-child{flex:0 0 auto;width:18px;text-align:center;font-size:15px;color:var(--gray-400);margin-top:2px}
.act-btn:hover>i:first-child{color:var(--primary)}
.act-btn>span{flex:1 1 auto;min-width:0}
.act-btn strong{display:block;font-size:14px;line-height:1.3}
.act-btn em{display:block;font-style:normal;font-size:12px;color:var(--ink-soft);line-height:1.45;margin-top:2px}
.act-go{flex:0 0 auto;color:var(--gray-300);font-size:12px;margin-top:4px}
.act-btn.is-main{border-color:rgba(108,92,231,.4);background:rgba(108,92,231,.06)}
.act-btn.is-main>i:first-child{color:var(--secondary)}
.act-btn.is-main:hover{border-color:var(--secondary);background:rgba(108,92,231,.11)}
.act-btn.is-ok{border-color:rgba(0,184,148,.42);background:rgba(0,184,148,.07)}
.act-btn.is-ok>i:first-child{color:#0a7a5f}
.act-btn.is-ok:hover{border-color:#00b894;background:rgba(0,184,148,.13)}
.act-btn.is-warn{border-color:rgba(201,162,75,.45);background:rgba(201,162,75,.08)}
.act-btn.is-warn>i:first-child{color:#b8912f}
.act-btn.is-warn:hover{border-color:#c9a24b;background:rgba(201,162,75,.15)}
.act-btn.is-danger{border-color:rgba(214,48,49,.32)}
.act-btn.is-danger>i:first-child,.act-btn.is-danger strong{color:var(--danger)}
.act-btn.is-danger:hover{border-color:var(--danger);background:rgba(214,48,49,.06)}
/* Suscripciones: mismo renglón, con inicial en vez de foto */
.subs-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.subs-search{display:flex;gap:7px;margin-left:auto;flex:1 1 240px;max-width:340px}
.subs-search .form-control{height:34px;padding:6px 12px;font-size:13px}
.subs-row{padding:11px 6px}
.subs-ini{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:17px;font-weight:900;color:#fff}
.subs-ini.is-model{background:linear-gradient(135deg,#e91e63,#f0629a)}
.subs-ini.is-client{background:linear-gradient(135deg,#6c5ce7,#8b7cf0)}
.subs-state{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.subs-state em{font-style:normal;font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
.subs-resume{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.subs-resume>div{background:var(--gray-50);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center}
.subs-resume strong{display:block;font-size:14px;line-height:1.3}
.subs-resume span{display:block;font-size:11px;color:var(--ink-soft);margin-top:3px}
@media(max-width:640px){
    .prof-badge{display:none}
    .prof-avatar{width:42px;height:52px}
    .subs-search{margin-left:0;max-width:none}
    .subs-state em{display:none}
}

/* ==================== ADMIN: perfiles por decidir en el panel ==================== */
.pend-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.pend-row:first-of-type{border-top:0}
.pend-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pend-id{flex:1 1 220px;min-width:0}
.pend-id strong{font-size:15px;margin-right:8px}
.pend-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px;background:var(--gray-100,#f0f0f0);color:var(--ink-soft);border:1px solid var(--line);vertical-align:middle}
.pend-tag.is-ready{background:rgba(0,184,148,.12);color:#0a7a5f;border-color:rgba(0,184,148,.4)}
.pend-tag i{font-size:9.5px}
.pend-meta{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
.pend-acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.pend-del:hover{border-color:var(--danger);color:var(--danger)}
.pend-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* IPs bloqueadas */
.ipb-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.ipb-row:first-of-type{border-top:0}
.ipb-id{flex:1 1 240px;min-width:0}
.ipb-id strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}
@media(max-width:640px){
    .pend-acts{margin-left:0;width:100%}
    .pend-acts .btn{flex:1 1 auto;justify-content:center}
}

/* ==================== ADMIN: métricas ==================== */
.mt-range{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.mt-live{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-left:4px solid var(--success)}
.mt-live__now{display:flex;align-items:center;gap:11px}
.mt-live__now strong{display:block;font-family:var(--font-display);font-size:28px;line-height:1}
.mt-live__now span{font-size:13px;color:var(--ink-soft)}
.mt-dot{width:11px;height:11px;border-radius:50%;background:#00b894;flex:0 0 auto;box-shadow:0 0 0 0 rgba(0,184,148,.6);animation:mtPulse 2s infinite}
@keyframes mtPulse{70%{box-shadow:0 0 0 11px rgba(0,184,148,0)}100%{box-shadow:0 0 0 0 rgba(0,184,148,0)}}
.mt-live__split{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;font-size:13px;color:var(--ink-soft)}
.mt-live__split i{color:var(--gray-400);margin-right:5px}
.mt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin:16px 0}
.mt-kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;position:relative}
.mt-kpi>i{position:absolute;top:14px;right:14px;font-size:15px;color:var(--gray-300)}
.mt-kpi strong{display:block;font-family:var(--font-display);font-size:27px;line-height:1.05;margin-bottom:3px}
.mt-kpi span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.mt-kpi em{display:block;font-style:normal;font-size:11.5px;color:var(--gray-400);margin-top:5px}
.mt-h{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:17px;margin:0 0 3px}
.mt-sub{font-size:12.5px;margin:0 0 14px;line-height:1.5}
.mt-sub2{font-family:var(--font-display);font-size:14px;margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.mt-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:16px}
.mt-two>.card{margin-bottom:0}
/* Rankings: columnas de flujo. Con grid, una tarjeta corta al lado de una larga
   deja un hueco enorme; así cada una ocupa solo lo que necesita. */
.mt-masonry{column-count:2;column-gap:16px}
.mt-masonry>.card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;display:inline-block;width:100%;margin-bottom:16px}
/* Barras por hora */
.mt-hours{display:flex;align-items:flex-end;gap:3px;height:150px}
.mt-hour{flex:1 1 0;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.mt-hour__bar{width:100%;max-width:16px;min-height:2px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--gold-soft),var(--gold));margin-top:auto;transition:height .5s ease}
.mt-hour:hover .mt-hour__bar{background:linear-gradient(180deg,var(--primary),var(--primary-dark))}
.mt-hour span{font-size:9.5px;color:var(--gray-400);margin-top:5px;line-height:1}
/* Fuentes de tráfico */
.mt-src{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px}
.mt-src__name{flex:0 0 40%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.mt-src__name i{width:16px;text-align:center;color:var(--gray-400);margin-right:4px}
.mt-src__bar{flex:1 1 auto;height:9px;border-radius:999px;background:var(--gray-100,#f0f0f0);overflow:hidden}
.mt-src__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--secondary),#8b7cf0)}
.mt-src__bar.alt i{background:linear-gradient(90deg,var(--primary),#f0629a)}
.mt-src__num{flex:0 0 auto;font-weight:800;font-size:12.5px;min-width:38px;text-align:right}
/* Rankings */
.mt-row{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.mt-row:first-of-type{border-top:0}
.mt-row a{font-weight:700;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-row a:hover{color:var(--primary)}
.mt-row strong{margin-left:auto;white-space:nowrap;color:var(--primary)}
.mt-row small{font-weight:600;color:var(--ink-soft);font-size:11.5px}
/* Books: interés */
.mt-warn{margin-bottom:14px;font-size:12.5px}
.mt-intent{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mt-intent>div{background:var(--gray-50);border:1px solid var(--line);border-radius:12px;padding:11px 12px;text-align:center}
.mt-intent strong{display:block;font-family:var(--font-display);font-size:21px;line-height:1.1}
.mt-intent span{display:block;font-size:11px;color:var(--ink-soft);line-height:1.35;margin-top:4px}
.mt-foot{font-size:12px;line-height:1.6;margin:6px 0 0}
.mt-foot i{color:var(--gold);margin-right:5px}
@media(max-width:900px){
    /* minmax(0,1fr): si no, una tarjeta con contenido ancho estira la columna. */
    .mt-two{grid-template-columns:minmax(0,1fr)}
    .mt-masonry{column-count:1}
    .mt-live__split{margin-left:0;width:100%}
}
@media(max-width:700px){
    /* 30 barras no caben en un celular: se deslizan de lado en vez de partir la página. */
    .mt-daily{overflow-x:auto;overflow-y:hidden;gap:4px;padding-bottom:6px}
    .mt-daily .vc-col{flex:0 0 auto;min-width:26px}
    .mt-hour{min-width:0}
    /* El nombre arriba y el número abajo: así nada obliga a ensanchar la tarjeta. */
    .mt-row{flex-wrap:wrap;gap:2px}
    .mt-row a{flex:1 1 100%}
    .mt-row strong{margin-left:0;white-space:normal}
}
@media(max-width:600px){
    .mt-intent{grid-template-columns:1fr}
    .mt-hours{gap:2px;height:120px}
    .mt-src__name{flex-basis:46%}
}

/* ==================== ADMIN: expediente de revisión de una modelo ==================== */
.rev-head{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow-md)}
.rev-avatar{width:64px;height:80px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.rev-id{flex:1 1 auto;min-width:0}
.rev-id h1{font-family:var(--font-display);font-size:26px;line-height:1.15;margin:0 0 7px}
.rev-id p{margin:0 0 4px;font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rev-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;border:1px solid}
.rev-chip.is-ok{color:#0a7a5f;background:rgba(0,184,148,.11);border-color:rgba(0,184,148,.4)}
.rev-chip.is-warn{color:#8a6d1e;background:rgba(201,162,75,.14);border-color:rgba(201,162,75,.45)}
.rev-pct{flex:0 0 auto;font-family:var(--font-display);font-size:30px;font-weight:900;color:var(--gray-400);line-height:1}
.rev-pct small{font-size:15px}
.rev-pct.is-full{color:var(--success)}
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.rev-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.rev-h{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:17px;margin:0 0 4px}
.rev-count{margin-left:auto;font-family:var(--font-body);font-size:12px;font-weight:800;color:var(--ink-soft);background:var(--gray-50);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.rev-sub{font-size:12.5px;margin:0 0 11px}
.rev-doc{display:block;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--gray-50)}
.rev-doc img{display:block;width:100%;max-height:300px;object-fit:contain;background:#111}
.rev-doc span{position:absolute;right:9px;bottom:9px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.65);padding:5px 10px;border-radius:999px}
.rev-video{width:100%;max-height:340px;border-radius:12px;background:#111;display:block}
.rev-check{display:flex;align-items:flex-start;gap:8px;margin:11px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.rev-check i{color:var(--gold);margin-top:2px;flex:0 0 auto}
.rev-empty{display:flex;align-items:center;gap:9px;background:rgba(214,48,49,.06);border:1px solid rgba(214,48,49,.3);border-radius:12px;padding:11px 13px;font-size:13px;color:#9c2426}
.rev-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px}
.rev-thumbs a{display:block;aspect-ratio:3/4;border-radius:9px;background-size:cover;background-position:center;border:1px solid var(--line)}
.rev-book{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;flex-wrap:wrap}
.rev-book:first-of-type{border-top:0}
.rev-book .muted{font-size:12px}
.rev-price{margin-left:auto;font-weight:800;color:var(--primary);white-space:nowrap}
.rev-group{margin:16px 0 8px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.rev-group:first-of-type{margin-top:12px}
.rev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rev-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45}
.rev-list li>i{margin-top:2px;flex:0 0 auto;width:15px;text-align:center}
.rev-list li.done>i{color:var(--success)}
.rev-list li.todo>i{color:var(--danger)}
.rev-list li.todo strong{color:var(--danger)}
.rev-list li em{display:block;font-style:normal;font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.5}
.rev-data{width:100%;border-collapse:collapse;font-size:13.5px}
.rev-data th,.rev-data td{text-align:left;padding:8px 0;border-top:1px solid var(--line);vertical-align:top}
.rev-data tr:first-child th,.rev-data tr:first-child td{border-top:0}
.rev-data th{width:44%;font-weight:600;color:var(--ink-soft)}
.rev-data td{font-weight:700;overflow-wrap:anywhere}
.rev-bio{font-size:13px;line-height:1.65;color:var(--ink-soft);margin:0}
.rev-decide{border-top:4px solid var(--primary)}
.rev-decide .btn{margin-bottom:8px}
.rev-note{font-size:12px;line-height:1.55;color:var(--ink-soft);margin:0 0 12px}
@media(max-width:900px){
    .rev-grid{grid-template-columns:1fr}
    .rev-head{flex-wrap:wrap}
    .rev-pct{order:-1;margin-left:auto}
}

/* Aviso cuando todavía no hay forma de cobrar configurada */
.plan-soon{display:flex;align-items:flex-start;gap:9px;background:rgba(201,162,75,.13);border:1px solid rgba(201,162,75,.42);border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.5;color:#7d6220;text-align:left}
.plan-soon i{color:#c9a24b;margin-top:2px;flex:0 0 auto}

/* --- Modal de depósito: los 3 pasos --- */
.depo-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:0;text-align:left}
.depo-steps li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.depo-steps li:first-child{border-top:0;padding-top:0}
.depo-steps li>span{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(233,30,99,.08);border:1px solid rgba(233,30,99,.32);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:900}
.depo-steps li>div{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);padding-top:2px}

/* ==================== PLANES: qué abre la mensualidad ==================== */
.sub-explain{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:26px;box-shadow:var(--shadow-md)}
.se-head{text-align:center;max-width:640px;margin:0 auto 20px}
.se-badge{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#f3d774,#c9a24b);color:#2a1e05;font-weight:900;font-size:10.5px;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:999px;margin-bottom:11px}
.se-badge i{font-size:11px}
.se-head h2{font-family:var(--font-display);font-size:clamp(20px,3vw,27px);line-height:1.2;margin:0 0 8px}
.se-head p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0}
.se-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.se-col{border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.se-col--in{background:rgba(0,184,148,.07);border-color:rgba(0,184,148,.34)}
.se-col--out{background:rgba(201,162,75,.09);border-color:rgba(201,162,75,.4)}
.se-col h3{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:17px;line-height:1.25;margin:0 0 11px}
.se-col h3 i{font-size:15px;flex:0 0 auto}
.se-col--in h3 i{color:#00a383}
.se-col--out h3 i{color:#b8912f}
.se-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.se-col li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.se-col li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%}
.se-col--in li::before{background:#00a383}
.se-col--out li::before{background:#c9a24b}
@media(max-width:760px){
    .sub-explain{padding:18px;border-radius:16px}
    .se-cols{grid-template-columns:1fr}
    .se-head{margin-bottom:16px}
}

/* --- Encuentro por cercanía: maqueta de mapa + pasos --- */
.meet{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.meet-map{position:relative;min-height:290px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#241a2e,#160f1d);border:1px solid rgba(201,162,75,.35);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.meet-map>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.meet-ring{position:absolute;left:50%;top:52%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed rgba(201,162,75,.5);background:radial-gradient(circle,rgba(201,162,75,.15),transparent 68%)}
.meet-ring::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:2px solid rgba(233,30,99,.55);animation:meetPulse 3s ease-out infinite}
@keyframes meetPulse{0%{transform:scale(.5);opacity:.85}100%{transform:scale(1.12);opacity:0}}
.meet-pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:2}
.meet-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.meet-pin--me{z-index:3}
.meet-pin--me .meet-dot{width:46px;height:46px;font-size:18px;border:2px solid rgba(255,255,255,.85)}
.meet-pin.is-client .meet-dot{background:linear-gradient(135deg,#6c5ce7,#8b7cf0)}
.meet-pin.is-model .meet-dot{background:linear-gradient(135deg,#e91e63,#f0629a)}
.meet-pin.is-off{opacity:.4;filter:grayscale(1)}
.meet-tag{font-size:10.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
.meet-tag--me{background:var(--primary);border-color:rgba(255,255,255,.35)}
.meet-live{position:absolute;top:12px;right:12px;z-index:4;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);padding:5px 11px;border-radius:999px}
.meet-live i{font-size:7px;color:#2ecc71}
.meet-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:18px;padding:20px;box-shadow:var(--shadow-md)}
.meet-card .path-steps li>span{color:#9a7719;border-color:rgba(201,162,75,.45);background:rgba(201,162,75,.13)}
/* Cualquiera de los dos escribe primero */
.meet-both{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-align:center}
.meet-both__row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.meet-both__side{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--gray-50)}
.meet-both__side.is-client{color:var(--secondary);border-color:rgba(108,92,231,.35);background:rgba(108,92,231,.08)}
.meet-both__side.is-model{color:var(--primary);border-color:rgba(233,30,99,.32);background:rgba(233,30,99,.07)}
.meet-both__arrows{color:var(--gold);font-size:17px}
.meet-both p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.6;max-width:600px;margin-inline:auto}
.meet-both strong{color:var(--ink)}
/* --- Tarjetas de seguridad --- */
.safe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.gd-perks .safe-card>i{background:rgba(108,92,231,.1);color:var(--secondary)}
.safe-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.safe-card>i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:rgba(233,30,99,.09);color:var(--primary);font-size:17px;margin-bottom:11px}
.safe-card h4{font-family:var(--font-display);font-size:17px;margin:0 0 6px}
.safe-card p{color:var(--ink-soft);font-size:13.5px;line-height:1.6;margin:0}
/* --- Línea de tiempo del monitoreo --- */
.watch{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.watch-step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;position:relative}
.watch-step--alert{border-color:rgba(233,30,99,.45);background:rgba(233,30,99,.04)}
.watch-time{display:inline-block;background:var(--ink);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.watch-step--alert .watch-time{background:var(--primary)}
.watch-body h4{font-family:var(--font-display);font-size:16px;margin:0 0 5px;display:flex;align-items:center;gap:7px}
.watch-body h4 i{color:var(--gold);font-size:14px}
.watch-step--alert .watch-body h4 i{color:var(--primary)}
.watch-body p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;margin:0}
/* --- Cierre --- */
.gd-cta{margin-top:52px;text-align:center;background:linear-gradient(180deg,#241a2e,#160f1d);border:1px solid rgba(201,162,75,.35);border-radius:22px;padding:34px 24px 26px}
.gd-cta h2{font-family:var(--font-display);font-size:clamp(23px,3.6vw,30px);color:#fff;margin:0 0 8px}
.gd-cta>p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;max-width:520px;margin:0 auto 20px}
.gd-cta__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gd-cta__btns .btn-outline{color:#fff;border-color:rgba(255,255,255,.5)}
.gd-cta__btns .btn-outline:hover{border-color:#fff;color:#fff}
.gd-cta__foot{margin:20px 0 0;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.6}
.gd-cta__foot a{color:rgba(255,255,255,.8);text-decoration:underline}
/* --- Responsive --- */
@media(max-width:900px){
    .eco{grid-template-columns:1fr;gap:10px}
    .eco-side{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px}
    .eco-avatar{margin:0;width:44px;height:44px;font-size:18px;flex:0 0 auto}
    .eco-you{position:static;transform:none;margin-left:auto}
    .eco-arrows{display:none}
    .eco-mid{display:flex;flex-direction:column;gap:0}
    .watch{grid-template-columns:1fr 1fr}
    .paths{grid-template-columns:1fr}
    .meet{grid-template-columns:1fr}
}
@media(max-width:640px){
    .meet-map{min-height:250px}
    .meet-dot{width:28px;height:28px;font-size:11px}
    .meet-pin--me .meet-dot{width:40px;height:40px;font-size:15px}
    .meet-tag{font-size:9.5px;padding:2px 7px}
    .meet-card{padding:16px}
    .meet-both__row{gap:8px}
    .meet-both__side{font-size:12.5px;padding:7px 12px}
    .guide{padding:0 15px 46px}
    .gd-sec,.gd-eco{margin-top:40px}
    .gd-switch{display:flex;width:100%}
    .gd-switch a{flex:1 1 0;justify-content:center;padding:10px 8px;font-size:13px}
    .road::before{left:17px}
    .road-dot{width:36px;height:36px;font-size:14px}
    .road-step{gap:12px}
    .road-body h3{font-size:17px}
    .watch{grid-template-columns:1fr}
    .path{padding:16px}
    .safe-grid{grid-template-columns:1fr}
}

/* --- Footer: accesos destacados a las guías --- */
.footer-content{grid-template-columns:1.6fr 1.3fr 1fr 1fr}
.foot-guide{display:flex!important;align-items:center;gap:11px;padding:10px 12px!important;margin-bottom:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;transition:background .15s,border-color .15s}
.foot-guide:hover{background:rgba(255,255,255,.1);border-color:rgba(201,162,75,.5)}
.fg-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:linear-gradient(135deg,#6c5ce7,#8b7cf0)}
.fg-ico--model{background:linear-gradient(135deg,#e91e63,#f0629a)}
.foot-guide>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.foot-guide strong{color:#fff;font-size:14px;font-weight:700}
.foot-guide em{font-style:normal;font-size:12px;color:var(--gray-500)}
@media(max-width:900px){.footer-content{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-content{grid-template-columns:1fr}}

.path-note>span,.road-tip>span,.road-ways span>span{flex:1 1 auto;min-width:0}

/* ==================== Contador de visitas (footer de la portada) ==================== */
.visit-counter{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 15px;margin-bottom:12px;font-size:13px;color:var(--gray-400)}
.visit-counter i{color:var(--gold)}
.visit-counter strong{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
/* ==================== Compromiso antifraude (guías) ==================== */
.pledge{display:flex;gap:18px;background:linear-gradient(180deg,#241a2e,#160f1d);border:1px solid rgba(201,162,75,.4);border-radius:20px;padding:24px 26px}
.pledge-badge{flex:0 0 auto;width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#f3d774,#c9a24b);color:#2a1e05;display:flex;align-items:center;justify-content:center;font-size:23px}
.pledge-body{flex:1 1 auto;min-width:0}
.pledge-eyebrow{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;font-weight:800;color:#c9a24b;margin-bottom:5px}
.pledge-body h3{font-family:var(--font-display);font-size:23px;color:#fff;margin:0 0 12px;line-height:1.2}
.pledge-body p{color:rgba(255,255,255,.76);font-size:14.5px;line-height:1.65;margin:0 0 11px}
.pledge-body strong{color:#fff}
.pledge-list-intro{margin-bottom:7px!important}
.pledge-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.pledge-list li{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.76);font-size:14px;line-height:1.5}
.pledge-list li i{color:var(--primary);margin-top:4px;font-size:12px;flex:0 0 auto}
.pledge-foot{margin-top:14px!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px!important}
.pledge-foot i{color:var(--primary);margin-right:5px}
@media(max-width:640px){.pledge{flex-direction:column;gap:14px;padding:20px 18px}.pledge-body h3{font-size:20px}}
/* ==================== Chat directo ==================== */
.thread-list{display:flex;flex-direction:column;gap:9px}
.thread-row{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 15px;text-decoration:none;transition:.15s}
.thread-row:hover{border-color:var(--primary);box-shadow:0 6px 16px rgba(233,30,99,.1)}
.thread-row.is-unread{border-color:rgba(233,30,99,.45);background:rgba(233,30,99,.04)}
.thread-avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--gray-50);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:16px}
.thread-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.35}
.thread-body strong{color:var(--ink);font-size:15px}
.thread-body em{font-style:normal;font-size:12.5px;color:var(--ink-soft)}
.thread-badge{flex:0 0 auto;background:var(--primary);color:#fff;font-size:11px;font-weight:900;min-width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.thread-go{color:var(--ink-soft);font-size:12px;flex:0 0 auto}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.chat-warn{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding-top:13px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.chat-warn i{color:var(--gold);margin-top:3px;flex:0 0 auto}
.chat-warn a{color:var(--primary);font-weight:700}
.chat-warn>span{flex:1 1 auto;min-width:0}
.nav-count{background:var(--primary);color:#fff;font-size:10.5px;font-weight:900;min-width:19px;height:19px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;margin-left:6px}
/* ==================== Modal de eliminar perfil (admin) ==================== */
.del-list{list-style:none;margin:0 0 14px;padding:12px 14px;background:rgba(233,30,99,.05);border:1px solid rgba(233,30,99,.2);border-radius:11px;display:flex;flex-direction:column;gap:7px}
.del-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.del-list li i{color:var(--danger);margin-top:3px;font-size:11px;flex:0 0 auto}

/* ==== Campo de contraseña con botón para mostrarla ==== */
.pw-field{position:relative;display:flex;align-items:center}
.pw-field .form-control{padding-right:46px;margin:0;width:100%}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:var(--gray-500);font-size:15px;cursor:pointer;transition:color .15s,background .15s}
.pw-toggle:hover{color:var(--primary);background:rgba(233,30,99,.08)}
.pw-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.pw-toggle[aria-pressed="true"]{color:var(--primary)}

/* ==== Modal legal del registro (hay que leerlo hasta el final) ==== */
.legal-link{background:none;border:0;padding:0;color:var(--primary);font-weight:700;font-family:inherit;font-size:inherit;text-decoration:underline;cursor:pointer}
.legal-link:hover{color:var(--ink)}
.legal-hint{font-size:12px;color:var(--ink-soft);margin:2px 0 8px;line-height:1.5}
.legal-hint i{color:var(--gold);margin-right:4px}
.legal-modal[hidden]{display:none}
.legal-modal{position:fixed;inset:0;z-index:3100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(16,10,20,.8);backdrop-filter:blur(5px)}
.legal-card{display:flex;flex-direction:column;width:100%;max-width:640px;max-height:86vh;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.legal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.legal-head h3{font-family:var(--font-display);font-size:19px;margin:0}
.legal-head .modal-close{position:static;flex:0 0 auto}
/* max-height a propósito: obliga a que SIEMPRE haya que bajar para leer. */
.legal-body{flex:1 1 auto;overflow-y:auto;padding:18px 20px;scroll-behavior:smooth;max-height:min(52vh,360px)}
.legal-body h3{font-size:16px}
.legal-body p{font-size:14px;line-height:1.7}
.legal-end{margin-top:22px;padding-top:14px;border-top:1px dashed var(--line);text-align:center;font-size:12.5px;color:var(--ink-soft);letter-spacing:.05em}
.legal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);background:var(--gray-50);flex:0 0 auto}
.legal-progress{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.legal-progress.is-ready{color:#16a34a}
.legal-foot .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){.legal-card{max-height:92vh}.legal-foot{justify-content:center;text-align:center}.legal-foot .btn{width:100%}}

/* ==== Suscripción a los avisos de una modelo ==== */
.follow-form{margin-bottom:8px}
.follow-btn{background:rgba(233,30,99,.08);border:1px solid rgba(233,30,99,.35);color:var(--primary);font-weight:700}
.follow-btn:hover{background:rgba(233,30,99,.14);border-color:var(--primary)}
.follow-btn.is-on{background:rgba(22,163,74,.09);border-color:rgba(22,163,74,.45);color:#15803d}
.follow-note{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 16px}
/* ==== Cortesía: un contacto gratis ==== */
.courtesy{margin-top:14px;padding:14px;background:rgba(201,162,75,.1);border:1px solid rgba(201,162,75,.42);border-radius:14px;text-align:left}
.courtesy-tag{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#f3d774,#c9a24b);color:#2a1e05;font-weight:900;font-size:10.5px;line-height:1.2;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;margin-bottom:9px}
.courtesy-tag i{font-size:11px;margin:0}
.courtesy p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 12px}
.courtesy-btn{background:linear-gradient(135deg,#c9a24b,#a5822f);border:0;color:#fff;box-shadow:0 5px 14px rgba(201,162,75,.34)}
.courtesy-btn:hover{background:linear-gradient(135deg,#d6b05d,#8f7028);color:#fff}
.courtesy-btn i{font-size:13px;margin:0}
/* Que el botón de planes no quede pegado a la cortesía */
.courtesy + .btn{margin-top:10px}
.courtesy-used{display:flex;align-items:flex-start;gap:9px;background:rgba(201,162,75,.14);border:1px solid rgba(201,162,75,.42);border-radius:12px;padding:10px 13px;margin-bottom:14px;font-size:12.5px;line-height:1.55;color:#7d6220}
.courtesy-used i{color:#c9a24b;margin-top:2px;flex:0 0 auto}
.courtesy-used a{color:var(--primary);font-weight:800}
/* ==== Bienvenida en la guía ==== */
.gd-welcome{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(233,30,99,.1),rgba(201,162,75,.12));border:1px solid rgba(201,162,75,.45);border-radius:16px;padding:16px 20px;margin-top:18px}
.gd-welcome>i{font-size:24px;color:var(--gold);flex:0 0 auto}
.gd-welcome div{flex:1 1 240px;min-width:0}
.gd-welcome strong{display:block;font-family:var(--font-display);font-size:19px;color:var(--ink)}
.gd-welcome p{font-size:13.5px;color:var(--ink-soft);margin:3px 0 0;line-height:1.55}

/* ==================== MI AGENDA — planificador de disponibilidad ====================
   Metáfora de agenda de papel: los días se marcan como con pluma, y las horas se
   "pintan" en una cinta continua para que un horario de 10:00 a 20:00 se lea como
   UNA barra y no como diez cuadritos sueltos. */
.ag-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:14px}
.ag-card{margin-bottom:0}
/* Cabecera numerada de cada paso */
.ag-step{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px}
.ag-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:15px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--primary),#f0629a);box-shadow:0 4px 12px rgba(233,30,99,.28)}
.ag-step h2{font-family:var(--font-display);font-size:19px;line-height:1.2;margin:2px 0 3px}
.ag-step p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:0}
/* Atajos */
.ag-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ag-chip{display:inline-flex;align-items:center;gap:6px;background:var(--gray-50);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:.13s}
.ag-chip:hover{border-color:var(--primary);color:var(--primary);background:rgba(233,30,99,.05)}
.ag-chip.is-off{color:var(--danger);border-color:rgba(214,48,49,.3)}
.ag-chip.is-off:hover{background:rgba(214,48,49,.07);border-color:var(--danger);color:var(--danger)}
/* Navegación de mes */
.ag-monthbar{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.ag-month{font-family:var(--font-display);font-size:17px;font-weight:700;min-width:150px;text-align:center}
.ag-arrow{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);text-decoration:none;font-size:12px;transition:.13s}
.ag-arrow:hover{border-color:var(--primary);color:var(--primary)}
/* Calendario */
.ag-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.ag-dow{text-align:center;font-size:10.5px;font-weight:900;letter-spacing:.08em;color:var(--gray-400);padding-bottom:2px}
.ag-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;aspect-ratio:1/1;min-height:0;padding:2px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-family:inherit;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;overflow:hidden}
.ag-day:hover:not(:disabled){border-color:var(--primary);transform:translateY(-1px)}
.ag-day.is-empty{border:0;background:none;pointer-events:none}
.ag-day.is-past{opacity:.35;cursor:not-allowed;background:var(--gray-50)}
.ag-daynum{font-family:var(--font-display);font-size:15px;font-weight:700;line-height:1;color:var(--ink)}
.ag-dayh{font-size:9px;font-weight:800;letter-spacing:.02em;line-height:1;color:var(--gray-400)}
.ag-dayh.is-none{color:var(--gray-300)}
/* Estado del día */
.ag-day.is-open{background:rgba(0,184,148,.09);border-color:rgba(0,184,148,.38)}
.ag-day.is-open .ag-dayh{color:#0a7a5f}
.ag-day.is-closed{background:var(--gray-100,#f0f0f0);border-color:var(--gray-300)}
.ag-day.is-closed .ag-dayh{color:var(--gray-500)}
.ag-day.is-today .ag-daynum{color:var(--primary)}
.ag-day.is-today::after{content:"";position:absolute;bottom:3px;width:14px;height:2px;border-radius:2px;background:var(--primary)}
/* Seleccionado: el anillo rosa manda sobre cualquier otro estado */
.ag-day.is-sel{border-color:var(--primary);background:rgba(233,30,99,.1);box-shadow:inset 0 0 0 2px var(--primary);transform:translateY(-1px)}
.ag-day.is-sel .ag-daynum{color:var(--primary-dark)}
.ag-daycita{position:absolute;top:2px;right:2px;min-width:14px;height:14px;line-height:14px;border-radius:999px;background:var(--secondary);color:#fff;font-size:8.5px;font-weight:900;text-align:center;padding:0 3px}
/* Leyenda */
.ag-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--ink-soft)}
.ag-legend span{display:inline-flex;align-items:center;gap:6px}
.ag-sw{width:11px;height:11px;border-radius:4px;border:1px solid var(--line);flex:0 0 auto}
.ag-sw.is-open{background:rgba(0,184,148,.25);border-color:rgba(0,184,148,.5)}
.ag-sw.is-closed{background:var(--gray-200,#e6e6e6);border-color:var(--gray-300)}
.ag-sw.is-none{background:var(--surface)}
.ag-sw.is-cita{background:var(--secondary);border-color:var(--secondary);border-radius:50%}
.ag-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding-top:11px;border-top:1px dashed var(--line);font-size:12px;line-height:1.55;color:var(--ink-soft)}
.ag-note i{color:var(--gold);margin-top:2px;flex:0 0 auto}
/* Cinta de horas */
/* Horas abiertas: se unen en una cinta continua */
/* Resumen del horario */
/* Barra de guardado */
.ag-bar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 16px;margin-bottom:16px;box-shadow:0 10px 26px rgba(28,22,34,.1);transition:border-color .15s,box-shadow .15s}
.ag-bar.is-live{border-color:var(--primary);box-shadow:0 12px 30px rgba(233,30,99,.18)}
.ag-bar__info{flex:1 1 180px;font-size:13.5px;color:var(--ink-soft)}
.ag-bar__info strong{font-family:var(--font-display);font-size:20px;color:var(--primary);margin-right:3px}
.ag-bar .btn:disabled{opacity:.45;cursor:not-allowed}
/* Cabecera del día (citas) */
.ag-daybar__title{flex:1 1 auto;min-width:0;text-align:center}
.ag-daybar__title h3{font-family:var(--font-display);font-size:17px;margin:0;line-height:1.25}
.ag-daybar__title span{font-size:12px}
@media(max-width:980px){
    .ag-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    .ag-cal{gap:4px}
    .ag-daynum{font-size:13px}
    .ag-dayh{font-size:8px}
    .ag-month{font-size:15px;min-width:0}
    .ag-bar{position:static;flex-direction:column;align-items:stretch;text-align:center}
    .ag-bar .btn{width:100%;justify-content:center}
}

/* ==================== CRONOGRAMA DEL DÍA (agenda de la modelo) ====================
   Una fila por hora. Una cita de 3 horas es UN bloque que abarca 3 filas: se ve
   cuánto dura sin leer nada. Sustituye a la lista de citas que había aparte. */
.ag-cron{display:flex;flex-direction:column}
.cr-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.cr-head__t{flex:1 1 auto;min-width:0;text-align:center}
.cr-head__t h2{font-family:var(--font-display);font-size:18px;line-height:1.2;margin:0}
.cr-head__t span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.cr-editando{color:var(--primary)!important;font-weight:800}
.cr-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cr-edit{border-color:rgba(233,30,99,.35);color:var(--primary)}
.cr-banner{display:flex;align-items:flex-start;gap:9px;background:rgba(233,30,99,.08);border:1px solid rgba(233,30,99,.35);border-radius:12px;padding:10px 13px;margin-bottom:12px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.cr-banner i{color:var(--primary);margin-top:2px;flex:0 0 auto}
/* La rejilla: columna de horas + columna de contenido */
.cr-grid{display:grid;grid-template-columns:52px minmax(0,1fr);grid-auto-rows:46px;gap:4px;align-items:stretch}
.cr-hora{grid-column:1;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.cr-hora.is-past{opacity:.4}
/* Hueco tocable */
.cr-slot{grid-column:2;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:700;color:var(--gray-400);cursor:pointer;transition:background .12s,border-color .12s,color .12s;text-align:left}
.cr-slot.is-libre{background:rgba(0,184,148,.07);border-color:rgba(0,184,148,.32);color:#0a7a5f}
.cr-slot.is-libre:hover{background:rgba(0,184,148,.14);border-color:#00b894}
.cr-slot.is-cerrada{background:repeating-linear-gradient(45deg,var(--gray-50),var(--gray-50) 6px,transparent 6px,transparent 12px);border-style:dashed;color:var(--gray-400)}
.cr-slot.is-past{opacity:.35;cursor:not-allowed}
.cr-slot.is-past:hover{background:var(--surface)}
/* Elegida para agendar */
.cr-slot.is-pick{background:rgba(233,30,99,.12);border-color:var(--primary);color:var(--primary-dark);box-shadow:inset 0 0 0 1px var(--primary)}
/* En modo edición */
.cr-slot.is-abierta{background:linear-gradient(135deg,#c9a24b,#e6c76e);border-color:#b8912f;color:#2a1e05}
/* Bloque de cita */
.cr-cita{grid-column:2;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:9px 12px;border-radius:10px;
    background:linear-gradient(135deg,#e91e63,#f0629a);border:1px solid var(--primary-dark);color:#fff;overflow:hidden;
    box-shadow:0 4px 14px rgba(233,30,99,.25)}
.cr-cita__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cr-cita__top strong{font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-chip{flex:0 0 auto;background:rgba(255,255,255,.25);border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:900;letter-spacing:.02em}
.cr-cita__meta{font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.9);overflow-wrap:anywhere}
.cr-estado{font-weight:800}
.cr-mia{background:rgba(255,255,255,.22);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:800;margin-left:4px;white-space:nowrap}
.cr-wa{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:3px;background:#fff;color:#128C4A;
    border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:800;text-decoration:none}
.cr-wa:hover{background:#eafff2;color:#0d6e3a}
/* Leyenda */
.cr-leyenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--ink-soft)}
.cr-leyenda span{display:inline-flex;align-items:center;gap:6px}
.cr-sw{width:11px;height:11px;border-radius:4px;flex:0 0 auto;border:1px solid var(--line)}
.cr-sw.is-libre{background:rgba(0,184,148,.25);border-color:rgba(0,184,148,.5)}
.cr-sw.is-cita{background:var(--primary);border-color:var(--primary-dark)}
.cr-sw.is-cerrada{background:var(--gray-100,#f0f0f0);border-style:dashed}
/* Aviso de que se está editando: la tarjeta entera cambia */
.ag-card.is-editing{border-color:var(--primary);box-shadow:0 0 0 3px rgba(233,30,99,.1)}
/* Formulario de agendar */
.cr-form{margin-top:0}
.cr-form h3{font-family:var(--font-display);font-size:17px;margin:0 0 3px}
.cr-form__hint{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0 0 12px}
.cr-form.is-off .cr-form__hint{color:var(--gray-400)}
.cr-form__body{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.cr-form__body .inp{margin:0}
.cr-form__body input[name="guest_name"]{flex:1 1 180px}
.cr-form__body input[name="guest_phone"]{flex:0 1 150px}
.cr-form__body input[name="location"]{flex:1 1 160px}
@media(max-width:640px){
    .cr-grid{grid-template-columns:44px minmax(0,1fr);grid-auto-rows:44px;gap:3px}
    .cr-hora{font-size:12px;padding-right:5px}
    .cr-slot{padding:0 9px;font-size:11.5px}
    .cr-cita{padding:7px 9px}
    .cr-cita__top strong{font-size:13px}
    .cr-cita__meta{font-size:10.5px}
    .cr-wa span{display:none}
    .cr-wa{padding:5px 9px}
    .cr-form__body{flex-direction:column;align-items:stretch}
    .cr-form__body .btn{width:100%;justify-content:center}
}

/* Cuántas horas dura la cita (paso 3 del modal de reserva del cliente) */
.bk-dur{margin:0 0 14px}
.bk-dur__lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.bk-dur__chips{display:flex;flex-wrap:wrap;gap:7px}
.bk-dur__chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-family:inherit;font-size:13px;font-weight:800;color:var(--ink-soft);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.bk-dur__chip:hover{border-color:var(--secondary);color:var(--secondary)}
.bk-dur__chip.on{background:var(--secondary);border-color:var(--secondary);color:#fff}

/* ===== CRONOGRAMA v3: filas compactas, cita con nombre y teléfono =====
   OJO: nada de `!important` sobre `display`. x-show de Alpine esconde poniendo
   un display:none EN LÍNEA, y un !important en la hoja le gana: la fila se
   quedaría visible para siempre. Se gana por especificidad (.cr-grid .cr-cita). */
.ag-cron .cr-grid{grid-auto-rows:38px;gap:3px}
.cr-grid .cr-hora{font-size:12px}
.cr-grid .cr-slot{padding:0 11px;font-size:12px;border-radius:9px}
/* La cita: una línea con nombre + teléfono + horario, y el WhatsApp a la derecha */
.cr-grid .cr-cita{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    column-gap:8px;row-gap:1px;padding:5px 8px 5px 11px;border-radius:9px}
/* nowrap a la fuerza: el bloque de v2 dejaba flex-wrap:wrap y en una cita de 1 h
   el chip de la hora se iba a un segundo renglón que no cabe y salía cortado. */
.cr-cita__top{grid-column:1;display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:nowrap}
.cr-cita__top strong{font-size:13px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-tel{flex:0 0 auto;font-size:11px;font-weight:700;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.cr-cita .cr-chip{margin-left:auto;font-size:10px;padding:1px 7px;font-variant-numeric:tabular-nums}
.cr-cita__meta{grid-column:1;font-size:10.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-mia{padding:0 5px;font-size:9px}
/* Una cita de 1 h no tiene alto para dos renglones: se queda con el principal.
   También se le quita el chip de hora: en un solo renglón compite con el nombre
   y el teléfono, y la hora ya está escrita en la columna de la izquierda. */
.cr-cita.is-corta .cr-cita__meta{display:none}
.cr-cita.is-corta .cr-chip{display:none}
.cr-tel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El talón del boleto: columna fija del grid con las acciones. Al ser una
   celda del grid y no contenido suelto, la tarjeta NO se puede desbordar. */
.cr-grid .cr-cita__acciones{grid-column:2;grid-row:1/-1;align-self:stretch;display:flex;align-items:center;
    gap:5px;margin:0;padding-left:9px;border-left:1px dashed rgba(255,255,255,.5)}
.cr-grid .cr-wa,.cr-grid .cr-cerrar{flex:0 0 auto;width:28px;height:28px;padding:0;margin:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer;
    transition:transform .13s,background .13s,color .13s}
.cr-grid .cr-wa{background:#fff;color:#128C4A;border:0}
.cr-grid .cr-wa:hover{background:#eafff2;color:#0d6e3a;transform:scale(1.09)}
.cr-grid .cr-cerrar{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.6);color:#fff}
.cr-grid .cr-cerrar:hover{background:#fff;color:var(--primary-dark);border-color:#fff;transform:scale(1.09)}
/* Late suave mientras la cita siga sin cerrar: es lo único que le pide algo. */
.cr-grid .cr-cerrar::after{content:'';position:absolute;inset:-4px;border-radius:50%;
    border:1px solid rgba(255,255,255,.55);opacity:0;animation:crPulso 2.6s ease-out infinite}
.cr-grid .cr-cerrar{position:relative}
@keyframes crPulso{0%{opacity:.7;transform:scale(.85)}70%,100%{opacity:0;transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){.cr-grid .cr-cerrar::after{animation:none}}
/* Pantallas muy angostas: los círculos se encogen antes que comerse el nombre. */
@media (max-width: 400px){
    .cr-grid{grid-template-columns:44px minmax(0,1fr)}
    .cr-grid .cr-cita__acciones{gap:4px;padding-left:7px}
    .cr-grid .cr-wa,.cr-grid .cr-cerrar{width:26px;height:26px;font-size:13px}
    .cr-grid .cr-cita{padding:5px 6px 5px 9px}
}
/* Día sin horas que mostrar */
.cr-vacio{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
    padding:26px 16px;border:1px dashed var(--line);border-radius:14px;background:var(--gray-50)}
.cr-vacio i{font-size:26px;color:var(--gold)}
.cr-vacio p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-soft);max-width:280px}
.cr-pista{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;
    font-size:12.5px;color:var(--ink-soft)}
.cr-pista i{color:var(--primary)}
/* Barra de selección de horas */
.cr-sel .ag-bar__info strong{font-family:var(--font-display);font-size:16px;font-variant-numeric:tabular-nums}
.cr-avisos.is-on{border-color:rgba(0,184,148,.45);color:#0a7a5f;background:rgba(0,184,148,.08)}
/* Modal de datos de la cita */
.cr-modal{max-width:420px}
.cr-modal h2{font-family:var(--font-display)}
.cr-modal__when{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:2px 0 16px;
    font-size:13px;color:var(--ink-soft)}
.cr-modal__when i{color:var(--primary)}
.cr-modal__when strong{color:var(--ink);font-variant-numeric:tabular-nums}
.cr-modal .form-group{margin-bottom:13px}
.cr-modal label{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.cr-op{text-transform:none;letter-spacing:0;font-weight:600;color:var(--gray-400)}
.cr-modal__tip{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-soft)}
.cr-modal__tip.is-ok{color:#0a7a5f;font-weight:700}
.cr-modal__nota{display:flex;align-items:flex-start;gap:8px;margin:14px 0 16px;padding:9px 12px;
    border-radius:11px;background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.35);
    font-size:12px;line-height:1.45;color:var(--ink-soft)}
.cr-modal__nota i{color:var(--gold);margin-top:2px}
.cr-modal__acciones{display:flex;gap:9px}
.cr-modal__acciones .btn{flex:1 1 0;justify-content:center}
/* El día que se está viendo, marcado en el calendario (antes no se distinguía) */
.ag-day.is-hoy-ver{box-shadow:inset 0 0 0 2px var(--primary)}
@media(max-width:640px){
    .ag-cron .cr-grid{grid-template-columns:42px minmax(0,1fr);grid-auto-rows:36px}
    .cr-grid .cr-hora{font-size:11.5px;padding-right:5px}
    .cr-grid .cr-slot{padding:0 9px;font-size:11.5px}
    .cr-grid .cr-cita{padding:4px 6px 4px 9px;column-gap:6px}
    .cr-cita__top strong{font-size:12.5px}
    .cr-tel{font-size:10.5px}
    .cr-grid .cr-wa{width:27px;height:27px;font-size:14px}
    .cr-sel{flex-direction:row;flex-wrap:wrap}
    .cr-sel .ag-bar__info{flex:1 1 100%}
    .cr-sel .btn{flex:1 1 0;width:auto}
}

/* ===== DISPONIBILIDAD DEL PERFIL: calendario que se toca + horas del día ===== */
.av-mes{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 8px}
.av-mes__t{font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:capitalize}
.av-mes .agn-arrow{border:0;cursor:pointer;font-family:inherit}
.av-mes .agn-arrow:disabled{opacity:.3;cursor:default}
.av-mes .agn-arrow:disabled:hover{background:#efeaf0;color:var(--gray-700,#555)}
/* Las casillas ahora son botones: hay que reponer lo que el navegador les quita.
   minmax(0,1fr) + min-height:0 para que las 7 columnas quepan en 320px: con el
   min-height de 44px la rejilla pedía 344px y se salía de la tarjeta. */
.avail-cal .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
/* min-width:0 es el que de verdad hace falta: un <button> con aspect-ratio tiene
   ancho mínimo automático y se niega a encoger, empujando la rejilla fuera. */
.avail-cal .cal-cell{border:0;font-family:inherit;padding:0;cursor:default;min-height:0;min-width:0;max-width:100%}
.avail-cal button.cal-cell:not(:disabled){cursor:pointer;transition:transform .12s,box-shadow .12s}
.avail-cal button.cal-cell:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(108,92,231,.22)}
.avail-cal .cal-cell:disabled{cursor:default}
.avail-cal .cal-cell.sel{background:var(--secondary);color:#fff;font-weight:800;
    box-shadow:0 0 0 2px rgba(108,92,231,.28)}
.av-horas{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.av-horas .avail-title{text-transform:capitalize}
.av-nada{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:16px 12px;
    border:1px dashed var(--line);border-radius:12px;background:var(--gray-50);
    font-size:12.5px;color:var(--ink-soft);text-align:center}
.av-nada i{color:var(--gold)}
/* La hora nunca se debe cortar: caben "15:00" y "22:00" completos */
.hour-grid.view{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
.hour-grid.view .hour-slot{padding:7px 2px;font-size:12px;white-space:nowrap;
    font-variant-numeric:tabular-nums;letter-spacing:-.01em}
@media(max-width:400px){
    .hour-grid.view{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
    .hour-grid.view .hour-slot{font-size:11.5px;padding:7px 1px}
}

/* Las horas son botones que llevan a agendar: hay que reponer lo del navegador */
.hour-grid.view .hour-slot{font-family:inherit;cursor:default;transition:transform .12s,box-shadow .12s,background .12s}
.hour-grid.view button.hour-slot:not(:disabled){cursor:pointer}
.hour-grid.view button.hour-slot:not(:disabled):hover{background:rgba(0,184,148,.22);border-color:#00b894;
    transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,184,148,.25)}
.hour-grid.view button.hour-slot:disabled{cursor:default}
.av-aviso{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:9px 12px;border-radius:11px;
    background:rgba(108,92,231,.09);border:1px solid rgba(108,92,231,.28);
    font-size:12px;line-height:1.45;color:var(--ink-soft)}
.av-aviso i{color:var(--secondary);margin-top:2px;flex:0 0 auto}
.av-aviso a{color:var(--secondary);font-weight:700}
/* Costo de la cita en el modal de reserva */
.bk-costo{margin:0 0 16px;padding:12px 14px;border-radius:13px;
    background:rgba(108,92,231,.07);border:1px solid rgba(108,92,231,.24)}
.bk-costo__linea{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    font-size:13px;color:var(--ink-soft)}
.bk-costo__linea strong{color:var(--ink);font-variant-numeric:tabular-nums}
.bk-costo__total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    margin-top:7px;padding-top:8px;border-top:1px solid rgba(108,92,231,.22);
    font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.bk-costo__total strong{font-family:var(--font-display);font-size:22px;line-height:1.1;
    letter-spacing:0;text-transform:none;color:var(--secondary);font-variant-numeric:tabular-nums}
.bk-costo__nota{display:flex;align-items:flex-start;gap:7px;margin:9px 0 0;
    font-size:11.5px;line-height:1.45;color:var(--ink-soft)}
.bk-costo__nota i{color:var(--secondary);margin-top:2px;flex:0 0 auto}
/* Zona de interés: botones con las zonas que ella cubre */
.bk-zonas{margin:0 0 14px}
.bk-zonas__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.bk-zona{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
    border-radius:999px;padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:700;
    color:var(--ink-soft);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.bk-zona i{font-size:11px;color:var(--gray-400)}
.bk-zona:hover{border-color:var(--secondary);color:var(--secondary)}
.bk-zona:hover i{color:var(--secondary)}
.bk-zona.on{background:var(--secondary);border-color:var(--secondary);color:#fff}
.bk-zona.on i{color:#fff}

/* ===== REPORTE DE INCIDENTE (panel de la modelo) ===== */
.inc-abrir{display:inline-flex;align-items:center;gap:6px;margin-top:8px;border:1px solid rgba(255,45,85,.35);
    background:rgba(255,45,85,.07);border-radius:999px;padding:5px 11px;font-family:inherit;font-size:11.5px;
    font-weight:700;color:#d11149;cursor:pointer;white-space:nowrap}
.inc-abrir:hover{background:rgba(255,45,85,.16);border-color:#d11149}
.inc-hecho{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:700;
    color:var(--gray-400);white-space:nowrap}
.inc-modal{max-width:460px}
.inc-modal h2{font-family:var(--font-display)}
.inc-sub{margin:2px 0 14px;font-size:13px;color:var(--ink-soft)}
.inc-aviso{display:flex;align-items:flex-start;gap:9px;margin-bottom:16px;padding:10px 13px;border-radius:12px;
    background:rgba(0,184,148,.09);border:1px solid rgba(0,184,148,.3);font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.inc-aviso i{color:#0a7a5f;margin-top:2px;flex:0 0 auto}
.inc-modal label{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:5px}
.inc-grav{display:flex;gap:7px}
.inc-grav__op{flex:1 1 0;position:relative;margin:0}
.inc-grav__op input{position:absolute;opacity:0;pointer-events:none}
.inc-grav__op span{display:block;text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px 4px;
    font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;text-transform:none;letter-spacing:0}
.inc-grav__op input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff}
.inc-tip{display:block;margin-top:5px;font-size:11.5px;color:var(--gray-400);text-transform:none;letter-spacing:0;font-weight:600}
.inc-acciones{display:flex;gap:9px;margin-top:16px}
.inc-acciones .btn{flex:1 1 0;justify-content:center}

/* ===== ADMIN: CLIENTES REPORTADOS ===== */
.cs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cs-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
    border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink-soft);text-decoration:none}
.cs-tab:hover{border-color:var(--primary);color:var(--primary)}
.cs-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-tab__n{background:rgba(0,0,0,.08);border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:900}
.cs-tab.on .cs-tab__n{background:rgba(255,255,255,.22)}
.cs-h2{font-family:var(--font-display);font-size:17px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.cs-lista{display:flex;flex-direction:column;gap:7px}
.cs-fila{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1fr) auto auto;
    align-items:center;gap:12px;width:100%;text-align:left;font-family:inherit;
    border:1px solid var(--line);border-left:4px solid var(--gray-300);border-radius:12px;
    background:var(--surface);padding:11px 14px;cursor:pointer;transition:border-color .12s,transform .12s}
.cs-fila:hover{border-color:var(--primary);transform:translateX(2px)}
.cs-fila--alta{border-left-color:var(--danger)}
.cs-fila--media{border-left-color:var(--gold)}
.cs-fila--baja{border-left-color:var(--gray-300)}
.cs-fila--out{border-left-color:var(--danger);cursor:default;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto auto}
.cs-fila--out:hover{transform:none;border-color:var(--line)}
.cs-fila__quien{display:flex;align-items:center;gap:7px;min-width:0;font-size:14px}
.cs-fila__quien strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-fila__mot,.cs-fila__quien2{font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-fila__fecha{font-size:12px;color:var(--gray-400);white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-rein{flex:0 0 auto;background:rgba(255,45,85,.14);color:#d11149;border-radius:999px;padding:1px 8px;
    font-size:10.5px;font-weight:900;white-space:nowrap}
.cs-out{flex:0 0 auto;background:var(--ink);color:#fff;border-radius:999px;padding:1px 8px;font-size:10px;font-weight:800}
.cs-grav{border-radius:999px;padding:2px 10px;font-size:11px;font-weight:800;white-space:nowrap}
.cs-grav--alta{background:rgba(255,45,85,.14);color:#d11149}
.cs-grav--media{background:rgba(201,162,75,.18);color:#8a6a1f}
.cs-grav--baja{background:var(--gray-100,#f0f0f0);color:var(--gray-700,#555)}
/* Detalle */
.cs-modal{max-width:520px}
.cs-modal h2{font-family:var(--font-display)}
.cs-modal__sub{margin:2px 0 14px;font-size:13px;color:var(--ink-soft)}
.cs-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px;
    padding:12px 14px;border-radius:12px;background:var(--gray-50);border:1px solid var(--line)}
.cs-datos div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-datos span{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-400)}
.cs-datos strong{font-size:13px;overflow-wrap:anywhere}
.cs-relato{margin-bottom:14px}
.cs-relato__lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--gray-400);margin-bottom:5px}
.cs-relato p{margin:0;padding:11px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
    font-size:13px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.cs-acciones{display:flex;gap:9px;margin-bottom:16px}
.cs-acciones .btn{flex:1 1 0;justify-content:center}
.cs-expulsar{padding:13px 14px;border-radius:12px;background:rgba(255,45,85,.06);border:1px solid rgba(255,45,85,.3)}
.cs-expulsar__lbl{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:12.5px;font-weight:800;color:#d11149}
.cs-expulsar .form-control{margin-bottom:9px}
.cs-yaout{display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-radius:12px;background:var(--gray-50);
    border:1px dashed var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.cs-yaout i{margin-top:2px;flex:0 0 auto;color:var(--gray-400)}
/* Campanita + sidebar */
.bell-urgente{background:rgba(255,45,85,.08)}
.bell-urgente .bell-badge{background:var(--danger);color:#fff}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;border-radius:999px;padding:1px 7px;
    font-size:10.5px;font-weight:900}
@media(max-width:760px){
    .cs-fila{grid-template-columns:1fr auto;gap:6px 10px}
    .cs-fila__mot{grid-column:1/-1}
    .cs-fila__quien2{font-size:11.5px}
    .cs-fila--out{grid-template-columns:1fr auto}
    .cs-fila--out .cs-fila__mot{grid-column:1/-1}
    .inc-acciones,.cs-acciones{flex-direction:column}
}
/* Regla destacada en las guías (3 modelos = mes gratis / 1 invitada = 1 mes) */
.gd-regla{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:18px 20px;border-radius:16px;
    background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.28)}
.gd-regla--oro{background:rgba(201,162,75,.1);border-color:rgba(201,162,75,.36)}
.gd-regla__num{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;background:var(--secondary);color:#fff;font-family:var(--font-display);
    font-size:28px;font-weight:900;line-height:1}
.gd-regla--oro .gd-regla__num{background:var(--gold);color:#2a1e05}
.gd-regla__txt h4{font-family:var(--font-display);font-size:17px;line-height:1.3;margin:0 0 5px}
.gd-regla__txt p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
/* Avance de fidelidad en el panel del cliente */
.fid-card{margin-bottom:18px;padding:16px 18px;border-radius:16px;
    background:rgba(201,162,75,.09);border:1px solid rgba(201,162,75,.34)}
.fid-card.is-listo{background:rgba(0,184,148,.09);border-color:rgba(0,184,148,.36)}
.fid-card__top{display:flex;align-items:flex-start;gap:13px}
.fid-card__top > i{font-size:22px;color:var(--gold);margin-top:2px;flex:0 0 auto}
.fid-card.is-listo .fid-card__top > i{color:#0a7a5f}
.fid-card__top strong{display:block;font-family:var(--font-display);font-size:16px;line-height:1.25;margin-bottom:3px}
.fid-card__top span{display:block;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.fid-pasos{display:flex;gap:9px;margin:14px 0 10px}
.fid-paso{flex:1 1 0;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;
    border:1px dashed var(--line);background:var(--surface);font-family:var(--font-display);
    font-size:15px;font-weight:800;color:var(--gray-400)}
.fid-paso.on{border-style:solid;border-color:var(--gold);background:var(--gold);color:#2a1e05}
.fid-card.is-listo .fid-paso.on{border-color:#00b894;background:#00b894;color:#fff}
.fid-pie{display:flex;align-items:flex-start;gap:7px;margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.fid-pie i{margin-top:2px;flex:0 0 auto;color:var(--gold)}
.fid-card.is-listo .fid-pie i{color:#0a7a5f}
/* Invita y gana (panel de la modelo) */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ref-card{display:flex;flex-direction:column}
.ref-h2{font-family:var(--font-display);font-size:17px;margin:0 0 5px;display:flex;align-items:center;gap:8px}
.ref-p{margin:0 0 14px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.ref-codigo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
    padding:12px 16px;border-radius:13px;background:var(--ink);color:#fff}
.ref-codigo__lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.ref-codigo strong{font-family:var(--font-display);font-size:24px;letter-spacing:.12em}
.ref-liga{display:flex;gap:8px;margin-bottom:12px}
.ref-liga .form-control{flex:1 1 auto;min-width:0;font-size:12.5px}
.ref-liga .btn{flex:0 0 auto;white-space:nowrap}
.ref-compartir{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.ref-wa,.ref-tg{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:9px 15px;
    font-size:13px;font-weight:700;text-decoration:none}
.ref-wa{background:#25D366;color:#fff}
.ref-wa:hover{background:#1eb356;color:#fff}
.ref-tg{background:#229ED9;color:#fff}
.ref-tg:hover{background:#1b83b4;color:#fff}
.ref-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.ref-nums div{text-align:center;padding:12px 6px;border-radius:12px;background:var(--gray-50);border:1px solid var(--line)}
.ref-nums strong{display:block;font-family:var(--font-display);font-size:26px;line-height:1}
.ref-nums span{display:block;margin-top:3px;font-size:11px;font-weight:700;color:var(--ink-soft)}
.ref-nums__premio{background:rgba(201,162,75,.12)!important;border-color:rgba(201,162,75,.4)!important}
.ref-nums__premio strong{color:#8a6a1f}
.ref-pasos{margin:0;padding-left:20px;font-size:13px;line-height:1.8;color:var(--ink-soft)}
.ref-lista{display:flex;flex-direction:column;gap:7px}
.ref-fila{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;align-items:center;gap:12px;
    padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ref-fila__n{min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-fila__f{font-size:12px;color:var(--gray-400);white-space:nowrap;font-variant-numeric:tabular-nums}
.ref-est{border-radius:999px;padding:2px 11px;font-size:11px;font-weight:800;white-space:nowrap}
.ref-est--ok{background:rgba(0,184,148,.16);color:#0a7a5f}
.ref-est--esperando{background:rgba(201,162,75,.18);color:#8a6a1f}
.ref-est--no{background:var(--gray-100,#f0f0f0);color:var(--gray-700,#555)}
.ref-legal{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft)}
.ref-legal i{margin-top:2px;flex:0 0 auto;color:var(--gray-400)}
.cs-fila--fiel{border-left-color:var(--gold);cursor:default;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto}
.cs-fila--fiel:hover{transform:none;border-color:var(--line)}
.cs-dado{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0a7a5f}
@media(max-width:640px){
    .gd-regla{flex-direction:column;text-align:center;gap:12px}
    .ref-liga{flex-direction:column}
    .ref-liga .btn{width:100%;justify-content:center}
    .ref-fila{grid-template-columns:1fr auto}
    .ref-fila__f{grid-column:1/-1}
}
/* ============ MENÚ DEL PANEL EN CELULAR (cajón desde el header) ============ */
.nav-burger{display:none}                      /* en escritorio no hace falta */
.dash-drawer__head{display:none}
.dash-nav-overlay{display:none}
@media (max-width: 900px){
    /* El botón vive junto al logo, del lado donde cae el pulgar */
    .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
        flex:0 0 auto;border:1px solid var(--line);border-radius:12px;background:var(--white);
        color:var(--ink);font-size:17px;cursor:pointer;font-family:inherit}
    .nav-burger:hover{border-color:var(--primary);color:var(--primary)}

    /* El sidebar deja de empujar el contenido: se sale de la pantalla.
       Se estiliza por `.dash-drawer` y no por `.dash-nav` porque esa clase ya
       arrastra reglas viejas que se quedaban con `left` y `transform`. */
    /* La altura se fija a la fuerza: la regla de escritorio le pone
       `height:fit-content` y con eso el cajón crecía más que la pantalla, se
       salía por abajo y nunca había nada que deslizar (los últimos enlaces
       quedaban fuera de alcance). `dvh` descuenta la barra del navegador. */
    .dash-drawer{position:fixed;top:0;left:-100vw;bottom:0;z-index:10060;width:284px;max-width:86vw;
        height:100vh;height:100dvh;margin:0;border-radius:0 18px 18px 0;padding:0 14px 20px;
        overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
        display:block;box-shadow:0 18px 50px rgba(0,0,0,.28);
        transition:left .28s cubic-bezier(.22,1,.36,1)}
    .dash-drawer.is-open{left:0}
    .dash-drawer a{margin-bottom:4px}

    .dash-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
        position:sticky;top:0;z-index:1;margin:0 -14px 10px;padding:14px;background:var(--white);
        border-bottom:1px solid var(--line)}
    .dash-drawer__head span{font-family:var(--font-display);font-size:16px;font-weight:700}
    .dash-drawer__head button{width:34px;height:34px;border:0;border-radius:50%;background:var(--gray-100);
        color:var(--ink);font-size:15px;cursor:pointer;font-family:inherit}

    .dash-nav-overlay{display:block;position:fixed;inset:0;z-index:10059;background:rgba(0,0,0,.5);
        opacity:0;pointer-events:none;transition:opacity .28s}
    .dash-nav-overlay.is-open{opacity:1;pointer-events:auto}

    /* El contenido arranca arriba, sin la lista de 15 botones estorbando */
    .dash-layout{padding-top:16px}
}
/* Cajón de menú en una página que NO es panel (ej. /planes): en escritorio no
   existe sidebar ahí, así que se oculta; en celular sí, para que el ☰ sirva. */
.drawer-suelto{display:none}
@media (max-width: 900px){ .drawer-suelto{display:block} }

/* ═══════════════════════════════════════════════════════════
   PLANES PERSONALES DE LA MODELO (viaje, cita médica, descanso)
   Le tapan la agenda sin tocar su horario de trabajo.
   ═══════════════════════════════════════════════════════════ */
/* Tarjeta "Mis planes": va arriba de la agenda, es lo primero que se aparta */
.pl-card{margin-bottom:16px;border-left:4px solid var(--secondary)}
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pl-head h2{font-family:var(--font-display);font-size:19px;margin:0;display:flex;align-items:center;gap:8px}
.pl-head h2 i{color:var(--secondary);font-size:17px}
.pl-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:5px 0 12px}
.pl-lista{display:flex;flex-direction:column;gap:7px}
.pl-fila{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);border-radius:11px;
    background:linear-gradient(135deg,rgba(108,92,231,.07),rgba(108,92,231,.02));border-left:3px solid var(--secondary)}
.pl-fila__t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.pl-fila__t strong{font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-fila__t small{font-size:11.5px;color:var(--ink-soft);line-height:1.35;overflow-wrap:anywhere}
.pl-fila.is-repe{border-left-color:var(--gold,#c9a24b);background:linear-gradient(135deg,rgba(201,162,75,.1),rgba(201,162,75,.02))}
.pl-tag{flex:0 0 auto;background:var(--secondary);color:#fff;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:900;white-space:nowrap}
.pl-tag.is-repe{background:#c9a24b;color:#2a1e05;display:inline-flex;align-items:center;gap:4px}
.pl-quitar{flex:0 0 auto;width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--line);
    border-radius:9px;background:var(--surface);color:var(--gray-400);cursor:pointer;transition:.13s}
.pl-quitar:hover{border-color:var(--danger);color:var(--danger);background:rgba(214,48,49,.06)}
.pl-vacio{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border:1px dashed var(--line);border-radius:11px;
    background:var(--gray-50);font-size:12px;line-height:1.5;color:var(--ink-soft);margin:0}
.pl-vacio i{color:var(--secondary);margin-top:2px}

/* Marca del plan en el calendario del mes */
.ag-dayplan{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:14px;height:3px;border-radius:2px;background:var(--secondary)}
.ag-day.is-plan{box-shadow:inset 0 0 0 1px rgba(108,92,231,.35)}
.ag-sw.is-plan{background:var(--secondary);border-color:var(--secondary);border-radius:2px;height:5px;align-self:center}

/* Bloque del plan dentro del cronograma del día */
.cr-plan{grid-column:2;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:9px 12px;border-radius:10px;
    background:linear-gradient(135deg,#6c5ce7,#8f83ee);border:1px solid #4f43c7;color:#fff;overflow:hidden;
    box-shadow:0 4px 14px rgba(108,92,231,.22)}
.cr-plan__top{display:flex;align-items:center;gap:8px;min-width:0}
.cr-plan__top strong{font-size:13.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-plan__meta{font-size:11px;color:rgba(255,255,255,.85);line-height:1.4}
.cr-plan.is-corta{padding:6px 11px}
.cr-plan.is-corta .cr-plan__meta{display:none}

/* Modal: agregar plan */
.pl-fechas,.pl-horas{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pl-repe{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:5px}
.pl-repe .pl-op{padding:9px 4px;font-size:11.5px;flex-direction:column;gap:4px}
.pl-repe .pl-op.is-on{background:#c9a24b;border-color:#b8912f;color:#2a1e05;box-shadow:0 3px 10px rgba(201,162,75,.3)}
.cr-modal__tip.is-repe{display:block;margin:6px 0 0;line-height:1.5}
.pl-modo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0 11px}
.pl-op{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border:1px solid var(--line);
    border-radius:11px;background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:700;
    color:var(--ink-soft);cursor:pointer;transition:.13s}
.pl-op:hover{border-color:var(--secondary);color:var(--secondary)}
.pl-op.is-on{background:var(--secondary);border-color:var(--secondary);color:#fff;box-shadow:0 3px 10px rgba(108,92,231,.25)}
@media (max-width: 380px){
    .pl-fechas,.pl-horas,.pl-modo{grid-template-columns:1fr}
    .pl-repe{grid-template-columns:1fr 1fr}
    .pl-repe .pl-op:first-child{grid-column:1 / -1}
    .pl-fila{flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════
   CERRAR UNA CITA DESDE LA AGENDA
   «Sí asistí» o «no voy a poder llegar», sin salir de la hora
   que está mirando.
   ═══════════════════════════════════════════════════════════ */
.cr-cita__acciones{display:flex;align-items:center;gap:6px}
.cr-cerrar{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}

.cc-datos{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 4px;font-size:12.5px;color:var(--ink-soft)}
.cc-datos i{color:var(--gray-400);margin-right:4px}
.cc-ops{display:grid;gap:9px;margin:6px 0 4px}
.cc-op{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;
    text-align:left;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
    font-family:inherit;color:var(--ink);cursor:pointer;transition:.14s}
.cc-op i{grid-row:1 / span 2;font-size:23px}
.cc-op strong{font-size:14.5px;line-height:1.25}
.cc-op small{font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.cc-op.is-si i{color:#00b894}
.cc-op.is-si:hover{border-color:#00b894;background:rgba(0,184,148,.07);transform:translateY(-1px)}
.cc-op.is-no i{color:var(--danger)}
.cc-op.is-no:hover{border-color:var(--danger);background:rgba(214,48,49,.06);transform:translateY(-1px)}
.cc-wa{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;padding:11px 14px;
    border-radius:12px;background:#128C4A;color:#fff;font-size:13px;font-weight:800;text-decoration:none;transition:.13s}
.cc-wa:hover{background:#0d6e3a;color:#fff}
.cr-modal__nota.is-ok{background:rgba(0,184,148,.09);border-color:rgba(0,184,148,.28)}
.cr-modal__nota.is-ok i{color:#00b894}
.cr-modal__nota.is-warn{background:rgba(214,48,49,.07);border-color:rgba(214,48,49,.25)}
.cr-modal__nota.is-warn i{color:var(--danger)}

/* Citas por cerrar: recordatorio compacto al pie del calendario. Una línea por
   cita, tocable completa; el detalle vive en el modal, aquí solo hace falta
   reconocerla. */
.pc-caja{margin-top:16px;padding:12px 13px;border:1px solid rgba(201,162,75,.4);border-radius:13px;
    background:linear-gradient(135deg,rgba(201,162,75,.12),rgba(201,162,75,.03))}
.pc-head{display:flex;align-items:center;gap:8px}
.pc-head h3{font-family:var(--font-display);font-size:14.5px;margin:0;display:flex;align-items:center;gap:7px}
.pc-head h3 i{color:#b8912f;font-size:13px}
.pc-n{background:#c9a24b;color:#2a1e05;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:900}
.pc-sub{font-size:11.5px;color:var(--ink-soft);line-height:1.4;margin:2px 0 9px}
.pc-lista{display:flex;flex-direction:column;gap:5px}
.pc-fila{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:1px solid var(--line);
    border-radius:9px;background:var(--surface);font-family:inherit;text-align:left;color:var(--ink);
    cursor:pointer;transition:border-color .13s,background .13s,transform .13s}
.pc-fila:hover{border-color:#c9a24b;background:#fff;transform:translateX(2px)}
.pc-fila__t{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:7px}
.pc-fila__t strong{font-size:12.5px;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-fila__t small{flex:0 0 auto;font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pc-fila > i{flex:0 0 auto;font-size:11px;color:var(--gray-400)}
.pc-fila:hover > i{color:#b8912f}

/* ═══════════════════════════════════════════════════════════
   CALIFICAR AL CLIENTE (modal independiente)
   Estrellas grandes y tocables; el "no llegó" como interruptor
   aparte, porque no es "una estrella menos", es otra cosa.
   ═══════════════════════════════════════════════════════════ */
.cr-grid .cr-cerrar.is-star{background:#c9a24b;border-color:#e0c274;color:#2a1e05}
.cr-grid .cr-cerrar.is-star:hover{background:#fff;color:#8a6a1c;border-color:#fff}

.cf-hist{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:11px;
    background:var(--gray-50);border:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--ink-soft)}
.cf-hist i{color:var(--secondary);margin-top:2px}
.cf-hist strong{color:var(--ink);font-variant-numeric:tabular-nums}
.cf-hist.is-alerta{background:rgba(214,48,49,.06);border-color:rgba(214,48,49,.28)}
.cf-hist.is-alerta i,.cf-hist.is-alerta b{color:var(--danger)}

.cf-stars{display:flex;justify-content:center;gap:6px;margin:4px 0 2px}
.cf-star{width:46px;height:46px;display:grid;place-items:center;border:0;background:none;padding:0;
    font-size:29px;color:var(--gray-200,#e2ddd6);cursor:pointer;line-height:1;
    transition:color .12s,transform .12s}
.cf-star:hover{transform:scale(1.14)}
.cf-star.is-on{color:#c9a24b;text-shadow:0 2px 10px rgba(201,162,75,.45)}
.cf-leyenda{text-align:center;margin:0 0 14px;font-family:var(--font-display);font-size:14px;
    font-weight:700;color:var(--ink-soft);min-height:20px}

.cf-falta{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;margin-bottom:14px;
    border:1px solid var(--line);border-radius:13px;background:var(--surface);font-family:inherit;
    text-align:left;color:var(--ink);cursor:pointer;transition:.14s}
.cf-falta:hover{border-color:var(--danger)}
.cf-falta__box{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:2px solid var(--gray-300,#cfc7bd);
    display:grid;place-items:center;color:transparent;font-size:11px;transition:.14s}
.cf-falta__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.cf-falta__t strong{font-size:13.5px;line-height:1.25}
.cf-falta__t small{font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.cf-falta.is-on{background:rgba(214,48,49,.07);border-color:var(--danger)}
.cf-falta.is-on .cf-falta__box{background:var(--danger);border-color:var(--danger);color:#fff}
.cf-falta.is-on .cf-falta__t strong{color:var(--danger)}
@media (max-width: 360px){
    .cf-star{width:40px;height:40px;font-size:25px}
}
/* Fila "por calificar" en la lista de pendientes */
.pc-fila.is-calificar > i{color:#c9a24b}
.pc-fila.is-calificar:hover{border-color:#c9a24b}

/* Duración de la cita: se cierra y se califica ENTERA, no hora por hora */
.cc-dur{flex:0 0 auto;background:var(--primary);color:#fff;border-radius:999px;padding:2px 9px;
    font-size:11px;font-weight:900;letter-spacing:.02em}
.cc-entera{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:11px;
    background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.28);
    font-size:12px;line-height:1.45;color:var(--ink-soft)}
.cc-entera i{color:var(--secondary);margin-top:2px}
.pc-h{flex:0 0 auto;background:var(--gray-100,#f0ece6);color:var(--ink-soft);border-radius:999px;
    padding:1px 8px;font-size:10.5px;font-weight:900;white-space:nowrap}
.pc-fila:hover .pc-h{background:#c9a24b;color:#2a1e05}

/* ═══════════════════════════════════════════════════════════
   CALIFICACIONES DE CLIENTES (admin + modelo)
   Un renglón por persona, con el promedio como número grande
   a la izquierda: se escanea la lista sin leerla.
   ═══════════════════════════════════════════════════════════ */
.cal-tot{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.cal-tot__c{padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cal-tot__c strong{display:block;font-family:var(--font-display);font-size:26px;line-height:1;
    font-variant-numeric:tabular-nums;color:var(--ink)}
.cal-tot__c strong i{font-size:16px;color:#c9a24b;font-style:normal;margin-left:2px}
.cal-tot__c span{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.cal-tot__c.is-mal{border-color:rgba(214,48,49,.35);background:rgba(214,48,49,.05)}
.cal-tot__c.is-mal strong{color:var(--danger)}

.cal-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.cal-buscar{position:relative;flex:1 1 240px;min-width:0}
.cal-buscar i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--gray-400);font-size:13px}
.cal-buscar .form-control{padding-left:35px}
.cal-barra .cs-tabs{margin-bottom:0}

.cal-aviso{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:10px 13px;border-radius:12px;
    background:rgba(108,92,231,.07);border:1px solid rgba(108,92,231,.25);
    font-size:12px;line-height:1.5;color:var(--ink-soft)}
.cal-aviso i{color:var(--secondary);margin-top:2px}

.cal-lista{display:flex;flex-direction:column;gap:8px}
.cal-fila{border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden}
.cal-fila.is-mal{border-color:rgba(214,48,49,.35);background:rgba(214,48,49,.04)}
.cal-cab{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:0;background:none;
    font-family:inherit;text-align:left;color:var(--ink);cursor:pointer}
.cal-cab.is-plano{cursor:default}
.cal-cab:not(.is-plano):hover{background:rgba(0,0,0,.02)}
.cal-prom{flex:0 0 auto;min-width:52px;display:flex;align-items:baseline;justify-content:center;gap:1px;
    padding:6px 8px;border-radius:11px;background:rgba(201,162,75,.16);color:#8a6a1c;
    font-family:var(--font-display);font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.cal-prom i{font-size:12px;font-style:normal}
.cal-prom.is-mal{background:rgba(214,48,49,.14);color:var(--danger)}
.cal-quien{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cal-quien strong{font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-quien small{font-size:11.5px;color:var(--ink-soft);line-height:1.35;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.cal-quien small i{margin-right:3px}
.cal-tags{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.cal-tag{background:var(--gray-100,#f0ece6);color:var(--ink-soft);border-radius:999px;padding:2px 9px;
    font-size:10.5px;font-weight:800;white-space:nowrap;text-decoration:none}
.cal-tag.is-mal{background:rgba(214,48,49,.14);color:var(--danger)}
.cal-tag.is-rep{background:var(--danger);color:#fff}
.cal-flecha{flex:0 0 auto;font-size:12px;color:var(--gray-400);transition:transform .16s}
.cal-flecha.is-open{transform:rotate(180deg)}

.cal-detalle{display:flex;flex-direction:column;gap:9px;padding:2px 13px 13px;border-top:1px dashed var(--line)}
.cal-item{padding:9px 11px;border-radius:10px;background:var(--gray-50)}
.cal-item__cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
.cal-item__cab b{color:#c9a24b;letter-spacing:1px}
.cal-item__cab b.is-mal{color:var(--danger)}
.cal-item__quien{font-weight:800;color:var(--ink)}
.cal-item__cab time{margin-left:auto;color:var(--gray-400);font-size:11px;font-variant-numeric:tabular-nums}
.cal-item__txt{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink);font-style:italic}
.cal-item__cita{display:block;margin-top:5px;font-size:11px;color:var(--ink-soft)}
.cal-mio{margin:0;padding:0 13px 12px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);font-style:italic}
.cal-tope{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:12px;color:var(--ink-soft)}
.cal-tope i{color:var(--gold)}
@media (max-width: 560px){
    .cal-cab{flex-wrap:wrap;row-gap:8px}
    .cal-quien{flex:1 1 120px}
    .cal-tags{width:100%;justify-content:flex-start}
    .cal-flecha{position:absolute;right:14px;top:18px}
    .cal-fila{position:relative}
}

/* Etiquetas de por qué un perfil está en «Perfiles que me interesan» */
.pi-motivos{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.pi-motivo{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;
    font-size:10.5px;font-weight:800;white-space:nowrap}
.pi-motivo.is-fav{background:rgba(201,162,75,.18);color:#8a6a1c}
.pi-motivo.is-sig{background:rgba(108,92,231,.14);color:#4f43c7}

/* ═══════════════════════════════════════════════════════════
   DESGLOSE DE LA CALIFICACIÓN (perfil público)
   El 4.8 se toca y cuenta de dónde sale.
   ═══════════════════════════════════════════════════════════ */
.profile-rating.is-tocable{border:0;background:none;font-family:inherit;color:inherit;cursor:pointer;
    padding:6px 8px;border-radius:12px;transition:background .13s,transform .13s}
.profile-rating.is-tocable:hover{background:rgba(201,162,75,.12);transform:translateY(-1px)}
.profile-rating.is-tocable .muted i{font-size:9px;margin-left:2px;opacity:.7}

.dg-modal{max-width:440px}
.dg-modal h2{font-family:var(--font-display);font-size:20px;margin:0 0 16px}
.dg-cab{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dg-nota{flex:0 0 auto;text-align:center;min-width:86px}
.dg-nota strong{display:block;font-family:var(--font-display);font-size:42px;line-height:1;
    color:var(--ink);font-variant-numeric:tabular-nums}
.dg-nota .stars{font-size:13px;color:#c9a24b;letter-spacing:1px;margin-top:3px}
.dg-nota small{display:block;margin-top:3px;font-size:11px;color:var(--ink-soft)}
.dg-barras{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.dg-barra{display:flex;align-items:center;gap:8px}
.dg-barra__n{flex:0 0 auto;width:24px;font-size:11px;font-weight:800;color:var(--ink-soft);
    display:flex;align-items:center;gap:1px}
.dg-barra__n i{font-size:8px;color:#c9a24b;font-style:normal}
.dg-barra__pista{flex:1 1 auto;height:7px;border-radius:999px;background:var(--gray-100,#f0ece6);overflow:hidden}
.dg-barra__pista i{display:block;height:100%;border-radius:999px;background:#c9a24b}
.dg-barra__c{flex:0 0 auto;width:22px;text-align:right;font-size:11px;color:var(--ink-soft);
    font-variant-numeric:tabular-nums}
.dg-sub{font-family:var(--font-display);font-size:14px;margin:16px 0 9px}
.dg-aspectos{display:flex;flex-direction:column;gap:7px}
.dg-asp{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);
    border-radius:11px;background:var(--surface)}
.dg-asp > i{flex:0 0 auto;width:16px;text-align:center;color:var(--secondary);font-size:13px}
.dg-asp__t{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.dg-asp__s{flex:0 0 auto;font-size:11px;color:#c9a24b;letter-spacing:.5px}
.dg-asp b{flex:0 0 auto;font-size:13px;font-variant-numeric:tabular-nums}
.dg-nota-pie{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;padding:9px 12px;border-radius:11px;
    background:var(--gray-50);font-size:11.5px;line-height:1.5;color:var(--ink-soft)}
.dg-nota-pie i{color:var(--secondary);margin-top:2px}
@media (max-width: 420px){
    .dg-cab{flex-direction:column;align-items:stretch;gap:12px}
    .dg-nota{display:flex;align-items:baseline;justify-content:center;gap:9px;min-width:0}
    .dg-nota strong{font-size:32px}
    .dg-nota small{margin-top:0}
    .dg-asp__s{display:none}
}

/* ═══════════════════════════════════════════════════════════
   DENSIDAD EN ESCRITORIO
   El sitio se sentía "con zoom" en pantallas grandes: el
   contenido se quedaba en 1100–1280 px mientras la pantalla
   tenía 1800, y los tamaños eran los de un móvil grande. Aquí
   se ensancha el contenedor y se bajan un punto los tamaños
   más gordos. Solo aplica de 1200 px para arriba: en celular
   NADA cambia.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px){
    :root{ --maxw: 1440px; }

    /* Perfil público: es la vista que más se sentía apretada */
    .profile-wrapper{ max-width: 1400px; padding: 20px }
    .profile-grid{ grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 22px }
    .profile-name{ font-size: 26px }
    .profile-rating .stars{ font-size: 18px }
    .profile-rating .num{ font-size: 17px }
    /* Con la columna más ancha caben cuatro fichas por renglón en vez de tres */
    .detail-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px }

    /* Tarjetas y paneles: menos aire muerto, mismo aire donde se lee */
    .card{ padding: 20px }
    .dash-layout{ padding: 20px; gap: 20px; grid-template-columns: 226px minmax(0,1fr) }
    .dash-header{ margin-bottom: 18px }
    .dash-header h1{ font-size: 23px }
    .dash-header p{ font-size: 13.5px }
}

/* Pantallas de verdad anchas: se estira un poco más, sin llegar a
   renglones de texto imposibles de seguir con la vista. */
@media (min-width: 1700px){
    :root{ --maxw: 1560px }
    .profile-wrapper{ max-width: 1520px }
}

/* Reseña anónima: interruptor claro, no una casilla escondida */
.rev-anon{display:flex;align-items:center;gap:11px;padding:11px 13px;margin:0 0 12px;border:1px solid var(--line);
    border-radius:13px;background:var(--surface);cursor:pointer;transition:.14s}
.rev-anon:hover{border-color:var(--secondary)}
.rev-anon__box{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:2px solid var(--gray-300,#cfc7bd);
    display:grid;place-items:center;color:transparent;font-size:11px;transition:.14s}
.rev-anon__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.rev-anon__t strong{font-size:13.5px;line-height:1.25}
.rev-anon__t small{font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.rev-anon.is-on{background:rgba(108,92,231,.07);border-color:var(--secondary)}
.rev-anon.is-on .rev-anon__box{background:var(--secondary);border-color:var(--secondary);color:#fff}

/* ═══════════════════════════════════════════════════════════
   MIS CITAS Y RESEÑAS (cliente)
   Cada cita con la calificación que dejó, aspecto por aspecto.
   ═══════════════════════════════════════════════════════════ */
.hist-lista{display:flex;flex-direction:column;gap:11px}
.hist-cita{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.hist-cab{display:flex;align-items:center;gap:11px;padding:12px 14px}
.hist-quien{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.hist-quien strong{font-family:var(--font-display);font-size:15px;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-quien:hover strong{color:var(--primary)}
.hist-quien small{font-size:11.5px;color:var(--ink-soft);line-height:1.4;overflow-wrap:anywhere}
.hist-estado{flex:0 0 auto;border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:900;
    background:var(--gray-100,#f0ece6);color:var(--ink-soft);white-space:nowrap}
.hist-estado.is-completed{background:rgba(0,184,148,.15);color:#0a7a5f}
.hist-estado.is-accepted{background:rgba(233,30,99,.12);color:var(--primary-dark)}
.hist-estado.is-cancelled,.hist-estado.is-declined{background:rgba(214,48,49,.12);color:var(--danger)}

.hist-resena{padding:0 14px 13px;border-top:1px dashed var(--line);margin-top:2px;padding-top:11px}
.hist-res__cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:9px;font-size:12px;color:var(--ink-soft)}
.hist-res__gen b{color:#c9a24b;letter-spacing:1px;margin-right:5px;font-size:14px}
.cal-tag.is-esp{background:rgba(201,162,75,.18);color:#8a6a1c}
.hist-aspectos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px}
.hist-asp{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:var(--gray-50);font-size:12px}
.hist-asp > i{flex:0 0 auto;width:14px;text-align:center;color:var(--secondary);font-size:11px}
.hist-asp > span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-asp b{flex:0 0 auto;color:#c9a24b;letter-spacing:.5px}
.hist-com{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink);font-style:italic}

.hist-accion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border-top:1px dashed var(--line);background:var(--gray-50)}
.hist-accion p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);flex:1 1 200px}
.hist-accion p i{color:var(--gold);margin-right:5px}
.hist-accion.is-alerta{background:rgba(214,48,49,.05)}
.hist-accion.is-alerta p i{color:var(--danger)}
.hist-espera{margin:0;padding:11px 14px;border-top:1px dashed var(--line);background:var(--gray-50);
    font-size:12px;line-height:1.45;color:var(--ink-soft)}
.hist-espera i{color:var(--gray-400);margin-right:5px}

/* ═══════════════════════════════════════════════════════════
   PUNTOS A CALIFICAR (configuración del admin)
   Lista editable + vista previa de lo que verá el cliente.
   ═══════════════════════════════════════════════════════════ */
.pc-puntos{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.pc-punto{display:grid;grid-template-columns:22px 130px minmax(0,1fr) 34px 34px;align-items:center;gap:8px;
    padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:.14s}
.pc-punto.is-off{opacity:.5;background:var(--gray-50)}
.pc-punto__n{font-size:11px;font-weight:900;color:var(--gray-400);text-align:center}
.pc-punto__ico,.pc-punto__t{height:38px;padding:0 10px;font-size:13px}
.pc-punto__on,.pc-punto__x{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);
    border-radius:9px;background:var(--surface);color:var(--gray-400);cursor:pointer;transition:.13s;font-size:13px}
.pc-punto__on.is-on{background:rgba(0,184,148,.12);border-color:rgba(0,184,148,.45);color:#0a7a5f}
.pc-punto__x:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:rgba(214,48,49,.06)}
.pc-punto__x:disabled{opacity:.35;cursor:not-allowed}
.pc-aviso{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:9px 12px;border-radius:11px;
    background:rgba(214,48,49,.06);border:1px solid rgba(214,48,49,.25);font-size:12px;line-height:1.45;color:var(--ink-soft)}
.pc-aviso i{color:var(--danger);margin-top:2px}

.pc-previa{margin-top:16px;padding:13px;border:1px dashed var(--line);border-radius:13px;background:var(--gray-50)}
.pc-previa__t{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:9px}
.pc-previa__lista{display:flex;flex-direction:column;gap:5px}
.pc-previa__fila{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;
    border-radius:9px;background:var(--surface);font-size:12.5px}
.pc-previa__fila i{color:var(--secondary);margin-right:6px;width:14px;text-align:center}
.pc-previa__fila b{color:#c9a24b;letter-spacing:1px;flex:0 0 auto}
.pc-previa__fila.is-gen{background:#fff;border:1px solid var(--line);font-weight:800}
@media (max-width: 620px){
    .pc-punto{grid-template-columns:20px minmax(0,1fr) 34px 34px;row-gap:7px}
    .pc-punto__ico{grid-column:2 / -1}
    .pc-punto__t{grid-column:2 / -1}
    .pc-punto__on{grid-column:3;grid-row:1}
    .pc-punto__x{grid-column:4;grid-row:1}
}

/* Próximo horario libre, encima de la foto en «Perfiles que me interesan» */
.mc-libre{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;
    padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.01em;
    background:rgba(28,22,34,.82);color:#fff;backdrop-filter:blur(6px);
    box-shadow:0 2px 10px rgba(0,0,0,.22)}
.mc-libre i{font-size:10px;opacity:.9}
.mc-libre.is-hoy{background:linear-gradient(135deg,#00b894,#26d0a5);color:#04382c}
.mc-libre.is-lleno{background:rgba(28,22,34,.6);font-weight:700}
.model-card-image{position:relative}

/* ═══════════════════════════════════════════════════════════
   HEADER EN CELULAR: UN SOLO RENGLÓN
   Se partía en dos (☰ + logo arriba, Descubrir + 🔔 + nombre
   abajo) y se comía 113 px de alto. La campanita quedaba
   perdida en el segundo renglón. Aquí se deja todo en línea:
   los botones se vuelven íconos y el nombre se esconde — ya
   está dentro del menú que se abre.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 560px){
    .header-content{flex-wrap:nowrap;gap:7px;min-width:0}
    .logo-header{flex:0 1 auto;min-width:0;margin-right:auto}
    .header-actions{flex:0 0 auto;gap:6px}

    /* «Descubrir» y demás botones del header: solo el ícono.
       font-size:0 borra el texto suelto (no tiene etiqueta propia
       que se pueda ocultar) y el ícono recupera su tamaño. */
    .header-actions .btn{width:38px;height:38px;padding:0;border-radius:50%;
        display:inline-flex;align-items:center;justify-content:center;font-size:0}
    /* OJO: el bloque de 600px pone `.header-actions .btn i{display:none}`.
       Aquí el texto ya se borro con font-size:0, asi que si el icono tampoco
       se pinta el boton queda como un circulo vacio que no dice nada. Hay que
       devolverle el `display` a mano: solo restaurar el font-size no basta. */
    .header-actions .btn i{display:inline-block;font-size:15px;margin:0}

    /* «Ingresar» conserva su palabra: es la puerta de entrada para quien
       todavia no tiene cuenta, y un circulito con un monigote no le dice nada
       a nadie. Cabe de sobra (logo 62 + boton 106 de 348 px). */
    .header-actions .btn-ingresar{
        width:auto;min-width:0;height:36px;padding:0 15px;border-radius:999px;
        font-size:12.5px;font-weight:700;gap:7px;letter-spacing:.01em}

    .bell-trigger{width:38px;height:38px;font-size:16px;flex:0 0 auto;
        display:inline-flex;align-items:center;justify-content:center}
    .bell-count{top:-3px;right:-3px;min-width:17px;height:17px;font-size:9.5px}

    /* Solo la inicial: el nombre completo se lee al abrir el menú */
    .user-menu-trigger{width:38px;height:38px;padding:0;border-radius:50%;
        display:inline-flex;align-items:center;justify-content:center;gap:0}
    .user-menu-trigger > span:not(.user-avatar),
    .user-menu-trigger > i{display:none}
    .user-menu-trigger .user-avatar{width:38px;height:38px;margin:0;font-size:15px}

    .nav-burger{flex:0 0 auto;width:38px;height:38px}

    /* El desplegable ya no cabe anclado al botón: se centra bajo el header */
    .bell-dropdown,.user-dropdown{position:fixed;top:auto;right:10px;left:10px;width:auto;
        max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
}

/* Aviso flotante del mapa de clientes (quedó disponible / se bajó) */
.ct-aviso{position:fixed;left:50%;bottom:18px;transform:translate(-50%,14px);z-index:1200;
    display:flex;align-items:center;gap:9px;max-width:min(420px,calc(100vw - 24px));
    padding:12px 16px;border-radius:14px;background:var(--ink);color:#fff;
    font-size:13px;line-height:1.4;box-shadow:0 12px 34px rgba(0,0,0,.28);
    opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.ct-aviso.is-visible{opacity:1;transform:translate(-50%,0)}
.ct-aviso i{flex:0 0 auto;font-size:15px;color:var(--gold)}
.ct-aviso.is-ok{background:linear-gradient(135deg,#00b894,#0aa17f)}
.ct-aviso.is-ok i{color:#fff}

/* Campanita del cliente: distinguir lo nuevo de lo ya visto */
.bell-dropdown a{position:relative}
.bell-dropdown a.is-nuevo{background:rgba(0,184,148,.06)}
.bell-dropdown a.is-nuevo::before{content:'';position:absolute;left:5px;top:50%;transform:translateY(-50%);
    width:4px;height:22px;border-radius:3px;background:#00b894}
.bell-dropdown a span{flex:1 1 auto;min-width:0;line-height:1.4}
.bell-dropdown a time{flex:0 0 auto;font-size:10.5px;color:var(--gray-400);white-space:nowrap;font-weight:700}

/* Insignia «disponible ahora» en las tarjetas de perfiles que me interesan */
.mc-libre.is-ahora{background:linear-gradient(135deg,#00b894,#26d0a5);color:#04382c;
    box-shadow:0 2px 12px rgba(0,184,148,.45)}
.mc-libre.is-ahora i{font-size:7px;animation:mcLatido 1.6s ease-in-out infinite}
.mc-libre.is-ahora b{background:rgba(4,56,44,.18);border-radius:999px;padding:1px 6px;font-size:10px}
@keyframes mcLatido{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.mc-libre.is-ahora i{animation:none}}

/* ═══════════════════════════════════════════════════════════
   AVISO FLOTANTE DEL CLIENTE
   La campanita solo se ve si la miras; esto salta solo cuando
   una modelo que sigues se activa.
   ═══════════════════════════════════════════════════════════ */
.bliss-toast{position:fixed;left:12px;right:12px;bottom:14px;z-index:1300;
    display:flex;align-items:center;gap:11px;max-width:440px;margin:0 auto;
    padding:13px 14px;border-radius:16px;text-decoration:none;
    background:linear-gradient(135deg,#1c1622,#2c2436);color:#fff;
    box-shadow:0 16px 40px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);
    opacity:0;transform:translateY(16px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease}
.bliss-toast.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.bliss-toast > i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    background:rgba(0,184,148,.2);color:#26d0a5;font-size:14px}
.bliss-toast span{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.bliss-toast b{font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bliss-toast small{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.72);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bliss-toast button{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;font-size:17px;line-height:1;padding:0}
.bliss-toast button:hover{background:rgba(255,255,255,.24)}
@media (prefers-reduced-motion: reduce){.bliss-toast{transition:none}}

/* ═══════════════════════════════════════════════════════════
   BARRA «ACTIVAR AVISOS EN EL CELULAR»
   Sale hasta que el cliente da permiso, y se puede posponer.
   ═══════════════════════════════════════════════════════════ */
.push-barra{position:fixed;left:12px;right:12px;bottom:14px;z-index:1250;
    display:flex;align-items:center;gap:11px;max-width:460px;margin:0 auto;
    padding:12px 13px;border-radius:16px;
    background:linear-gradient(135deg,#241d2e,#1c1622);color:#fff;
    border:1px solid rgba(201,162,75,.35);box-shadow:0 14px 38px rgba(0,0,0,.34)}
.push-barra__ico{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    background:rgba(201,162,75,.2);color:#e6c76e;font-size:14px}
.push-barra__t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.push-barra__t strong{font-size:13.5px;line-height:1.25}
.push-barra__t small{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.72)}
.push-barra .btn{flex:0 0 auto;white-space:nowrap}
.push-barra__x{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;font-size:12px;padding:0;display:grid;place-items:center}
.push-barra__x:hover{background:rgba(255,255,255,.24)}
/* Si el flotante de aviso y esta barra coinciden, la barra se sube */
.bliss-toast.is-on ~ .push-barra{bottom:104px}
@media (max-width: 420px){
    .push-barra{flex-wrap:wrap;row-gap:9px}
    .push-barra__t{flex:1 1 100%;order:2}
    .push-barra .btn{order:3;flex:1 1 auto;justify-content:center}
    .push-barra__x{order:1;margin-left:auto}
}

/* Botón de chat en el perfil público */
.chat-form{margin-bottom:8px}
.chat-form .btn i{margin-right:6px}

/* Acciones del encabezado del chat + aviso de disponible ahora */
.chat-acciones{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.chat-activa{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:9px 12px;border-radius:12px;
    background:rgba(0,184,148,.1);border:1px solid rgba(0,184,148,.32);font-size:12.5px;line-height:1.4;color:#0a7a5f}
.chat-activa i{font-size:8px;animation:mcLatido 1.6s ease-in-out infinite}
@media (max-width: 460px){
    .chat-head{flex-wrap:wrap;row-gap:10px}
    .chat-acciones{width:100%;justify-content:stretch}
    .chat-acciones .btn{flex:1 1 auto;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════
   CITA DENTRO DEL CHAT (apartar con anticipo)
   El dinero va directo a la modelo; esto solo lo deja por
   escrito donde los dos lo van a volver a leer.
   ═══════════════════════════════════════════════════════════ */
.cita-lista{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.cita-card{border:1px solid var(--line);border-radius:14px;padding:12px 13px;background:var(--gray-50)}
.cita-card.is-accepted{border-color:rgba(0,184,148,.4);background:rgba(0,184,148,.05)}
.cita-card__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.cita-card__cuando{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--ink)}
.cita-card__cuando i{color:var(--primary);font-size:12px}
.cita-card__cuando b{background:var(--gray-100,#f0ece6);border-radius:999px;padding:1px 7px;font-size:10.5px}
.cita-card__estado{flex:0 0 auto;font-size:10.5px;font-weight:900;border-radius:999px;padding:2px 9px;
    background:var(--gray-200,#e6e0d8);color:var(--ink-soft)}
.cita-card.is-accepted .cita-card__estado{background:rgba(0,184,148,.2);color:#0a7a5f}
.cita-card__lugar{margin:5px 0 0;font-size:11.5px;color:var(--ink-soft)}
.cita-card__nota{display:flex;align-items:flex-start;gap:7px;margin:9px 0 0;font-size:11.5px;
    line-height:1.45;color:var(--ink-soft)}
.cita-card__nota i{margin-top:2px;color:var(--gray-400)}
.cita-card__nota.is-ok{color:#0a7a5f}
.cita-card__nota.is-ok i{color:#00b894}
.cita-card__nota.is-warn{color:var(--danger)}
.cita-card__nota.is-warn i{color:var(--danger)}
.cita-card__nota.is-chico{font-size:11px}

.cita-pago{margin-top:10px;padding-top:11px;border-top:1px dashed var(--line)}
.cita-pago__monto{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.cita-pago__monto span{font-size:11.5px;color:var(--ink-soft)}
.cita-pago__monto strong{font-family:var(--font-display);font-size:24px;line-height:1;color:var(--primary)}
.cita-pago__monto small{font-size:11px;color:var(--gray-400)}

.cita-banco{border:1px solid var(--line);border-radius:11px;background:var(--surface);
    padding:9px 11px;margin-bottom:10px}
.cita-banco__fila{display:flex;align-items:center;justify-content:space-between;gap:9px;
    padding:4px 0;font-size:12px;border-bottom:1px solid var(--gray-50)}
.cita-banco__fila:last-of-type{border-bottom:0}
.cita-banco__fila span{color:var(--ink-soft);flex:0 0 auto}
.cita-banco__fila strong{min-width:0;overflow-wrap:anywhere;text-align:right}
.cita-banco__fila.is-clabe{flex-wrap:wrap}
.cita-banco__fila.is-clabe strong{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cita-copiar{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
    border-radius:8px;background:var(--gray-50);padding:3px 9px;font-size:11px;font-weight:800;
    color:var(--ink-soft);cursor:pointer}
.cita-copiar:hover{border-color:var(--primary);color:var(--primary)}
.cita-banco__nota{margin:6px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.4}

/* Botón ▶ de iniciar cita en el talón de la tarjeta */
.cr-grid .cr-cerrar.is-play{background:#fff;color:var(--primary-dark);border-color:#fff}
.cr-grid .cr-cerrar.is-play:hover{background:#ffe3ee}
.cr-grid .cr-cerrar.is-play::after{border-color:rgba(255,255,255,.9)}

/* Modal de iniciar cita: a quién le avisamos */
.in-sub{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:15px;margin:16px 0 4px}
.in-sub i{color:var(--secondary);font-size:13px}
.in-ayuda{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--ink-soft)}
.in-lista{display:flex;flex-direction:column;gap:7px;margin-bottom:4px}
.in-op{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line);
    border-radius:13px;background:var(--surface);font-family:inherit;text-align:left;color:var(--ink);
    cursor:pointer;transition:.14s}
.in-op:hover{border-color:var(--secondary)}
.in-op__ini{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
    background:rgba(108,92,231,.14);color:var(--secondary);font-size:13px;font-weight:900}
.in-op__t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.in-op__t strong{font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-op__t small{font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.in-op__t small b{color:var(--danger);font-weight:800}
.in-op__ok{flex:0 0 auto;font-size:16px;color:var(--gray-200,#e2ddd6)}
.in-op.is-on{border-color:var(--secondary);background:rgba(108,92,231,.07)}
.in-op.is-on .in-op__ok{color:var(--secondary)}
.in-op.is-no .in-op__ini{background:var(--gray-100,#f0ece6);color:var(--gray-400)}
.in-op.is-no.is-on{border-color:var(--gray-400);background:var(--gray-50)}
.in-op.is-no.is-on .in-op__ok{color:var(--gray-400)}

/* «Sí asistí» todavía no aplica: la cita no ha empezado */
.cc-aun{display:flex;align-items:flex-start;gap:8px;margin:0 0 9px;padding:10px 12px;border-radius:12px;
    background:var(--gray-50);border:1px dashed var(--line);font-size:12px;line-height:1.45;color:var(--ink-soft)}
.cc-aun i{color:var(--gray-400);margin-top:2px}

/* ============================================================
   A quién cuido — la modelo que es monitora de otra
   ============================================================ */
.pw-lista{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pw-card{background:#fff;border:1px solid #e7ddd2;border-radius:16px;padding:16px}
.pw-card.is-activa{border-color:#6c5ce7;box-shadow:0 6px 18px rgba(108,92,231,.14)}
.pw-card.is-alerta{border-color:#e53935;background:#fff6f5;animation:pwLatido 1.6s ease-in-out infinite}
@keyframes pwLatido{0%,100%{box-shadow:0 0 0 0 rgba(229,57,53,.28)}50%{box-shadow:0 0 0 8px rgba(229,57,53,0)}}
.pw-card__top{display:flex;align-items:center;gap:10px}
.pw-ini{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:#f4efe8;color:#1c1622;font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem}
.pw-quien{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pw-quien strong{font-size:1rem;color:#1c1622;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-quien small{font-size:.78rem;color:#7a6f66}
.pw-quien small b{color:#e53935}
.pw-luz{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#d6cec4}
.pw-luz.is-on{background:#6c5ce7;box-shadow:0 0 0 4px rgba(108,92,231,.16)}
.pw-luz.is-alerta{background:#e53935;box-shadow:0 0 0 4px rgba(229,57,53,.18)}
.pw-nota{margin:10px 0 0;font-size:.82rem;color:#5c534b;background:#faf7f3;border-radius:10px;padding:8px 10px}
.pw-card .btn{margin-top:12px}
.pw-pie{margin:10px 0 0;font-size:.76rem;color:#8a8078;line-height:1.4}
.pw-ayuda{margin-top:18px;font-size:.85rem;color:#5c534b;background:#fff;border:1px dashed #e7ddd2;
    border-radius:14px;padding:12px 14px;line-height:1.5}
.pw-ayuda i{color:#c9a24b;margin-right:6px}
@media (max-width:400px){.pw-lista{grid-template-columns:1fr}}

/* ---- Reputación del cliente al agendar a mano ---- */
.ag-rep{margin:0 0 16px;border-radius:14px;padding:12px 14px;border:1px solid #e7ddd2;background:#faf7f3}
.ag-rep.is-buena{border-color:#cfe8d6;background:#f4fbf6}
.ag-rep.is-mala{border-color:#f3c9c6;background:#fff6f5}
.ag-rep__cab{display:flex;align-items:center;gap:12px}
.ag-rep__nota{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700;color:#fff;background:#1c1622}
.ag-rep.is-buena .ag-rep__nota{background:#2e9e5b}
.ag-rep.is-mala .ag-rep__nota{background:#e53935}
.ag-rep__txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ag-rep__txt strong{font-size:.95rem;color:#1c1622}
.ag-rep__txt small{font-size:.76rem;color:#7a6f66}
.ag-rep__falta{margin:10px 0 0;font-size:.8rem;color:#c62828;line-height:1.4}
.ag-rep__falta i{margin-right:5px}
.ag-rep__ver{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:700;color:#e91e63;text-decoration:none}
.ag-rep__ver i{font-size:.7rem;margin-left:3px}

/* ---- Compañeras activas en el mapa de clientes ---- */
.map-comp{display:inline-flex;align-items:center;gap:5px;margin-left:10px;font-size:.76rem;
    font-weight:700;color:#6c5ce7}
.map-comp i{font-size:.55rem}

/* ---- Cinta «estás activa en esta zona» (rastreo de clientes) ---- */
.zona-viva{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:11px 14px;
    border-radius:14px;background:#eef9f1;border:1px solid #cfe8d6}
.zona-viva__luz{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:#2e9e5b;
    box-shadow:0 0 0 0 rgba(46,158,91,.5);animation:zvLatido 1.8s ease-out infinite}
@keyframes zvLatido{0%{box-shadow:0 0 0 0 rgba(46,158,91,.45)}70%,100%{box-shadow:0 0 0 10px rgba(46,158,91,0)}}
.zona-viva span:last-child{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.zona-viva strong{font-size:.95rem;color:#1c1622}
.zona-viva small{font-size:.78rem;color:#5c7a66}

/* ---- Botón «Pagar con tarjeta» (link de cobro de la modelo) ---- */
.pay-link{display:flex;align-items:center;gap:12px;text-decoration:none;margin:0 0 12px;padding:13px 15px;
    border-radius:14px;background:linear-gradient(135deg,#00a8e8,#0074d9);color:#fff;
    box-shadow:0 8px 20px rgba(0,116,217,.28)}
.pay-link:hover{filter:brightness(1.06)}
.pay-link>i:first-child{font-size:20px;flex:0 0 auto}
.pay-link span{display:flex;flex-direction:column;line-height:1.3;flex:1 1 auto;min-width:0}
.pay-link strong{font-size:15px;color:#fff}
.pay-link small{font-size:11.5px;opacity:.9}
.pay-link__ir{font-size:12px;opacity:.85;flex:0 0 auto}

/* ============================================================
   CITA RÁPIDA — agendar desde cualquier pantalla del panel
   ============================================================ */
.qk-fab{position:fixed;right:18px;bottom:18px;z-index:1150;display:inline-flex;align-items:center;gap:9px;
    border:0;border-radius:999px;padding:13px 20px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:800;
    color:#fff;background:linear-gradient(135deg,#e91e63,#c2185b);box-shadow:0 10px 26px rgba(233,30,99,.38)}
.qk-fab:hover{filter:brightness(1.07)}
.qk-fab i{font-size:16px}
.qk-fondo{position:fixed;inset:0;background:rgba(20,14,24,.55);z-index:1190;backdrop-filter:blur(2px)}
.qk-panel{position:fixed;z-index:1200;right:18px;bottom:18px;width:min(430px,calc(100vw - 36px));
    max-height:min(86vh,760px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 26px 60px rgba(0,0,0,.3)}
.qk-panel__cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2;
    border-radius:20px 20px 0 0}
.qk-panel__cab h2{font-family:'Fraunces',serif;font-size:19px;margin:0;color:var(--ink)}
.qk-panel__cab h2 i{color:var(--primary);margin-right:6px}
.qk-panel__cab button{background:none;border:0;font-size:19px;color:var(--ink-soft);cursor:pointer;line-height:1}
.qk-form{padding:16px 18px 18px}
.qk-form .form-group{margin-bottom:12px}
.qk-form label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px}
.qk-fila{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:9px}
.qk-fila .form-control{padding:9px 10px}
.qk-tip{display:block;margin-top:5px;font-size:12px;color:var(--ink-soft)}
.qk-tip.is-ok{color:#2e9e5b;font-weight:700}
.qk-nota{font-size:12px;color:var(--ink-soft);background:var(--gray-50);border-radius:10px;
    padding:9px 11px;margin:0 0 12px;line-height:1.45}
.qk-nota i{color:var(--secondary);margin-right:5px}
.qk-lugar{position:relative}
.qk-lugar .ps-results{left:0;right:0;top:calc(100% - 2px)}
.qk-rep{display:flex;align-items:flex-start;gap:11px;border-radius:12px;padding:11px 12px;margin:0 0 12px;
    border:1px solid var(--line);background:var(--gray-50)}
.qk-rep.is-buena{border-color:#cfe8d6;background:#f4fbf6}
.qk-rep.is-mala{border-color:#f3c9c6;background:#fff6f5}
.qk-rep__nota{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
    font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:#fff;background:#1c1622}
.qk-rep.is-buena .qk-rep__nota{background:#2e9e5b}
.qk-rep.is-mala .qk-rep__nota{background:#e53935}
.qk-rep__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.qk-rep__txt strong{font-size:13.5px;color:var(--ink)}
.qk-rep__txt small{font-size:11.5px;color:var(--ink-soft)}
.qk-rep__falta{color:#c62828 !important;font-weight:700}
.qk-rep__ver{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--primary);text-decoration:none;white-space:nowrap}
.qk-ini{display:flex;align-items:flex-start;gap:10px;border:1px dashed var(--line);border-radius:12px;
    padding:11px 12px;margin:2px 0 14px;cursor:pointer}
.qk-ini input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--primary)}
.qk-ini span{display:flex;flex-direction:column;gap:2px}
.qk-ini strong{font-size:13.5px;color:var(--ink)}
.qk-ini small{font-size:11.5px;color:var(--ink-soft);line-height:1.4}
.qk-acciones{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.qk-acciones .btn{flex:0 1 auto}
@media(max-width:560px){
    .qk-fab{right:12px;bottom:72px;padding:12px 16px;font-size:13px}
    .qk-panel{right:8px;left:8px;bottom:8px;width:auto;max-height:88vh}
    .qk-fila{grid-template-columns:1fr 1fr}
    .qk-fila .form-group:first-child{grid-column:1 / -1}
    .qk-acciones .btn{flex:1 1 100%}
}

/* ---- Cómo quiere que la contacten (perfil de la modelo) ---- */
.vias-caja{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:4px 0 18px;background:var(--gray-50)}
.vias-caja__tit{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:11px}
.vias-caja__tit i{color:var(--secondary);margin-right:7px}
.vias{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.via{flex:1 1 130px;display:flex;align-items:center;gap:9px;cursor:pointer;background:#fff;
    border:2px solid var(--line);border-radius:12px;padding:11px 13px;transition:.15s}
.via:hover{border-color:var(--primary)}
.via.is-on{border-color:var(--primary);background:rgba(233,30,99,.05)}
.via input{position:absolute;opacity:0;pointer-events:none}
.via i{font-size:17px;color:var(--secondary);flex:0 0 auto}
.via.is-on i{color:var(--primary)}
.via span{font-size:13px;font-weight:700;color:var(--ink)}
.via-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;background:#fff;
    border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.via-check input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--primary)}
.via-check span{display:flex;flex-direction:column;gap:3px}
.via-check strong{font-size:13.5px;color:var(--ink)}
.via-check small{font-size:12px;color:var(--ink-soft);line-height:1.45}
.via-nota{font-size:12px;color:var(--ink-soft);margin:10px 0 0}
.via-nota i{color:var(--gold);margin-right:5px}

/* ---- Activación rápida por zona guardada (mapa de clientes) ---- */
.zq{margin:0 0 14px;padding:12px 14px;border:1px dashed var(--line);border-radius:14px;background:var(--gray-50)}
.zq__tit{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:9px}
.zq__tit i{color:var(--gold);margin-right:5px}
.zq__lista{display:flex;flex-wrap:wrap;gap:8px}
.zq__lista form{margin:0}
.zq__btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
    background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 15px;
    font-size:13px;font-weight:700;color:var(--ink);transition:.15s}
.zq__btn:hover{border-color:var(--primary);color:var(--primary)}
.zq__btn i{font-size:12px;color:var(--secondary)}
.zq__btn.is-on{border-color:#2e9e5b;background:#f4fbf6;color:#22754a}
.zq__btn.is-on i{color:#2e9e5b}
.zq__sin{width:16px;height:16px;border-radius:50%;background:var(--gold);color:#fff;
    font-size:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.zq__pie{margin:9px 0 0;font-size:11.5px;color:var(--ink-soft)}
.zq__pie a{color:var(--primary);font-weight:700}

/* ---- Buscador del catálogo dentro de cada renglón de zona ---- */
.zone-row__buscar{position:relative;flex:1 1 190px;min-width:0}
.zone-row__buscar .zone-row__name{width:100%}
.zone-row__buscar .ps-results{left:0;right:0;top:calc(100% + 3px)}
.zone-row__pin.is-ok{color:#2e9e5b}
.zone-ayuda{font-size:12px;color:var(--ink-soft);line-height:1.5;margin:10px 0 0;
    background:var(--gray-50);border-radius:10px;padding:9px 11px}
.zone-ayuda i{color:var(--secondary);margin-right:5px}

/* ============================================================
   BUSCADOR DE LUGARES — estilos globales
   Vivían sueltos dentro del <style> de cada mapa, así que en
   /modelo-panel/zonas el listado salía como texto corrido, sin
   tarjeta. Aquí los ve cualquier pantalla que monte el buscador.
   ============================================================ */
.ps-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:600;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 18px 44px rgba(0,0,0,.18);overflow:hidden;max-height:280px;overflow-y:auto}
.ps-results.is-open{display:block}
.ps-item{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--line);padding:11px 14px;cursor:pointer;font-family:inherit}
.ps-item:last-child{border-bottom:0}
.ps-item:hover,.ps-item.is-sel{background:var(--gray-50)}
.ps-item__ico{flex:0 0 auto;width:26px;text-align:center;color:var(--secondary);font-size:14px}
.ps-item__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.ps-item strong{font-size:14px;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-item small{font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-item small.es-motel{color:#b5581f;font-weight:700}
.ps-item__uso{flex:0 0 auto;font-size:10.5px;font-weight:800;color:#fff;background:var(--gold);
    border-radius:999px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.ps-empty{padding:13px 14px;font-size:13px;color:var(--ink-soft);line-height:1.5}

/* ============================================================
   RASTREO EN VIVO — la única entrada del menú que respira
   Es la pantalla donde algo pasa AHORA (quién está activo cerca).
   El resto del menú es archivo; esta es el pulso, y se nota.
   ============================================================ */
.dash-nav a.nav-radar{position:relative;overflow:hidden;isolation:isolate;
    background:linear-gradient(120deg, rgba(233,30,99,.07), rgba(108,92,231,.07));
    border:1px solid rgba(233,30,99,.18)}
.dash-nav a.nav-radar::before{content:'';position:absolute;inset:0;z-index:-1;
    background:radial-gradient(120px 40px at 12% 50%, rgba(233,30,99,.16), transparent 70%);
    animation:radarLatido 3.4s ease-in-out infinite}
@keyframes radarLatido{0%,100%{opacity:.35}50%{opacity:1}}
/* El icono es el que late de verdad: un punto de radar */
.dash-nav a.nav-radar>i{position:relative;color:var(--primary)}
.dash-nav a.nav-radar>i::after{content:'';position:absolute;top:-2px;right:-5px;
    width:7px;height:7px;border-radius:50%;background:#2e9e5b;
    box-shadow:0 0 0 0 rgba(46,158,91,.55);animation:radarPunto 2.2s ease-out infinite}
@keyframes radarPunto{0%{box-shadow:0 0 0 0 rgba(46,158,91,.5)}70%{box-shadow:0 0 0 7px rgba(46,158,91,0)}100%{box-shadow:0 0 0 0 rgba(46,158,91,0)}}
.dash-nav a.nav-radar:hover{border-color:rgba(233,30,99,.4)}
.dash-nav a.nav-radar.active{border-color:var(--primary)}
.dash-nav a.nav-radar.active::before{animation:none;opacity:0}
/* Quien pidió menos movimiento en su sistema, no ve nada moverse. */
@media (prefers-reduced-motion:reduce){
    .dash-nav a.nav-radar::before,.dash-nav a.nav-radar>i::after{animation:none}
}

/* ---- La palabra (Hotel / Colonia) al inicio de cada sugerencia ---- */
.ps-tipo{flex:0 0 74px;width:74px;box-sizing:border-box;overflow:hidden;display:inline-flex;align-items:center;gap:5px;
    font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-soft);background:var(--gray-50);border:1px solid var(--line);
    border-radius:7px;padding:4px 6px;justify-content:flex-start;line-height:1}
.ps-tipo i{font-size:11px;flex:0 0 auto}
.ps-tipo b{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-tipo--hotel{color:#b0356b;background:rgba(233,30,99,.07);border-color:rgba(233,30,99,.22)}
.ps-tipo--motel{color:#b5581f;background:rgba(181,88,31,.08);border-color:rgba(181,88,31,.25)}
.ps-tipo--hostal,.ps-tipo--posada,.ps-tipo--resort{color:#8a6d1f;background:rgba(201,162,75,.1);border-color:rgba(201,162,75,.3)}
.ps-tipo--colonia,.ps-tipo--ciudad{color:#5646c4;background:rgba(108,92,231,.08);border-color:rgba(108,92,231,.22)}
@media(max-width:420px){.ps-tipo{flex:0 0 62px;width:62px;font-size:9.5px;padding:4px 5px}.ps-tipo i{display:none}}

/* ============================================================
   MENSAJES DEL CHAT — links que se tocan, datos que se copian
   Llegaban como un párrafo apretado: el link no era clickeable
   y la CLABE había que transcribirla a mano.
   ============================================================ */
.chat-body{display:flex;flex-direction:column;gap:7px;white-space:pre-line;word-break:break-word}
.chat-linea{line-height:1.5}
.cp-caja{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    background:rgba(0,0,0,.05);border-radius:11px;padding:9px 11px;margin:1px 0}
.chat-msg.mine .cp-caja{background:rgba(255,255,255,.18)}
.cp-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 130px}
.cp-txt small{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.cp-txt code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;font-weight:700;
    letter-spacing:.04em;word-break:break-all;line-height:1.3}
.cp-caja--link{background:rgba(0,116,217,.1)}
.chat-msg.mine .cp-caja--link{background:rgba(255,255,255,.2)}
.cp-link{display:flex;align-items:center;gap:7px;flex:1 1 130px;min-width:0;
    text-decoration:none;color:#0074d9;font-weight:700;font-size:13.5px}
.chat-msg.mine .cp-link{color:#fff}
.cp-link i{font-size:11px;flex:0 0 auto;opacity:.8}
.cp-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-link:hover{text-decoration:underline}
.cp-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit;
    font-size:11.5px;font-weight:800;border-radius:999px;padding:6px 12px;
    border:1px solid rgba(0,0,0,.15);background:#fff;color:var(--ink)}
.cp-btn:hover{border-color:var(--primary);color:var(--primary)}
.cp-btn.is-ok{background:#2e9e5b;border-color:#2e9e5b;color:#fff}
.chat-msg.mine .cp-btn{background:rgba(255,255,255,.92);border-color:transparent;color:var(--primary)}
.chat-msg.mine .cp-btn.is-ok{background:#2e9e5b;color:#fff}

/* ---- Aviso de pago del cliente (lo ve la modelo) ---- */
.pago-aviso{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;
    padding:12px 14px;border-radius:14px;background:#f4fbf6;border:1px solid #cfe8d6}
.pago-aviso>i{font-size:20px;color:#2e9e5b;flex:0 0 auto}
.pago-aviso__txt{display:flex;flex-direction:column;gap:3px;flex:1 1 200px;min-width:0}
.pago-aviso__txt strong{font-size:14px;color:var(--ink)}
.pago-aviso__ref{font-size:12.5px;color:var(--ink-soft)}
.pago-aviso__ref code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;font-weight:800;
    color:#22754a;background:rgba(46,158,91,.12);border-radius:6px;padding:2px 7px;letter-spacing:.03em}
.pago-aviso__txt small{font-size:11.5px;color:var(--ink-soft)}

/* ---- «Ya realicé el pago» (lo usa el cliente) ---- */
.pago-yo{margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);
    display:flex;flex-direction:column;align-items:flex-start;gap:0}
.pago-yo__btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
    font-size:13px;font-weight:800;border-radius:999px;padding:10px 18px;
    border:2px solid #2e9e5b;background:#f4fbf6;color:#22754a}
.pago-yo__btn:hover,.pago-yo__btn.is-abierto{background:#2e9e5b;color:#fff}
.pago-yo__form{margin-top:11px;padding:13px 14px;border-radius:14px;
    background:var(--gray-50);border:1px solid var(--line)}
.pago-yo__form label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.pago-yo__fila{display:flex;gap:8px;flex-wrap:wrap}
.pago-yo__fila .form-control{flex:1 1 150px;min-width:0;margin:0}
.pago-yo__monto{flex:0 0 96px !important}
.pago-yo__form small{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-soft)}
@media(max-width:520px){
    .pago-yo__fila .form-control,.pago-yo__monto{flex:1 1 100% !important}
    .pago-yo__fila .btn{width:100%}
    .pago-aviso .btn{width:100%}
}

/* «Ya realicé el pago»: un solo toque, sin formulario */
.pago-yo__btn{width:auto;justify-content:center}
.pago-yo__btn:disabled{opacity:.7;cursor:default}
.pago-yo__pie{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-soft);line-height:1.5}
@media(max-width:520px){.pago-yo__btn{width:100%}}

/* ---- Que el aviso de pago NO pase desapercibido ----
   Llega abajo, después de un chat largo: sin movimiento se lee como
   un renglón más. Late despacio, como algo que está esperando. */
.pago-aviso{position:relative;animation:pagoLatido 2.6s ease-in-out infinite}
@keyframes pagoLatido{
    0%,100%{box-shadow:0 0 0 0 rgba(46,158,91,.30);border-color:#cfe8d6}
    50%{box-shadow:0 0 0 9px rgba(46,158,91,0);border-color:#2e9e5b}
}
/* La monedita cae y rebota: es lo que dice «llegó dinero» */
.pago-aviso>i{animation:pagoMoneda 2.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes pagoMoneda{
    0%,62%,100%{transform:translateY(0) rotate(0)}
    68%{transform:translateY(-6px) rotate(-9deg)}
    76%{transform:translateY(0) rotate(0)}
    82%{transform:translateY(-3px)}
    88%{transform:translateY(0)}
}
/* Un brillo cruza el botón, como diciendo «tócame» */
.pago-aviso .btn{position:relative;overflow:hidden}
.pago-aviso .btn::after{content:'';position:absolute;top:0;bottom:0;width:42px;left:-60px;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    animation:pagoBrillo 2.6s ease-in-out infinite}
@keyframes pagoBrillo{0%,55%{left:-60px}80%,100%{left:115%}}

/* Quien pidió menos movimiento en su sistema no ve nada moverse:
   se queda el borde verde fijo, que ya resalta por sí solo. */
@media (prefers-reduced-motion:reduce){
    .pago-aviso,.pago-aviso>i,.pago-aviso .btn::after{animation:none}
    .pago-aviso{border-color:#2e9e5b;box-shadow:0 0 0 3px rgba(46,158,91,.15)}
}

/* ============================================================
   CHAT MÁS COMPACTO
   Al 100% de zoom, cuatro mensajes cortos llenaban la pantalla:
   burbujas enormes, mucho aire entre ellas y la conversación
   encerrada en 58vh. Se aprieta todo sin volverlo ilegible.
   ============================================================ */
.chat-thread{gap:5px;padding:4px 0;max-height:min(66vh,560px)}
.chat-msg{max-width:min(68%,520px);padding:7px 12px;border-radius:14px;
    font-size:13.5px;line-height:1.42}
.chat-msg.mine{border-bottom-right-radius:4px}
.chat-msg.theirs{border-bottom-left-radius:4px}
/* La firma es dato de apoyo, no contenido: se hace chica y discreta */
.chat-meta{font-size:10px;opacity:.6;margin-top:2px}
.chat-body{gap:4px}
.chat-form{margin-top:10px;gap:8px}
.chat-form input{padding:9px 13px;font-size:13.5px}

/* Mensajes seguidos de la misma persona: se pegan y solo el último
   lleva firma. Así una conversación se lee como bloques, no como
   una lista de tarjetas sueltas. */
.chat-msg.mine + .chat-msg.mine,
.chat-msg.theirs + .chat-msg.theirs{margin-top:-2px}

/* El encabezado del hilo también sobraba de alto */
.chat-cab,.dash-main>.card>h2:first-child{margin-bottom:6px}

@media(min-width:900px){
    /* En escritorio hay ancho de sobra: la conversación se estira a lo
       largo en vez de a lo alto, y entran muchos más mensajes. */
    .chat-thread{max-height:min(70vh,640px)}
    .chat-msg{max-width:min(60%,480px)}
}

/* ============================================================
   TU PRÓXIMA CITA — lo primero del panel
   ============================================================ */
.prox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;
    padding:15px 18px;border-radius:16px;background:var(--surface);
    border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.05)}
.prox__izq{display:flex;flex-direction:column;gap:3px;flex:1 1 220px;min-width:0}
.prox__eti{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.prox__eti i{color:var(--primary);margin-right:5px}
.prox__quien{font-family:'Fraunces',serif;font-size:20px;color:var(--ink);line-height:1.15}
.prox__cuando{font-size:12.5px;color:var(--ink-soft)}
.prox__reloj{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
    background:var(--gray-50);border-radius:13px;padding:9px 16px;min-width:118px}
.prox__reloj small{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.prox__reloj b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:19px;
    font-weight:800;color:var(--ink);letter-spacing:.02em;line-height:1.2}
.prox__acciones{flex:0 0 auto}
/* En curso: la tarjeta late, igual que el aviso de pago */
.prox.is-curso{border-color:#2e9e5b;background:#f4fbf6;animation:proxLatido 2.8s ease-in-out infinite}
@keyframes proxLatido{0%,100%{box-shadow:0 0 0 0 rgba(46,158,91,.28)}50%{box-shadow:0 0 0 10px rgba(46,158,91,0)}}
.prox.is-curso .prox__reloj{background:rgba(46,158,91,.12)}
.prox.is-curso .prox__reloj b{color:#22754a}
/* El botón de arrancar brilla: es la acción del momento */
.prox__ir{position:relative;overflow:hidden}
.prox__ir::after{content:'';position:absolute;top:0;bottom:0;width:40px;left:-60px;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
    animation:proxBrillo 2.8s ease-in-out infinite}
@keyframes proxBrillo{0%,58%{left:-60px}82%,100%{left:115%}}
@media(max-width:640px){
    .prox{gap:11px}
    .prox__reloj{flex:1 1 auto}
    .prox__acciones{flex:1 1 100%}
    .prox__acciones .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
    .prox.is-curso,.prox__ir::after{animation:none}
}

/* ---- Cita en curso: lo que ve el cliente en su chat ---- */
.cita-vivo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    padding:12px 14px;border-radius:13px;background:rgba(46,158,91,.10);
    border:1px solid rgba(46,158,91,.30)}
.cita-vivo__cab{display:flex;align-items:center;gap:8px}
.cita-vivo__punto{width:9px;height:9px;border-radius:50%;background:#2e9e5b;flex:0 0 auto;
    box-shadow:0 0 0 0 rgba(46,158,91,.5);animation:citaPulso 1.8s ease-out infinite}
@keyframes citaPulso{0%{box-shadow:0 0 0 0 rgba(46,158,91,.5)}70%{box-shadow:0 0 0 8px rgba(46,158,91,0)}100%{box-shadow:0 0 0 0 rgba(46,158,91,0)}}
.cita-vivo__cab strong{font-size:14px;color:#22754a}
.cita-vivo__horas{font-size:12px;color:var(--ink-soft)}
.cita-vivo__reloj{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:26px;font-weight:800;
    color:#22754a;letter-spacing:.03em;line-height:1.1}
.cita-vivo__reloj.is-cero{color:var(--ink-soft)}
.cita-vivo.is-fin{background:var(--gray-50);border-color:var(--line)}
.cita-vivo.is-fin .cita-vivo__punto{background:var(--ink-soft);animation:none}
.cita-vivo.is-fin .cita-vivo__cab strong{color:var(--ink)}
.cita-vivo__btn{display:inline-flex;align-items:center;gap:7px;margin-top:3px;text-decoration:none;
    background:var(--gold);color:#fff;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:800}
.cita-vivo__btn:hover{filter:brightness(1.07)}
.chat-msg.mine .cita-vivo{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
.chat-msg.mine .cita-vivo__cab strong,.chat-msg.mine .cita-vivo__reloj,
.chat-msg.mine .cita-vivo__horas{color:#fff}
@media (prefers-reduced-motion:reduce){.cita-vivo__punto{animation:none}}

/* ---- Confirmar el pago restante al iniciar la cita ---- */
.in-cobro{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:0 0 10px;
    padding:12px 14px;border-radius:13px;border:2px solid var(--line);background:var(--surface)}
.in-cobro:hover{border-color:#2e9e5b}
.in-cobro.is-on{border-color:#2e9e5b;background:#f4fbf6}
.in-cobro input{margin-top:2px;flex:0 0 auto;width:19px;height:19px;accent-color:#2e9e5b}
.in-cobro__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.in-cobro__txt strong{font-size:14.5px;color:var(--ink)}
.in-cobro.is-on .in-cobro__txt strong{color:#22754a}
.in-cobro__txt small{font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.in-monto{margin:0 0 12px}
.in-monto label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.in-monto .form-control{margin:0;max-width:190px;font-size:16px;font-weight:700}

/* Detalle de la cita iniciada: cada dato en su renglón */
.cita-vivo__datos{display:flex;flex-direction:column;gap:2px}
.cita-vivo__datos small{font-size:12px;color:var(--ink-soft);line-height:1.45}
.chat-msg.mine .cita-vivo__datos small{color:#fff;opacity:.92}

/* ============================================================
   MENSAJES DE SISTEMA — los que genera Bliss, no una persona
   Se veían como un mensaje gris más, y son los pasos del trato:
   cada uno lleva su color y una barra al costado.
   ============================================================ */
.chat-msg.sys{border-left:4px solid var(--line);max-width:min(80%,560px)}
.chat-msg.sys.mine{border-left:0;border-right:4px solid rgba(255,255,255,.5)}
.chat-msg.sys .chat-body>.chat-linea:first-child{font-weight:800;font-size:14px;margin-bottom:2px}
/* Datos para pagar: azul, como el botón de tarjeta */
.chat-msg.sys--pago{border-left-color:#0074d9;background:rgba(0,116,217,.07)}
.chat-msg.sys--pago.mine{background:var(--primary)}
/* Anticipo transferido y «ya pagué»: verde dinero */
.chat-msg.sys--anticipo,.chat-msg.sys--pagado{border-left-color:#2e9e5b;background:rgba(46,158,91,.09)}
.chat-msg.sys--anticipo.mine,.chat-msg.sys--pagado.mine{background:var(--primary)}
.chat-msg.sys.theirs .chat-body>.chat-linea:first-child{color:var(--ink)}
.cita-vivo__nota{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-soft);font-style:italic}
.chat-msg.mine .cita-vivo__nota{color:#fff;opacity:.85}

/* ══════════ Barra de avance del panel (.avance) ══════════
   El camino del perfil de un vistazo: lo hecho, dónde va y lo que falta.
   En celular se desliza de lado; apretar 8 pasos en 360px no se lee. */
.avance{background:#fff;border:1px solid #e7ddd2;border-radius:18px;padding:1.1rem 1.2rem 1.25rem;margin-bottom:1rem}
.avance__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}
.avance__titulo{font-family:'Fraunces',Georgia,serif;font-size:1.02rem;margin:0;color:#1c1622}
.avance__cuenta{font:600 .78rem/1 'Manrope',sans-serif;color:#8a7f74;background:#f4efe8;border-radius:999px;padding:.35rem .6rem;white-space:nowrap}
.avance__cuenta.is-full{color:#fff;background:#2e9e6b}
.avance__barra{height:5px;border-radius:999px;background:#efe7dd;overflow:hidden;margin-bottom:1rem}
.avance__relleno{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#c9a24b,#e91e63);transition:width .7s cubic-bezier(.22,1,.36,1)}

.avance__pasos{display:flex;gap:0;list-style:none;margin:0;padding:0 0 .2rem;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.avance__pasos::-webkit-scrollbar{display:none}
.avance__paso{position:relative;flex:1 0 82px;min-width:82px;scroll-snap-align:center}
/* La línea que une cada bola con la anterior. Va detrás de las bolas. */
.avance__paso::before{content:'';position:absolute;top:19px;right:50%;left:-50%;height:2px;background:#e7ddd2;z-index:0}
.avance__paso:first-child::before{display:none}
.avance__paso.is-listo::before,.avance__paso.is-ahora::before{background:#c9a24b}

.avance__caja{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:.4rem;text-align:center;text-decoration:none;color:inherit;padding:0 .2rem}
a.avance__caja:hover .avance__bola{transform:translateY(-2px)}
a.avance__caja:hover .avance__txt strong{color:#e91e63}
.avance__bola{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#fff;border:2px solid #e7ddd2;color:#b3a89c;font-size:.9rem;
  transition:transform .2s ease,box-shadow .2s ease}
.avance__txt{display:block;line-height:1.25}
.avance__txt strong{display:block;font:600 .74rem/1.2 'Manrope',sans-serif;color:#1c1622;transition:color .2s ease}
.avance__txt small{display:block;font-size:.66rem;color:#a1958a;margin-top:.12rem}

/* Cumplido: dorado sólido, con el palomeo. */
.avance__paso.is-listo .avance__bola{background:#c9a24b;border-color:#c9a24b;color:#fff}
/* En curso: rosa y latiendo, para que el ojo caiga ahí primero. */
.avance__paso.is-ahora .avance__bola{background:#e91e63;border-color:#e91e63;color:#fff;
  box-shadow:0 0 0 0 rgba(233,30,99,.45);animation:avanceLatido 2.2s ease-out infinite}
.avance__paso.is-ahora .avance__txt strong{color:#e91e63}
.avance__paso.is-ahora .avance__txt small{color:#e91e63;opacity:.8}
/* Pendiente: gris, sin peso visual. */
.avance__paso.is-falta .avance__bola{border-style:dashed}
.avance__paso.is-falta .avance__txt strong{color:#8a7f74;font-weight:500}

@keyframes avanceLatido{
  0%{box-shadow:0 0 0 0 rgba(233,30,99,.45)}
  70%{box-shadow:0 0 0 9px rgba(233,30,99,0)}
  100%{box-shadow:0 0 0 0 rgba(233,30,99,0)}
}
@media (prefers-reduced-motion:reduce){
  .avance__paso.is-ahora .avance__bola{animation:none}
  .avance__relleno{transition:none}
}
@media (max-width:600px){
  .avance{padding:.9rem .9rem 1rem;border-radius:16px}
  .avance__paso{flex:0 0 76px;min-width:76px}
  .avance__bola{width:34px;height:34px;font-size:.8rem}
  .avance__paso::before{top:17px}
}
.avance__sub{margin:.15rem 0 0;font:500 .74rem/1.3 'Manrope',sans-serif;color:#8a7f74}

/* ── Línea temporal de la cita: círculo grande, TÍTULO, estado y fecha ──
   Se lee de un golpe como una línea de tiempo, no como una lista. */
.avance__pasos{padding-top:.15rem}
.avance__paso{flex:1 0 108px;min-width:108px}
.avance__paso::before{top:23px;height:3px;background:#eceff4}
.avance__caja{gap:.55rem}
.avance__bola{width:46px;height:46px;font-size:1rem;border-width:2px;
  background:#fff;border-color:#e3e8ef;color:#c4cbd6}
.avance__txt strong{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:#b6bcc7}
.avance__estado{font-size:.76rem;font-weight:600;color:#b6bcc7;margin-top:.1rem}
.avance__fecha{font-size:.74rem;font-weight:700;color:#1c1622;margin-top:.05rem}
.avance__hora{font-size:.68rem;color:#a1958a;margin-top:.02rem}

/* Cumplido: dorado, con palomita. */
.avance__paso.is-listo .avance__bola{background:#fff;border-color:#c9a24b;color:#c9a24b}
.avance__paso.is-listo .avance__txt strong{color:#1c1622}
.avance__paso.is-listo .avance__estado{color:#8a7f74}
/* En curso: rosa, latiendo, para que el ojo caiga ahí primero. */
.avance__paso.is-ahora .avance__bola{background:#e91e63;border-color:#e91e63;color:#fff}
.avance__paso.is-ahora .avance__txt strong{color:#e91e63}
.avance__paso.is-ahora .avance__estado{color:#e91e63}
/* Pendiente: gris claro, sin peso visual. */
.avance__paso.is-falta .avance__bola{border-style:solid}

@media (max-width:600px){
  .avance__paso{flex:0 0 100px;min-width:100px}
  .avance__bola{width:42px;height:42px;font-size:.92rem}
  .avance__paso::before{top:21px}
}

/* El menú lateral quedaba pegado arriba y más alto que la pantalla, así que
   sus últimas opciones no se podían alcanzar: sticky no baja.
   TODO esto vive solo en escritorio (min-width:901px). En celular el MISMO
   elemento es el cajón del ☰: lleva position:fixed y su propio scroll, y
   tocárselo desde aquí lo dejaba abierto sin poder cerrarse. */
@media (min-width:901px){
  .dash-nav{max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin}
  .dash-nav::-webkit-scrollbar{width:6px}
  .dash-nav::-webkit-scrollbar-thumb{background:#e0d6ca;border-radius:99px}
}

/* Botón del paso: solo aparece donde hay algo que hacer. */
.avance__form{margin:0}
.avance__accion{display:inline-block;margin-top:.35rem;padding:.28rem .6rem;border:0;
  border-radius:999px;background:#e91e63;color:#fff;cursor:pointer;text-decoration:none;
  font:700 .68rem/1 'Manrope',sans-serif;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(233,30,99,.28);transition:transform .15s ease,filter .15s ease}
.avance__accion:hover{transform:translateY(-1px);filter:brightness(1.06)}
.avance__paso.is-falta .avance__accion{background:#f4efe8;color:#8a7f74;box-shadow:none}

/* El paso de incidencia no es un pendiente más: es una alarma. */
.avance__paso.is-ahora .avance__bola.es-alerta,
.avance__paso .avance__bola.es-alerta{background:#fff3f3;border-color:#e0342b;color:#e0342b;animation:none}
.avance__paso.is-alerta .avance__txt strong,
.avance__paso.is-alerta .avance__estado{color:#e0342b}
.avance__paso.is-alerta .avance__accion{background:#e0342b;box-shadow:0 2px 8px rgba(224,52,43,.28)}

/* Cancelar cita: se abre solo si ella lo pide, y pide motivo antes de nada. */
.avance__top-der{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.avance__cancel{position:relative}
.avance__cancel>summary{list-style:none;cursor:pointer;font:600 .72rem/1 'Manrope',sans-serif;
  color:#a1958a;border:1px solid #e7ddd2;border-radius:999px;padding:.38rem .7rem;white-space:nowrap}
.avance__cancel>summary::-webkit-details-marker{display:none}
.avance__cancel>summary:hover{color:#e0342b;border-color:#e0342b}
.avance__cancel[open]>summary{color:#e0342b;border-color:#e0342b;background:#fff3f3}
.avance__cancel-form{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(320px,86vw);
  background:#fff;border:1px solid #e7ddd2;border-radius:14px;padding:.9rem;
  box-shadow:0 18px 40px rgba(28,22,34,.18);display:flex;flex-direction:column;gap:.5rem}
.avance__cancel-form>label:first-of-type{font:700 .74rem/1 'Manrope',sans-serif;color:#1c1622}
.avance__mot{display:flex;gap:.5rem;align-items:flex-start;cursor:pointer;
  border:1px solid #efe7dd;border-radius:10px;padding:.5rem}
.avance__mot:hover{border-color:#e91e63}
.avance__mot strong{display:block;font:600 .76rem/1.2 'Manrope',sans-serif;color:#1c1622}
.avance__mot small{display:block;font-size:.68rem;color:#8a7f74;margin-top:.15rem;line-height:1.3}
.avance__cancel-ok{border:0;border-radius:999px;background:#e0342b;color:#fff;cursor:pointer;
  padding:.5rem;font:700 .76rem/1 'Manrope',sans-serif}

/* Lo que ve el cliente cuando ella canceló. */
.cancel-resp{margin-top:.8rem;border:1px solid #f3c9c5;background:#fff6f5;border-radius:14px;padding:.85rem}
.cancel-resp__tit{margin:0 0 .6rem;font:700 .84rem/1.3 'Manrope',sans-serif;color:#c0271f}
.cancel-resp__btns{display:flex;flex-wrap:wrap;gap:.5rem}
.cancel-resp__ok,.cancel-resp__alt{border:0;border-radius:999px;cursor:pointer;
  padding:.55rem .9rem;font:700 .78rem/1 'Manrope',sans-serif}
.cancel-resp__ok{background:#2e9e6b;color:#fff}
.cancel-resp__alt{background:#fff;color:#1c1622;border:1px solid #e7ddd2}
.cancel-resp__pie{display:block;margin-top:.55rem;font-size:.7rem;color:#8a7f74;line-height:1.35}

/* Cancelar cita en rojo pleno: en gris se leía como un enlace secundario y
   nadie lo encontraba cuando de verdad tenía que cancelar. */
.avance__cancel>summary{background:#e0342b;border-color:#e0342b;color:#fff;font-weight:700;
  box-shadow:0 2px 8px rgba(224,52,43,.3)}
.avance__cancel>summary:hover{background:#c0271f;border-color:#c0271f;color:#fff}
.avance__cancel[open]>summary{background:#c0271f;border-color:#c0271f;color:#fff}

/* Rastreo Modelos: sin menú lateral. El mapa necesita todo el ancho y el
   sidebar solo empujaba la lista de resultados a media pantalla. */
/* Solo en escritorio: ahí el menú es una columna que le roba 240px al mapa.
   En celular NO se esconde, porque ahí ese mismo elemento es el cajón del ☰ y
   sin él no habría forma de salir de esta vista. */
@media (min-width:901px){
  .dash-layout--mapa{grid-template-columns:1fr}
  .dash-layout--mapa>.dash-nav{display:none}
}
.mapa-volver{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  text-decoration:none;font:600 .78rem/1 'Manrope',sans-serif;color:#8a7f74;
  border:1px solid #e7ddd2;border-radius:999px;padding:.42rem .8rem;background:#fff}
.mapa-volver:hover{color:#e91e63;border-color:#e91e63}

/* Alta manual de perfiles en el admin. Cerrado por defecto: es una acción
   ocasional y abierto le robaba la pantalla a la lista, que es lo de diario. */
.nuevo-perfil{margin-top:.8rem}
.nuevo-perfil>summary{list-style:none;display:inline-flex;align-items:center;gap:.45rem;
  cursor:pointer;background:#e91e63;color:#fff;border-radius:999px;padding:.5rem .95rem;
  font:700 .8rem/1 'Manrope',sans-serif;box-shadow:0 2px 10px rgba(233,30,99,.3)}
.nuevo-perfil>summary::-webkit-details-marker{display:none}
.nuevo-perfil>summary:hover{background:#c2185b}
.nuevo-perfil__form{margin-top:.7rem;background:#fff;border:1px solid #e7ddd2;border-radius:16px;
  padding:1rem;display:flex;flex-direction:column;gap:.7rem;max-width:640px}
.np-fila{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.np-fila label{display:block;font:600 .74rem/1.4 'Manrope',sans-serif;color:#1c1622}
.np-fila .form-control{margin-top:.2rem}
.np-pie{margin:0;font-size:.72rem;color:#8a7f74;line-height:1.4}
@media (max-width:600px){ .np-fila{grid-template-columns:1fr} }

/* Cada punto pendiente del avance es un enlace al campo que lo resuelve. */
.pp-list .pp-ir{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:inherit;
  border-bottom:1px dashed rgba(233,30,99,.45)}
.pp-list .pp-ir:hover{color:#e91e63;border-bottom-color:#e91e63}
.pp-ir__flecha{font-size:.62rem;opacity:.5;transition:transform .18s ease}
.pp-list .pp-ir:hover .pp-ir__flecha{opacity:1;transform:translateX(2px)}

/* El campo al que acaba de llegar: parpadea para que se vea cuál es. */
.campo-guiado{animation:campoGuia 2.1s ease-out 1;border-color:#e91e63!important}
@keyframes campoGuia{
  0%,100%{box-shadow:0 0 0 0 rgba(233,30,99,0)}
  15%,55%{box-shadow:0 0 0 4px rgba(233,30,99,.22)}
}
@media (prefers-reduced-motion:reduce){ .campo-guiado{animation:none} }

/* Encabezados de grupo del menú lateral. Separan lo que ella configura de lo
   que la mantiene segura: en una emergencia no se lee una lista de quince. */
.nav-grupo{margin:.9rem 0 .35rem;padding:0 .35rem;font:800 .62rem/1 'Manrope',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#b3a89c}
.nav-grupo:first-of-type{margin-top:.5rem}
.nav-grupo--seg{color:#2e9e6b;display:flex;align-items:center;gap:.35rem}
.nav-grupo--seg i{font-size:.7rem}

/* Estado del perfil y puerta de envío a revisión. */
.pp-estado{margin:.7rem 0 .2rem;display:inline-flex;align-items:center;gap:.4rem;
  font:700 .74rem/1 'Manrope',sans-serif;border-radius:999px;padding:.4rem .75rem}
.pp-estado--draft{background:#f4efe8;color:#8a7f74}
.pp-estado--pending{background:#fff6e5;color:#9a7420}
.pp-estado--approved{background:#e8f7ef;color:#1f7a52}
.pp-estado--rejected{background:#fff3f3;color:#c0271f}
.pp-enviar{margin-top:.6rem}
.pp-falta{margin:.5rem 0 0;font-size:.74rem;color:#8a7f74;line-height:1.45}

/* Redes del sitio en el pie. Solo salen las que el admin configuró. */
.foot-redes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.foot-redes a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.09);color:#fff;text-decoration:none;font-size:.95rem;
  transition:background .18s ease,transform .18s ease}
.foot-redes a:hover{background:#e91e63;transform:translateY(-2px)}

/* Alta completa desde el admin: campos anchos, categorías y fotos. */
.np-ancho{display:block;font:600 .74rem/1.4 'Manrope',sans-serif;color:#1c1622}
.np-ancho .form-control,.np-ancho textarea{margin-top:.2rem}
.np-lbl{display:block;font:600 .74rem/1.4 'Manrope',sans-serif;color:#1c1622;margin-bottom:.3rem}
.np-cats{display:flex;flex-wrap:wrap;gap:.4rem}
.np-cat{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #e7ddd2;border-radius:999px;
  padding:.32rem .6rem;font:500 .74rem/1 'Manrope',sans-serif;cursor:pointer;background:#fff}
.np-cat:hover{border-color:#e91e63}
.np-cat input:checked+span{color:#e91e63;font-weight:700}
.np-hint{display:block;margin-top:.25rem;font-size:.68rem;color:#8a7f74;line-height:1.4;font-weight:400}

/* ===== Asistente de captura del perfil (.wz) =====
   Pasos cortos en un modal, cada uno se guarda solo. Llenar catorce campos de
   un jalón es donde la gente abandona. */
.wz-continuar{display:flex;align-items:center;gap:.75rem;width:100%;margin:.9rem 0 0;
  border:0;border-radius:16px;cursor:pointer;text-align:left;padding:.85rem 1rem;
  background:linear-gradient(100deg,#e91e63,#c9a24b);color:#fff;
  box-shadow:0 6px 18px rgba(233,30,99,.28);transition:transform .18s ease,box-shadow .18s ease}
.wz-continuar:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(233,30,99,.34)}
.wz-continuar--ok{background:linear-gradient(100deg,#2e9e6b,#c9a24b);box-shadow:0 6px 18px rgba(46,158,107,.26)}
.wz-continuar__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.2);font-size:1rem;flex-shrink:0}
.wz-continuar__txt{flex:1;min-width:0}
.wz-continuar__txt strong{display:block;font:800 .92rem/1.2 'Manrope',sans-serif}
.wz-continuar__txt small{display:block;font-size:.74rem;opacity:.9;margin-top:.12rem}

.wz-fondo{position:fixed;inset:0;z-index:10070;background:rgba(28,22,34,.62);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem}
.wz-caja{background:#fff;border-radius:20px;width:min(520px,100%);max-height:88vh;overflow-y:auto;
  padding:1.1rem 1.2rem 1.4rem;box-shadow:0 24px 60px rgba(28,22,34,.35)}
.wz-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.wz-puntos{display:flex;gap:.35rem;flex-wrap:wrap}
.wz-punto{width:30px;height:30px;border-radius:50%;border:2px solid #e7ddd2;background:#fff;
  color:#b3a89c;cursor:pointer;font-size:.7rem;display:grid;place-items:center;
  transition:transform .15s ease}
.wz-punto:hover{transform:translateY(-1px)}
.wz-punto.is-listo{background:#c9a24b;border-color:#c9a24b;color:#fff}
.wz-punto.is-aqui{background:#e91e63;border-color:#e91e63;color:#fff}
.wz-x{width:32px;height:32px;border:0;border-radius:50%;background:#f4efe8;color:#1c1622;
  cursor:pointer;font-size:.95rem;flex-shrink:0}
.wz-cuenta{margin:.5rem 0 .2rem;font:600 .72rem/1 'Manrope',sans-serif;color:#8a7f74}
.wz-error{background:#fff3f3;border:1px solid #f3c9c5;border-radius:12px;padding:.6rem .75rem;margin:.6rem 0}
.wz-error p{margin:0;font-size:.78rem;color:#c0271f}

.wz-paso h3{font-family:'Fraunces',Georgia,serif;font-size:1.15rem;margin:.7rem 0 .3rem;color:#1c1622}
.wz-paso label{display:block;margin-top:.75rem;font:600 .78rem/1.4 'Manrope',sans-serif;color:#1c1622}
.wz-paso label .form-control,.wz-paso label textarea{margin-top:.25rem}
.wz-paso label small{display:block;margin-top:.25rem;font-size:.7rem;color:#8a7f74;font-weight:400;line-height:1.4}
.wz-ayuda{margin:.2rem 0 .4rem;font-size:.78rem;color:#8a7f74;line-height:1.45}
.wz-cats{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.wz-cat{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #e7ddd2;border-radius:999px;
  padding:.36rem .68rem;font:500 .78rem/1 'Manrope',sans-serif;cursor:pointer;background:#fff;margin:0}
.wz-cat:hover{border-color:#e91e63}
.wz-cat input:checked+span{color:#e91e63;font-weight:700}
.wz-ok{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:100%;
  margin-top:1.1rem;border:0;border-radius:999px;background:#e91e63;color:#fff;cursor:pointer;
  padding:.75rem 1rem;font:800 .86rem/1 'Manrope',sans-serif;text-decoration:none;
  box-shadow:0 4px 14px rgba(233,30,99,.3)}
.wz-ok:hover{background:#c2185b;color:#fff}
.wz-salta{display:block;width:100%;margin-top:.5rem;border:0;background:none;cursor:pointer;
  color:#8a7f74;font:600 .76rem/1 'Manrope',sans-serif;padding:.5rem}
.wz-salta:hover{color:#e91e63}

@media (max-width:600px){
  .wz-caja{border-radius:16px;padding:.9rem 1rem 1.2rem;max-height:92vh}
  .wz-punto{width:27px;height:27px;font-size:.64rem}
}

/* Alpine marca con [x-cloak] lo que NO debe verse hasta que él arranca, pero
   la regla que lo esconde nunca existió: por eso los modales y menús aparecían
   un instante al cargar y luego se iban solos. Va al final y con !important
   porque compite con reglas propias como .wz-fondo{display:flex}. */
[x-cloak]{display:none!important}

/* Etiquetas y controles nuevos del asistente. */
.wz-req{display:inline-block;margin-left:.35rem;font:700 .6rem/1 'Manrope',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;color:#e91e63;background:#fdeaf1;
  border-radius:999px;padding:.22rem .45rem;vertical-align:middle}
.wz-lbl{display:block;margin-top:.9rem;font:600 .78rem/1.4 'Manrope',sans-serif;color:#1c1622}
.wz-corto{color:#e0342b!important;font-weight:700}
.wz-vias{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.45rem}
.wz-via{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #e7ddd2;border-radius:12px;
  padding:.5rem .75rem;cursor:pointer;background:#fff;margin:0;
  font:600 .78rem/1 'Manrope',sans-serif;color:#1c1622}
.wz-via input{position:absolute;opacity:0;width:0;height:0}
.wz-via:hover{border-color:#e91e63}
.wz-via.is-on{border-color:#e91e63;background:#fdeaf1;color:#e91e63}
.wz-check{display:flex!important;align-items:center;gap:.5rem;margin-top:.8rem;
  font:600 .78rem/1.3 'Manrope',sans-serif;cursor:pointer}
.wz-check input{width:18px;height:18px;accent-color:#e91e63;margin:0;flex-shrink:0}
.wz-cat.is-on{border-color:#e91e63;background:#fdeaf1}
.wz-cat.is-on span{color:#e91e63;font-weight:700}
.wz-salta--link{display:block;text-align:center;text-decoration:underline}

/* Días de la semana y rango de horas, dentro del asistente. */
.wz-dias{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}
.wz-dia{margin:0;cursor:pointer;border:1px solid #e7ddd2;border-radius:10px;background:#fff;
  padding:.5rem .1rem;flex:1 1 44px;min-width:44px;text-align:center;
  font:700 .74rem/1 'Manrope',sans-serif;color:#8a7f74}
.wz-dia input{position:absolute;opacity:0;width:0;height:0}
.wz-dia:hover{border-color:#e91e63}
.wz-dia.is-on{border-color:#e91e63;background:#fdeaf1;color:#e91e63}
.wz-horas{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.45rem}
.wz-horas label{margin-top:0}
.wz-nota{margin-top:.6rem;font-size:.7rem}

/* Modalidad y planes del último paso. */
.wz-modos{display:flex;flex-direction:column;gap:.4rem;margin-top:.45rem}
.wz-modo{margin:0;cursor:pointer;border:1px solid #e7ddd2;border-radius:12px;background:#fff;
  padding:.6rem .8rem;font:600 .8rem/1 'Manrope',sans-serif;color:#1c1622}
.wz-modo input{position:absolute;opacity:0;width:0;height:0}
.wz-modo:hover{border-color:#e91e63}
.wz-modo.is-on{border-color:#e91e63;background:#fdeaf1;color:#e91e63}
.wz-planes{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.wz-plan{display:flex;align-items:center;gap:.6rem;border:1px solid #e7ddd2;border-radius:14px;
  padding:.65rem .8rem;background:#fff;margin:0}
.wz-plan__nom{flex:1;font:700 .82rem/1.2 'Manrope',sans-serif;color:#1c1622}
.wz-plan__precio{font:800 .95rem/1 'Fraunces',Georgia,serif;color:#c9a24b;white-space:nowrap}
.wz-plan__precio small{font:500 .66rem/1 'Manrope',sans-serif;color:#8a7f74}
.wz-plan__btn{border:0;border-radius:999px;background:#e91e63;color:#fff;cursor:pointer;
  padding:.45rem .8rem;font:700 .74rem/1 'Manrope',sans-serif;white-space:nowrap}
.wz-plan__btn:hover{background:#c2185b}
.wz-wa{border:1px solid #e7ddd2;border-radius:12px;padding:.7rem .8rem;align-items:flex-start!important}
.wz-wa.is-on{border-color:#2e9e6b;background:#e8f7ef}
.wz-wa small{color:#8a7f74;font-weight:400;line-height:1.4}

/* Renglones de zona dentro del asistente. */
.wz-zona{display:grid;grid-template-columns:1fr 74px 32px;gap:.4rem;align-items:start;
  margin-top:.5rem;position:relative}
.wz-zona__busca{min-width:0}
/* La lista se ancla al RENGLÓN completo, no al campo: en 360px la columna del
   campo es angosta y los nombres salían cortados con puntos suspensivos. */
.wz-zona .ps-res{position:absolute;top:100%;left:0;right:0;z-index:40}
.wz-zona__min{text-align:center}
.wz-zona__x{border:0;background:#f4efe8;color:#8a7f74;border-radius:10px;cursor:pointer;
  height:42px;font-size:.9rem}
.wz-zona__x:hover{background:#fff3f3;color:#e0342b}
.wz-agrega{margin-top:.55rem;border:1px dashed #e7ddd2;background:#fff;border-radius:12px;
  width:100%;padding:.55rem;cursor:pointer;color:#8a7f74;
  font:700 .76rem/1 'Manrope',sans-serif}
.wz-agrega:hover{border-color:#e91e63;color:#e91e63}
@media (max-width:600px){ .wz-zona{grid-template-columns:1fr 64px 30px} }

/* La lista de resultados dentro del modal iba transparente y se leía encima
   del botón de abajo. Necesita fondo propio, sombra y quedar por arriba. */
.wz-zona__busca .ps-res{background:#fff;border:1px solid #e7ddd2;border-radius:12px;
  box-shadow:0 14px 32px rgba(28,22,34,.18);max-height:240px;overflow-y:auto;z-index:60}
.wz-zona__busca .ps-res:empty{display:none;border:0;box-shadow:none}

/* Banda de suplantación: fija abajo, imposible de perder de vista. */
.suplanta{position:fixed;left:0;right:0;bottom:0;z-index:10090;display:flex;
  align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  background:#1c1622;color:#fff;padding:.7rem 1rem;
  font:600 .82rem/1.3 'Manrope',sans-serif;box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.suplanta strong{color:#e6c76e}
.suplanta form{margin:0}
.suplanta button{border:0;border-radius:999px;background:#e91e63;color:#fff;cursor:pointer;
  padding:.45rem .9rem;font:700 .78rem/1 'Manrope',sans-serif}
.suplanta button:hover{background:#c2185b}
body:has(.suplanta){padding-bottom:56px}

/* Botón de captura en el panel de acciones del admin. */
.act-form{margin:0}
.act-btn--full{width:100%;text-align:left;border:0;font:inherit;cursor:pointer}
.act-btn.is-capturar{background:#fdeaf1;border:1px solid #e91e63}
.act-btn.is-capturar strong{color:#e91e63}

/* Selector de ciudad del catálogo, en el alta del admin. */
.np-ciudad{position:relative;display:block}
.np-ciudad .ps-res{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid #e7ddd2;border-radius:12px;
  box-shadow:0 14px 32px rgba(28,22,34,.18);max-height:240px;overflow-y:auto}
.np-ciudad .ps-res:empty{display:none;border:0;box-shadow:none}

/* Los nombres largos se acomodan en dos renglones en vez de cortarse. */
.wz-zona .ps-res *{white-space:normal!important;text-overflow:clip!important;overflow:visible!important}
.wz-zona .ps-res{padding:.2rem}

/* Selector de ciudad del paso 2: la lista ocupa todo el ancho del modal. */
.wz-ciudad{position:relative;display:block}
.wz-ciudad .ps-res{position:absolute;top:100%;left:0;right:0;z-index:60;
  background:#fff;border:1px solid #e7ddd2;border-radius:12px;padding:.2rem;
  box-shadow:0 14px 32px rgba(28,22,34,.18);max-height:240px;overflow-y:auto}
.wz-ciudad .ps-res:empty{display:none;border:0;box-shadow:none;padding:0}
.wz-ciudad .ps-res *{white-space:normal!important;text-overflow:clip!important}

/* Paso opcional: se ve distinto para que no parezca un pendiente. */
.wz-punto.is-opc{border-style:dashed;border-color:#c9a24b;color:#c9a24b}
.wz-opc{display:inline-block;margin-left:.4rem;font:700 .58rem/1 'Manrope',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;color:#8a7f74;background:#f4efe8;
  border-radius:999px;padding:.22rem .45rem;vertical-align:middle}
.wz-mons{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.wz-mon{display:inline-flex;align-items:center;gap:.35rem;background:#e8f7ef;color:#1f7a52;
  border-radius:999px;padding:.32rem .6rem;font:600 .74rem/1 'Manrope',sans-serif}

/* Un solo plan a la vista: el que va con la modalidad elegida. */
.wz-plan-uno{border:1px solid #c9a24b;border-radius:16px;padding:.9rem 1rem;margin-top:.5rem;
  background:linear-gradient(180deg,#fffdf8,#fff)}
.wz-plan-uno__top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.wz-plan-uno__nom{font:800 .92rem/1.2 'Manrope',sans-serif;color:#1c1622}
.wz-plan-uno__off{background:#e91e63;color:#fff;border-radius:999px;padding:.22rem .5rem;
  font:800 .68rem/1 'Manrope',sans-serif}
.wz-plan-uno__precio{margin-top:.35rem;font:800 1.6rem/1 'Fraunces',Georgia,serif;color:#c9a24b}
.wz-plan-uno__precio s{font-size:.95rem;color:#a1958a;margin-right:.35rem;font-weight:500}
.wz-plan-uno__precio small{font:500 .74rem/1 'Manrope',sans-serif;color:#8a7f74}
.wz-plan-uno__hasta{margin:.4rem 0 0;font-size:.72rem;color:#8a7f74;line-height:1.4}

/* Fichas de proveedores en el admin. */
.prov-card{margin-bottom:.8rem}
.prov-card__top{display:flex;align-items:center;gap:.8rem}
.prov-card__foto{width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0}
.prov-card__foto--vacia{display:grid;place-items:center;background:#f4efe8;color:#b3a89c;font-size:1.1rem}
.prov-card__datos{flex:1;min-width:0}
.prov-card__datos strong{display:block;font:700 .92rem/1.2 'Manrope',sans-serif;color:#1c1622}
.prov-card__datos small{display:block;font-size:.74rem;color:#8a7f74;margin-top:.1rem}
.prov-edit{margin-top:.7rem}
.prov-edit>summary{list-style:none;cursor:pointer;display:inline-block;
  font:700 .74rem/1 'Manrope',sans-serif;color:#8a7f74;border:1px solid #e7ddd2;
  border-radius:999px;padding:.38rem .75rem}
.prov-edit>summary::-webkit-details-marker{display:none}
.prov-edit>summary:hover{color:#e91e63;border-color:#e91e63}
.prov-borrar{margin-top:.5rem;border:0;background:none;cursor:pointer;color:#c0271f;
  font:700 .74rem/1 'Manrope',sans-serif;padding:.4rem 0;text-decoration:underline}

/* Acceso de cortesía en el panel del cliente. */
.cortesia{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;border-radius:16px;
  padding:.9rem 1rem;margin-bottom:1rem;border:1px solid #e7ddd2;background:#fff}
.cortesia.is-libre{border-color:#c9a24b;background:linear-gradient(180deg,#fffdf7,#fff)}
.cortesia__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#f4efe8;color:#c9a24b;font-size:1rem;flex-shrink:0}
.cortesia.is-libre .cortesia__ico{background:#c9a24b;color:#fff}
.cortesia__txt{flex:1;min-width:180px}
.cortesia__txt strong{display:block;font:700 .88rem/1.25 'Manrope',sans-serif;color:#1c1622}
.cortesia__txt small{display:block;font-size:.75rem;color:#8a7f74;margin-top:.15rem;line-height:1.4}
.cortesia__btn{border-radius:999px;background:#e91e63;color:#fff;text-decoration:none;
  padding:.5rem .9rem;font:700 .76rem/1 'Manrope',sans-serif;white-space:nowrap}
.cortesia__btn:hover{background:#c2185b;color:#fff}
.cortesia.is-usado .cortesia__btn{background:#fff;color:#1c1622;border:1px solid #e7ddd2}

/* Aviso de cortesía en el registro. */
.cortesia-aviso{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;
  border:1px solid #c9a24b;border-radius:12px;padding:.7rem .85rem;background:#fffdf7;
  font-size:.8rem;line-height:1.45;color:#4a4250}
.cortesia-aviso i{color:#c9a24b;margin-top:.15rem}

/* Control de cortesías en el panel del admin. */
.ct-panel__tit{font-family:'Fraunces',Georgia,serif;font-size:1.02rem;margin:0 0 .7rem;color:#1c1622}
.ct-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.ct-num{background:#f4efe8;border-radius:12px;padding:.6rem .4rem;text-align:center}
.ct-num b{display:block;font:800 1.25rem/1 'Fraunces',Georgia,serif;color:#c9a24b}
.ct-num span{display:block;font-size:.66rem;color:#8a7f74;margin-top:.2rem}
.ct-sub{margin:.9rem 0 .35rem;font:700 .72rem/1 'Manrope',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;color:#b3a89c}
.ct-lista{list-style:none;margin:0;padding:0}
.ct-lista li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem 0;border-bottom:1px solid #f2ece4;font-size:.82rem}
.ct-lista li:last-child{border-bottom:0}
.ct-lista a{color:#1c1622;text-decoration:none;font-weight:600}
.ct-lista a:hover{color:#e91e63}
.ct-cuenta{background:#e91e63;color:#fff;border-radius:999px;padding:.2rem .5rem;
  font:800 .7rem/1 'Manrope',sans-serif}
@media (max-width:600px){ .ct-nums{grid-template-columns:repeat(2,1fr)} }

/* Cortesía dentro de Suscripciones. */
.ct-abre{margin-bottom:.9rem}
.ct-abre>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;border:1px solid #c9a24b;border-radius:12px;padding:.65rem .9rem;
  background:#fffdf7;font:700 .84rem/1 'Manrope',sans-serif;color:#1c1622}
.ct-abre>summary::-webkit-details-marker{display:none}
.ct-abre>summary:hover{background:#fdf6ea}
.ct-abre>summary i{color:#c9a24b}
.ct-abre__resumen{margin-left:auto;font:600 .74rem/1 'Manrope',sans-serif;color:#8a7f74}
.ct-caja{border:1px solid #e7ddd2;border-top:0;border-radius:0 0 12px 12px;padding:.9rem}
.ct-atajos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}

/* Estado de la cortesía en cada renglón. */
.subs-ct{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;
  min-width:118px;flex-shrink:0;margin-right:.6rem}
.subs-ct__tag{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;
  padding:.2rem .5rem;font:700 .66rem/1 'Manrope',sans-serif}
.subs-ct__tag.is-usada{background:#f4efe8;color:#8a7f74}
.subs-ct__tag.is-libre{background:#c9a24b;color:#fff}
.subs-ct em{font-size:.66rem;color:#a1958a;font-style:normal;
  max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){ .subs-ct{display:none} }

/* Alta y último acceso en cada renglón de Suscripciones. */
.subs-fechas{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;
  min-width:124px;flex-shrink:0;margin-right:.7rem}
.subs-fechas em{display:inline-flex;align-items:baseline;gap:.35rem;font-style:normal;
  font:600 .7rem/1.2 'Manrope',sans-serif;color:#1c1622;white-space:nowrap}
.subs-fechas em b{font:700 .58rem/1 'Manrope',sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:#b3a89c}
.subs-fechas em.is-frio{color:#c0271f}
.subs-fechas em.is-frio b{color:#c0271f}
/* Se esconde solo en celular, donde el renglón ya no da más. */
@media (max-width:640px){ .subs-fechas{display:none} }

/* Ficha de datos en el detalle. */
.subs-datos{list-style:none;margin:.8rem 0 0;padding:0;border-top:1px solid #f2ece4}
.subs-datos li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.5rem 0;border-bottom:1px solid #f2ece4}
.subs-datos span{font-size:.74rem;color:#8a7f74}
.subs-datos strong{font:600 .8rem/1.3 'Manrope',sans-serif;color:#1c1622;text-align:right}

/* Suscripciones nuevas desde la última visita. */
.subs-nuevas{border:1px solid #c9a24b;border-radius:14px;padding:.85rem 1rem;margin-bottom:.9rem;
  background:linear-gradient(180deg,#fffdf7,#fff)}
.subs-nuevas__tit{margin:0 0 .55rem;font:800 .86rem/1.3 'Manrope',sans-serif;color:#1c1622}
.subs-nuevas__tit i{color:#c9a24b;margin-right:.35rem}
.subs-nuevas ul{list-style:none;margin:0;padding:0}
.subs-nuevas li{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  padding:.4rem 0;border-top:1px solid #f2ece4}
.subs-nuevas li strong{font:700 .82rem/1 'Manrope',sans-serif;color:#1c1622}
.subs-nuevas li span{font-size:.74rem;color:#8a7f74}
.subs-nuevas li em{margin-left:auto;font-style:normal;font-size:.72rem;color:#a1958a;white-space:nowrap}

/* Encabezado de grupo en el aviso de promoción: separa cliente de modelo. */
.pp-grupo{display:flex;align-items:center;gap:.4rem;margin:.9rem 0 .4rem;
  font:700 .68rem/1 'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.55)}
.pp-grupo:first-child{margin-top:0}
.pp-grupo i{color:#e6c76e}

/* La guía ya no ofrece el otro camino: se muestra sola. */
.gd-switch--solo{pointer-events:none}
.gd-switch--solo .on{display:inline-flex;align-items:center;gap:.4rem}

/* De dónde nos visitan, en métricas. */
.geo-card{margin-top:1rem}
.geo-tit{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;margin:0 0 .3rem;color:#1c1622}
.geo-tit i{color:#6c5ce7;margin-right:.35rem}
.geo-nota{font-size:12.5px;margin:.2rem 0 .9rem;line-height:1.5}
.geo-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.geo-sub{margin:0 0 .5rem;font:700 .72rem/1 'Manrope',sans-serif;text-transform:uppercase;
  letter-spacing:.05em;color:#b3a89c}
.geo-sub i{color:#c9a24b;margin-right:.25rem}
.geo-lista{list-style:none;margin:0;padding:0}
.geo-lista li{display:grid;grid-template-columns:1fr 54px 22px;align-items:center;gap:.4rem;
  padding:.3rem 0;font-size:.8rem}
.geo-lugar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1c1622}
.geo-barra{height:6px;border-radius:999px;background:#f2ece4;overflow:hidden}
.geo-barra i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#c9a24b,#e91e63)}
.geo-lista b{text-align:right;font:700 .76rem/1 'Manrope',sans-serif;color:#8a7f74}
@media (max-width:900px){ .geo-cols{grid-template-columns:1fr} }

/* ══════════ Galería del perfil ══════════
   Es lo primero que se ve y lo que decide si se quedan. Antes se asomaban dos
   fotos a medias de nueve que había: el trabajo estaba ahí, sin verse. */
.gal{position:relative;margin-bottom:24px}

/* Escritorio: mosaico de cinco. Una grande manda, cuatro invitan a abrir. */
.gal-mosaico{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:8px;height:460px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.gal-grande{grid-row:span 2}
.gal-grande,.gal-chica{position:relative;padding:0;border:0;background:#f4efe8;cursor:pointer;
  overflow:hidden;display:block}
.gal-grande img,.gal-chica img{width:100%;height:100%;object-fit:cover;
  /* Un poco arriba del centro: en foto de cuerpo entero la cara queda ahí. */
  object-position:center 30%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gal-grande:hover img,.gal-chica:hover img{transform:scale(1.04)}
.gal-chica--sola{grid-column:span 2;grid-row:span 2}
/* Cuántas faltan por ver: la razón para tocar. */
.gal-mas{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(28,22,34,.55);color:#fff;font:800 1.5rem/1 'Fraunces',Georgia,serif;
  backdrop-filter:blur(2px)}

/* Celular: carrusel que se desliza con el dedo. */
.gal-tira{display:none}

.book-btn{position:absolute;right:14px;bottom:14px;z-index:3}

@media (max-width:820px){
  .gal-mosaico{display:none}
  .gal-tira{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -20px;padding:0 20px 4px}
  .gal-tira::-webkit-scrollbar{display:none}
  .gal-tira__foto{flex:0 0 82%;scroll-snap-align:center;padding:0;border:0;cursor:pointer;
    background:#f4efe8;border-radius:18px;overflow:hidden;aspect-ratio:3/4;
    box-shadow:0 6px 18px rgba(28,22,34,.14)}
  .gal-tira__foto img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
  .book-btn{position:static;display:flex;width:100%;justify-content:center;margin-top:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .gal-grande img,.gal-chica img{transition:none}
  .gal-grande:hover img,.gal-chica:hover img{transform:none}
}

/* Videos cortos en el portafolio. */
.vid-lista{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.vid-item{width:170px}
.vid-item video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;
  background:#1c1622;display:block}
.vid-borrar{width:100%;margin-top:.4rem;border:1px solid #e7ddd2;background:#fff;
  border-radius:999px;padding:.35rem;cursor:pointer;color:#c0271f;
  font:700 .72rem/1 'Manrope',sans-serif}
.vid-borrar:hover{background:#fff3f3;border-color:#c0271f}

/* El video de la galería: manda, pero sin gritar. */
.gal-grande--video{position:relative;background:#1c1622}
.gal-grande--video video{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.gal-vivo{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;
  gap:.35rem;background:rgba(28,22,34,.62);color:#fff;border-radius:999px;padding:.3rem .6rem;
  font:700 .68rem/1 'Manrope',sans-serif;backdrop-filter:blur(3px)}
.gal-tira__foto--video{position:relative;background:#1c1622}
.gal-tira__foto--video video{width:100%;height:100%;object-fit:cover;display:block}

/* Recorte del video en el navegador. */
.vid-recorte{margin:.8rem 0;border:1px solid #e7ddd2;border-radius:14px;padding:.8rem;
  background:#fffdf7;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.vid-recorte video{width:120px;aspect-ratio:9/16;object-fit:cover;border-radius:10px;
  background:#1c1622;flex-shrink:0}
.vid-recorte__ctrl{flex:1;min-width:190px}
.vid-recorte__ctrl label{display:block;font:600 .76rem/1 'Manrope',sans-serif;color:#1c1622;
  margin-bottom:.4rem}
.vid-recorte__ctrl input[type=range]{width:100%;accent-color:#e91e63}
.vid-rango{display:inline-block;margin-top:.35rem;font:700 .74rem/1 'Manrope',sans-serif;color:#c9a24b}
@media (max-width:520px){ .vid-recorte{flex-direction:column;align-items:stretch}
  .vid-recorte video{width:100%;max-width:150px;margin:0 auto} }

/* Con video, el mosaico cambia de forma: el video manda una columna vertical
   de 9:16 —que es como se grabó— y las fotos se acomodan a su lado. Metido en
   un hueco horizontal se le cortaba la cabeza o los pies. */
.gal-mosaico--video{grid-template-columns:260px 1fr 1fr}
.gal-grande--video{border:0;padding:0;cursor:pointer;width:100%}
.gal-lupa{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;background:rgba(28,22,34,.62);color:#fff;
  font-size:.8rem;backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
.gal-grande--video:hover .gal-lupa{opacity:1}

/* El video en el modal: alto completo, que es como se ve un vertical. */
.lb-video{max-height:88vh;max-width:min(92vw,520px);width:auto;height:88vh;
  object-fit:contain;border-radius:14px;background:#000}
@media (max-width:820px){
  .gal-mosaico--video{grid-template-columns:1fr}
  .lb-video{height:auto;max-height:82vh;max-width:94vw}
}

/* ══════════ Galería en una sola fila ══════════
   El mosaico recortaba las fotos para cuadrarlas en huecos horizontales. En
   una fila de tarjetas verticales cada foto se ve como se tomó, y se recorren
   deslizando —el mismo gesto en la compu y en el teléfono. */
.gal-tira{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:8px}
.gal-tira::-webkit-scrollbar{height:6px}
.gal-tira::-webkit-scrollbar-thumb{background:#e0d6ca;border-radius:99px}
.gal-tira__foto{flex:0 0 300px;scroll-snap-align:start;padding:0;border:0;cursor:pointer;
  background:#f4efe8;border-radius:16px;overflow:hidden;aspect-ratio:9/16;
  position:relative;box-shadow:0 4px 14px rgba(28,22,34,.1)}
.gal-tira__foto img,.gal-tira__foto video{width:100%;height:100%;object-fit:cover;
  object-position:center 25%;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gal-tira__foto:hover img,.gal-tira__foto:hover video{transform:scale(1.03)}
.gal-tira__foto--video{background:#1c1622}

.gal{position:relative;margin-bottom:24px}
.book-btn{position:static;display:inline-flex;margin-top:.6rem}

@media (max-width:820px){
  .gal-tira{gap:8px;margin:0 -20px;padding:0 20px 8px;scroll-snap-type:x mandatory}
  .gal-tira__foto{flex:0 0 82%;scroll-snap-align:center}
  .book-btn{display:flex;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .gal-tira__foto img,.gal-tira__foto video{transition:none}
  .gal-tira__foto:hover img,.gal-tira__foto:hover video{transform:none}
}

/* «Acerca de» va pegado al nombre: es lo primero que se lee tras las fotos. */
.pf-acerca__tit{margin:14px 0 6px;font-family:'Fraunces',Georgia,serif;font-size:1rem;color:#1c1622}
.pf-acerca{color:var(--gray-700);line-height:1.7;font-size:14.5px;margin:0 0 18px;
  padding-bottom:16px;border-bottom:1px solid #f2ece4}

/* Reseña traída de otra plataforma: se dice de dónde viene. */
.rev-origen{display:inline-flex;align-items:center;gap:.3rem;background:#f4efe8;color:#8a7f74;
  border-radius:999px;padding:.18rem .5rem;font:700 .64rem/1 'Manrope',sans-serif;
  text-transform:uppercase;letter-spacing:.04em}
.rev-origen i{font-size:.6rem}

/* Visitas junto al nombre: la prueba social que sí es real. */
.pf-visitas{display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle;
  background:#f4efe8;color:#8a7f74;border-radius:999px;padding:.22rem .55rem;
  font:700 .72rem/1 'Manrope',sans-serif}
.pf-visitas i{font-size:.68rem;color:#b3a89c}

/* Lo que sí y lo que no, en dos columnas. */
.pf-servicios{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.pf-serv{border-radius:14px;padding:.8rem .9rem;border:1px solid #e7ddd2;background:#fff}
.pf-serv--si{border-color:#bfe4d0;background:#f4fbf7}
.pf-serv--no{border-color:#f0d3d0;background:#fdf7f6}
.pf-serv__tit{margin:0 0 .5rem;font:800 .74rem/1 'Manrope',sans-serif;
  text-transform:uppercase;letter-spacing:.05em}
.pf-serv--si .pf-serv__tit{color:#1f7a52}
.pf-serv--no .pf-serv__tit{color:#c0271f}
.pf-serv ul{list-style:none;margin:0;padding:0}
.pf-serv li{position:relative;padding-left:14px;margin-bottom:.35rem;
  font-size:13.5px;line-height:1.45;color:var(--gray-700)}
.pf-serv li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:currentColor;opacity:.35}
@media (max-width:600px){ .pf-servicios{grid-template-columns:1fr} }

/* El calendario abajo no debe ocupar todo el ancho de la pantalla: en PC se
   parte en dos —mes a la izquierda, horas del día a la derecha— y se limita.
   A 1280px de ancho los cuadritos del mes quedaban del tamaño de una tarjeta. */
/* El calendario conserva su propio acomodo. Partirlo en dos columnas mandaba
   los nombres de los días (D L M...) a la columna equivocada: sus seis hijos
   son hermanos sueltos, no dos bloques. */

/* ══════════ Perfil público: legibilidad y equilibrio en escritorio ══════════

   Dos problemas medidos, no de gusto:

   1. El texto secundario usaba grises fríos de Material sobre papel cálido.
      «.muted» daba 2.34 de contraste sobre #f4efe8 — la mitad del mínimo
      legible (4.5). Se veía lavado porque LO ESTABA. Ya se corrigió arriba,
      en la escala; aquí solo se asienta el peso para que el texto chico
      aguante sin engordar.

   2. En PC la columna de datos es larga y la de contacto corta: al bajar
      quedaba medio metro de vacío a la derecha. Se resuelve dejando el
      contacto pegado mientras se lee, que además pone la acción siempre a
      la mano en vez de obligar a subir.

   El celular no se toca: todo esto vive de 900px para arriba. */

.muted { color: var(--gray-500); font-weight: 500; }

@media (min-width: 900px) {
  /* La lectura no debe pasar de ~70 caracteres por renglón: más ancho y el
     ojo pierde el salto de línea. */
  .pf-acerca { max-width: 68ch; font-size: 15px; }
  .profile-detail-header .muted { font-size: 14px; }

  /* El contacto acompaña TODA la lectura, no solo el primer renglón.
     Se le da la columna derecha completa; lo demás (ficha, disponibilidad,
     reseñas) baja por la izquierda. Así el calendario deja de ser una franja
     de pared a pared y el botón de contactar nunca se pierde de vista. */
  .profile-grid { align-items: start; }
  .profile-grid > .card:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 88px;
  }
  .profile-grid > .profile-full { grid-column: 1; }

  /* Los datos duros ganan jerarquía: etiqueta chica y apagada, dato firme. */
  .detail-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
                  color: var(--gray-500); font-weight: 700; }
  .detail-value { font-size: 15px; color: var(--ink, #1c1622); font-weight: 600; }
}

/* «Te toca calificar»: el aviso que cierra el círculo de la reputación. */
.califame{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem;
  border:1px solid #c9a24b;border-radius:16px;padding:.9rem 1rem;
  background:linear-gradient(180deg,#fffdf7,#fff);box-shadow:0 4px 16px rgba(201,162,75,.14)}
.califame__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#c9a24b;color:#fff;font-size:1.05rem;flex-shrink:0}
.califame__txt{flex:1;min-width:200px}
.califame__txt strong{display:block;font:800 .92rem/1.25 'Manrope',sans-serif;color:#1c1622}
.califame__txt small{display:block;font-size:.78rem;color:#5b5560;margin-top:.2rem;line-height:1.45}
.califame__mas{color:#8a7f74!important;margin-top:.3rem!important}
.califame__btn{border-radius:999px;background:#e91e63;color:#fff;text-decoration:none;
  padding:.6rem 1.05rem;font:800 .82rem/1 'Manrope',sans-serif;white-space:nowrap;
  box-shadow:0 3px 12px rgba(233,30,99,.3)}
.califame__btn:hover{background:#c2185b;color:#fff}

/* Aviso por WhatsApp: el camino para alcanzarla cuando no está en la app. */
.wa-aviso{display:flex;align-items:center;gap:.7rem;margin-top:.7rem;text-decoration:none;
  border:1px solid #bfe4d0;background:#f4fbf7;border-radius:14px;padding:.7rem .85rem;
  transition:border-color .18s ease,transform .18s ease}
.wa-aviso:hover{border-color:#25d366;transform:translateY(-1px)}
.wa-aviso > i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:#25d366;color:#fff;font-size:1.05rem;flex-shrink:0}
.wa-aviso strong{display:block;font:700 .84rem/1.2 'Manrope',sans-serif;color:#1c1622}
.wa-aviso small{display:block;font-size:.74rem;color:#5b5560;margin-top:.12rem}

/* Dentro de una tabla el aviso se compacta: solo el icono y una palabra. */
td .wa-aviso{margin:0 0 .4rem;padding:.4rem .55rem;gap:.45rem}
td .wa-aviso > i{width:26px;height:26px;font-size:.8rem}
td .wa-aviso strong{font-size:.72rem}
td .wa-aviso small{display:none}

/* Modal de «solicitud enviada»: el aviso por WhatsApp en su mejor momento. */
.wa-modal__caja{max-width:420px;text-align:center}
.wa-modal__ico{display:grid;place-items:center;width:54px;height:54px;margin:0 auto .7rem;
  border-radius:50%;background:linear-gradient(135deg,#e91e63,#c9a24b);color:#fff;font-size:1.3rem}
.wa-modal__caja h2{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;margin:0 0 .4rem;color:#1c1622}
.wa-modal__caja .muted{font-size:.85rem;line-height:1.5;margin-bottom:1rem}
.wa-modal__caja .wa-aviso{text-align:left;margin-top:0}

/* Retirar una solicitud sin contestar. */
.sol-retirar{border:1px solid #e7ddd2;background:#fff;border-radius:999px;cursor:pointer;
  padding:.3rem .65rem;color:#8a7f74;font:700 .72rem/1 'Manrope',sans-serif;white-space:nowrap}
.sol-retirar:hover{border-color:#c0271f;color:#c0271f;background:#fff6f5}

/* El mensaje para invitar modelos (panel de cliente y de modelo). */
.promo-msj{white-space:pre-wrap;word-break:break-word;background:#faf7f3;border:1px solid #e7ddd2;
  border-radius:14px;padding:1rem;font:400 12.5px/1.65 'Manrope',system-ui,sans-serif;
  color:#443e4a;max-height:340px;overflow-y:auto;margin:0 0 .9rem}
.promo-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.promo-ok{font:700 .78rem/1 'Manrope',system-ui,sans-serif;color:#1f7a52}
@media (max-width:600px){
  .promo-msj{font-size:12px;padding:.85rem;max-height:260px}
  .promo-acciones > *{flex:1 1 100%;justify-content:center;text-align:center}
}

/* ══════════════════════════════════════════════════════════════════
   PAPELES DE LA MODELO — carta firmada + identificación
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Pantalla /modelo-panel/verificacion ---------- */
.pap-card{padding:0;overflow:hidden;margin-bottom:1.1rem}
.pap-head{padding:1.15rem 1.25rem .9rem;border-bottom:1px solid #f0e9e0;
  background:linear-gradient(180deg,#fdfbf8,#fff)}
.pap-head h2{margin:.45rem 0 .35rem;font:700 1.18rem/1.25 'Fraunces',Georgia,serif;color:#1c1622}
.pap-lead{margin:0;font:400 13.5px/1.6 'Manrope',system-ui,sans-serif;color:#5b5560}
.pap-tag{display:inline-block;padding:.22rem .6rem;border-radius:999px;
  font:800 10.5px/1.4 'Manrope',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pap-tag--req{background:#fce4ec;color:#b4114b}
.pap-tag--opc{background:#efeaff;color:#5a48c4}
.pap-card.is-listo .pap-head{background:linear-gradient(180deg,#f1faf5,#fff)}

.pap-paso{display:flex;gap:.9rem;padding:1.15rem 1.25rem;border-bottom:1px solid #f4eee6}
.pap-paso:last-child{border-bottom:0}
.pap-num{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#1c1622;color:#fff;font:800 14px/1 'Manrope',system-ui,sans-serif}
.pap-paso.is-ok .pap-num{background:#2e9e6b}
.pap-body{flex:1 1 auto;min-width:0}
.pap-body h3{margin:.15rem 0 .4rem;font:700 1rem/1.3 'Manrope',system-ui,sans-serif;color:#1c1622}
.pap-txt{margin:0 0 .8rem;font:400 13.5px/1.6 'Manrope',system-ui,sans-serif;color:#443e4a}
.pap-nota{margin:.55rem 0 .8rem;font:400 12.5px/1.55 'Manrope',system-ui,sans-serif;color:#6f6675;
  display:flex;gap:.45rem;align-items:flex-start}
.pap-nota i{color:#c9a24b;margin-top:2px}

/* El botón que abre la carta: es la acción principal del paso 1. */
.pap-carta{display:flex;align-items:center;gap:.75rem;padding:.8rem .9rem;margin:0 0 .9rem;
  border:2px solid #c9a24b;border-radius:14px;background:#fffdf7;text-decoration:none;
  transition:background .15s ease,transform .15s ease}
.pap-carta:hover{background:#fdf7e8;transform:translateY(-1px)}
.pap-carta > i:first-child{font-size:20px;color:#c9a24b;flex:0 0 auto}
.pap-carta span{flex:1 1 auto;min-width:0}
.pap-carta strong{display:block;font:700 14px/1.3 'Manrope',system-ui,sans-serif;color:#1c1622}
.pap-carta small{display:block;font:400 12px/1.45 'Manrope',system-ui,sans-serif;color:#6f6675;margin-top:2px}
.pap-carta__go{color:#c9a24b;flex:0 0 auto;font-size:13px}

/* Qué dejar y qué tapar en la identificación. */
.pap-ine{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.2rem 0 .2rem}
.pap-ine__col{border-radius:12px;padding:.7rem .8rem;border:1px solid #e7ddd2}
.pap-ine__col--si{background:#f2faf6;border-color:#cfe9dc}
.pap-ine__col--no{background:#fdf3f3;border-color:#f3d5d5}
.pap-ine__t{display:flex;align-items:center;gap:.35rem;
  font:800 11px/1.4 'Manrope',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.pap-ine__col--si .pap-ine__t{color:#1f7a52}
.pap-ine__col--no .pap-ine__t{color:#b4114b}
.pap-ine__col ul{margin:.45rem 0 0;padding-left:1.05rem}
.pap-ine__col li{font:400 12.5px/1.65 'Manrope',system-ui,sans-serif;color:#443e4a}

.pap-file{display:block;margin-top:.35rem}
.pap-file__lbl{display:block;margin-bottom:.35rem;
  font:600 12.5px/1.4 'Manrope',system-ui,sans-serif;color:#5b5560}
.pap-hecho{margin:.5rem 0 0;font:600 12.5px/1.5 'Manrope',system-ui,sans-serif;color:#1f7a52}
.pap-hecho i{margin-right:.3rem}
.pap-listo{margin:0;padding:.85rem 1.25rem;background:#f1faf5;border-top:1px solid #cfe9dc;
  font:600 13.5px/1.55 'Manrope',system-ui,sans-serif;color:#1f7a52}
.pap-listo i{margin-right:.35rem}
.pap-enviar{margin-top:.2rem}

@media (max-width:600px){
  .pap-ine{grid-template-columns:1fr}
  .pap-paso{padding:1rem .9rem;gap:.7rem}
  .pap-head{padding:1rem .9rem .8rem}
}

/* ---------- La hoja imprimible /modelo-panel/carta-consentimiento ---------- */
.carta-wrap{max-width:820px;margin:0 auto;padding:1.2rem 1rem 3rem}
.carta-barra{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  flex-wrap:wrap;margin-bottom:1rem}
.carta-volver{font:700 13.5px/1 'Manrope',system-ui,sans-serif;color:#5b5560;text-decoration:none}
.carta-volver:hover{color:#e91e63}
.carta-tip{display:flex;gap:.7rem;padding:.85rem 1rem;margin-bottom:1.1rem;border-radius:14px;
  background:#fffdf7;border:1px solid #ecdcb4;font:400 13px/1.6 'Manrope',system-ui,sans-serif;color:#443e4a}
.carta-tip i{color:#c9a24b;margin-top:3px}

.hoja{background:#fff;border:1px solid #e7ddd2;border-radius:6px;padding:2.6rem 2.4rem;
  box-shadow:0 10px 40px rgba(28,22,34,.09)}
.hoja-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:2px solid #1c1622;margin-bottom:1.6rem}
.hoja-logo{height:40px;width:auto}
.hoja-sitio{font:700 12px/1 'Manrope',system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6f6675}
.hoja-titulo{margin:0 0 1.3rem;font:700 1.35rem/1.3 'Fraunces',Georgia,serif;color:#1c1622;
  text-align:center;letter-spacing:-.01em}
.hoja-parr{margin:0 0 1.1rem;font:400 14px/1.85 'Manrope',system-ui,sans-serif;color:#1c1622;
  text-align:justify}
.hoja-dato{border-bottom:1px solid #1c1622;padding:0 .35rem;font-weight:700}
.hoja-lista{margin:0;padding-left:1.3rem;counter-reset:none}
.hoja-lista li{margin-bottom:.95rem;font:400 13.5px/1.8 'Manrope',system-ui,sans-serif;
  color:#1c1622;text-align:justify}
.hoja-lista b{display:block;margin-bottom:.15rem;font-weight:800}

.hoja-firma{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:3.2rem}
.hoja-campo{text-align:center}
.hoja-linea{display:block;height:1px;background:#1c1622;margin-bottom:.4rem}
.hoja-campo small{display:block;font:700 11px/1.4 'Manrope',system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:#5b5560}
.hoja-sug{display:block;margin-top:.25rem;font:400 11.5px/1.4 'Manrope',system-ui,sans-serif;
  color:#8a7f74;font-style:italic}
.hoja-pie{margin:2.4rem 0 0;padding-top:.9rem;border-top:1px solid #e7ddd2;text-align:center;
  font:400 10.5px/1.5 'Manrope',system-ui,sans-serif;color:#8a7f74}

.carta-pasos{margin-top:1.6rem;padding:1.1rem 1.25rem;background:#fff;border:1px solid #e7ddd2;
  border-radius:16px}
.carta-pasos h3{margin:0 0 .6rem;font:700 1rem/1.3 'Manrope',system-ui,sans-serif;color:#1c1622}
.carta-pasos ol{margin:0 0 1rem;padding-left:1.2rem}
.carta-pasos li{font:400 13.5px/1.75 'Manrope',system-ui,sans-serif;color:#443e4a}

@media (max-width:640px){
  .carta-wrap{padding:.9rem .7rem 2.5rem}
  .hoja{padding:1.5rem 1.15rem;border-radius:4px}
  .hoja-titulo{font-size:1.1rem}
  .hoja-lista li,.hoja-parr{font-size:13px;line-height:1.7;text-align:left}
  .hoja-firma{grid-template-columns:1fr;gap:2.2rem;margin-top:2.4rem}
}

/* Al imprimir solo sale la hoja, sin sombras y sin nada del panel. */
@media print{
  .no-print,.main-header,.dash-nav,footer,.age-gate,.pin-lock{display:none!important}
  body{background:#fff!important}
  .carta-wrap{max-width:none;padding:0;margin:0}
  .hoja{border:0;border-radius:0;box-shadow:none;padding:0}
  .hoja-lista li{page-break-inside:avoid}
  .hoja-firma{page-break-inside:avoid}
}

/* ---------- La sección 04 de la guía ---------- */
.pap-guia{display:grid;grid-template-columns:1.55fr 1fr;gap:1rem;align-items:start}
.pap-g{background:#fff;border:1px solid #e7ddd2;border-radius:18px;overflow:hidden}
.pap-g--req{border-color:#f0c9d8}
.pap-g--opc{border-color:#ddd5f5}
.pap-g > header{padding:1.1rem 1.2rem .5rem}
.pap-g > header h3{margin:.4rem 0 0;font:700 1.15rem/1.25 'Fraunces',Georgia,serif;color:#1c1622}
.pap-g__tag{display:inline-block;padding:.22rem .6rem;border-radius:999px;
  font:800 10.5px/1.4 'Manrope',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pap-g--req .pap-g__tag{background:#fce4ec;color:#b4114b}
.pap-g--opc .pap-g__tag{background:#efeaff;color:#5a48c4}
.pap-g__item{display:flex;gap:.85rem;padding:1rem 1.2rem;border-top:1px solid #f4eee6}
.pap-g__item > i{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#faf6f0;color:#c9a24b;font-size:15px}
.pap-g--opc .pap-g__item > i{color:#6c5ce7;background:#f5f2ff}
.pap-g__item > div{min-width:0}
.pap-g__item h4{margin:.2rem 0 .4rem;font:700 .95rem/1.3 'Manrope',system-ui,sans-serif;color:#1c1622}
.pap-g__item p{margin:0 0 .6rem;font:400 13.5px/1.65 'Manrope',system-ui,sans-serif;color:#443e4a}
.pap-g__item ul{margin:0;padding-left:1.05rem}
.pap-g__item li{margin-bottom:.35rem;font:400 13px/1.65 'Manrope',system-ui,sans-serif;color:#443e4a}
.pap-g__que{font-weight:700!important;color:#1c1622!important;margin-bottom:.35rem!important}
.pap-g__cols{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.5rem}
.pap-g__si,.pap-g__no{border-radius:12px;padding:.6rem .7rem;border:1px solid #e7ddd2}
.pap-g__si{background:#f2faf6;border-color:#cfe9dc}
.pap-g__no{background:#fdf3f3;border-color:#f3d5d5}
.pap-g__si > span,.pap-g__no > span{display:flex;align-items:center;gap:.3rem;
  font:800 10.5px/1.4 'Manrope',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.pap-g__si > span{color:#1f7a52}
.pap-g__no > span{color:#b4114b}
.pap-g__si ul,.pap-g__no ul{margin:.35rem 0 0;padding-left:.95rem}
.pap-g__si li,.pap-g__no li{margin-bottom:.15rem;font-size:12.5px;line-height:1.55}
.pap-g__privado{display:flex;gap:.8rem;margin-top:1rem;padding:1rem 1.15rem;border-radius:16px;
  background:#1c1622;color:#efe9f2;font:400 13.5px/1.7 'Manrope',system-ui,sans-serif}
.pap-g__privado i{color:#c9a24b;margin-top:4px;font-size:16px}
.pap-g__privado strong{color:#fff}
@media (max-width:860px){ .pap-guia{grid-template-columns:1fr} }
@media (max-width:520px){ .pap-g__cols{grid-template-columns:1fr} }

/* Lista del paso 10 del asistente. */
.wz-lista{margin:.2rem 0 .7rem;padding-left:0;list-style:none}
.wz-lista li{margin-bottom:.5rem;padding-left:1.5rem;position:relative;
  font:400 13.5px/1.6 'Manrope',system-ui,sans-serif;color:#443e4a}
.wz-lista li b{position:absolute;left:0;top:0;font-weight:800;color:#1c1622}

/* La revisión del admin: marcar lo opcional. */
.rev-opt{display:inline-block;margin-left:.4rem;padding:.15rem .5rem;border-radius:999px;
  background:#efeaff;color:#5a48c4;font:800 10px/1.4 'Manrope',system-ui,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}

/* ---------- Avisar al admin por WhatsApp ---------- */
.waadm{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1.1rem;
  padding:.95rem 1.1rem;border-radius:16px;background:#f2faf6;border:1px solid #cfe9dc}
.waadm__ico{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;font-size:19px}
.waadm__txt{flex:1 1 240px;min-width:0}
.waadm__txt strong{display:block;font:700 14.5px/1.3 'Manrope',system-ui,sans-serif;color:#1c1622}
.waadm__txt small{display:block;margin-top:2px;font:400 12.5px/1.55 'Manrope',system-ui,sans-serif;color:#5b5560}
.waadm__btns{display:flex;gap:.45rem;flex-wrap:wrap}
.waadm__wa,.waadm__tg{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;
  border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 13px/1 'Manrope',system-ui,sans-serif}
.waadm__wa{background:#25d366;color:#fff}
.waadm__wa:hover{background:#1eb857}
.waadm__tg{background:#fff;color:#0088cc;border:1px solid #bfe3f5}
.waadm__tg:hover{background:#f2fafd}
@media (max-width:600px){
  .waadm{gap:.7rem}
  .waadm__btns{flex:1 1 100%}
  .waadm__wa,.waadm__tg{flex:1 1 auto;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════
   VISITAS, SUSCRITOS Y LA GALERÍA QUE RESPIRA
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Visitas en la tarjeta del directorio ---------- */
.tile-vistas{position:absolute;right:8px;bottom:8px;z-index:3;
  display:inline-flex;align-items:center;gap:.28rem;padding:.22rem .5rem;
  border-radius:999px;background:rgba(28,22,34,.62);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:700 11px/1 'Manrope',system-ui,sans-serif;letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(0,0,0,.28);pointer-events:none}
.tile-vistas i{font-size:9.5px;opacity:.8}

/* ---------- Suscritos a sus avisos, en el perfil ---------- */
.pf-sigue{display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle;
  margin-left:.4rem;padding:.2rem .55rem;border-radius:999px;
  background:#efeaff;color:#5a48c4;border:1px solid #ddd5f5;
  font:700 12px/1.35 'Manrope',system-ui,sans-serif;white-space:nowrap}
.pf-sigue i{font-size:10.5px}

/* ══════════ La galería que respira ══════════
   Tres capas, y ninguna grita:

   1. Entrada escalonada — las tarjetas suben una tras otra al cargar.
   2. Flotar — cada una sube y baja unos pixeles con SU propio ritmo. Los
      periodos son primos entre sí (9s, 11s, 13s) para que nunca se sincronicen
      y el conjunto no parezca un metrónomo.
   3. Destello — una luz diagonal cruza una tarjeta cada tanto, por turnos.

   Todo se apaga al primer toque (.is-quieta): quien ya decidió mirar no
   necesita que le sigan jalando el ojo. */

@keyframes galEntra{
  /* Sin tocar la opacidad, a propósito. Una entrada que arranca en opacity:0
     deja las fotos INVISIBLES si la animación no llega a correr —pestaña
     abierta en segundo plano, por ejemplo— y las fotos son justo lo que la
     página tiene que enseñar. Se mueve, no se esconde. */
  from{transform:translateY(16px) scale(.985)}
  to{transform:translateY(0) scale(1)}
}
@keyframes galFlota{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-7px) rotate(-.35deg)}
}
@keyframes galDestello{
  0%,88%,100%{transform:translateX(-130%) skewX(-18deg);opacity:0}
  90%{opacity:.55}
  99%{transform:translateX(230%) skewX(-18deg);opacity:0}
}

.gal-tira__foto{
  /* --i lo pone el Blade: es el lugar de la tarjeta en la fila. */
  animation:
    galEntra .62s cubic-bezier(.22,1,.36,1) both,
    galFlota 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .09s), calc(.7s + var(--i, 0) * .55s);
  will-change:transform;
}
/* Ritmos distintos por posición: sin esto flotan todas a la vez y se ve mecánico. */
.gal-tira__foto:nth-child(3n+2){animation-duration:.62s,11s}
.gal-tira__foto:nth-child(3n+3){animation-duration:.62s,13s}

/* El destello. Va en ::after para no tocar la foto ni el <video>. */
.gal-tira__foto::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  animation:galDestello 14s linear infinite;
  animation-delay: calc(var(--i, 0) * 1.9s);
}

/* Al pasar el cursor, la tarjeta se separa del grupo y deja de flotar:
   el movimiento estorba justo cuando alguien está decidiendo. */
.gal-tira__foto:hover{animation-play-state:paused}
.gal-tira__foto:hover::after{animation-play-state:paused;opacity:0}

/* Y al primer clic se calma todo, con una salida suave en vez de un corte. */
.gal-tira.is-quieta .gal-tira__foto{
  animation:none;
  transform:translateY(0) rotate(0deg);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.gal-tira.is-quieta .gal-tira__foto::after{animation:none;opacity:0}

@media (prefers-reduced-motion:reduce){
  .gal-tira__foto{animation:none!important;transform:none!important}
  .gal-tira__foto::after{animation:none!important;opacity:0!important}
}

/* ---------- Banda «Los mejores» con pocos perfiles ---------- */
.topband-track.is-corta{
  /* Sin el width:auto no se centra: el track base es width:max-content y
     justify-content no tiene sobre qué repartir. */
  animation:none;
  width:auto;
  justify-content:center;
  flex-wrap:wrap;
  row-gap:16px;
}
/* Y sin desplazamiento, el degradado de los bordes solo recorta a la primera
   y la última sin motivo. */
.topband-viewport:has(.is-corta){-webkit-mask-image:none;mask-image:none}

/* ---------- De qué estados le entran a un perfil ---------- */
.pgeo-lista{display:flex;flex-direction:column;gap:.55rem}
.pgeo-fila{display:grid;grid-template-columns:22px minmax(90px,1.1fr) 2fr auto;
  align-items:center;gap:.6rem}
.pgeo-pos{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#f4efe8;color:#6f6675;font:800 11px/1 'Manrope',system-ui,sans-serif}
.pgeo-fila:first-child .pgeo-pos{background:#c9a24b;color:#fff}
.pgeo-nom{font:600 13px/1.35 'Manrope',system-ui,sans-serif;color:#1c1622;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgeo-fuera{font-size:10px;color:#8a7f74;margin-left:.2rem}
.pgeo-barra{height:8px;border-radius:99px;background:#f2ece4;overflow:hidden}
.pgeo-barra > span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#6c5ce7,#e91e63)}
.pgeo-num{font:800 13px/1 'Manrope',system-ui,sans-serif;color:#1c1622;
  text-align:right;white-space:nowrap}
.pgeo-num small{display:block;margin-top:2px;font-weight:600;font-size:10.5px;color:#8a7f74}
.pgeo-nota{display:flex;gap:.45rem;align-items:flex-start;margin:16px 0 0;padding-top:12px;
  border-top:1px solid #f2ece4;font:400 12px/1.55 'Manrope',system-ui,sans-serif;color:#6f6675}
.pgeo-nota i{color:#c9a24b;margin-top:2px}
@media (max-width:560px){
  .pgeo-fila{grid-template-columns:20px 1fr auto;row-gap:.3rem}
  /* En pantalla angosta la barra pasa abajo, a todo lo ancho: apretada entre
     el nombre y el número no se alcanzaba a leer. */
  .pgeo-barra{grid-column:2 / -1;height:6px}
  .pgeo-nom{white-space:normal}
}

/* ---------- El registro, mientras crea la cuenta ---------- */
.btn.is-enviando{opacity:.85;cursor:progress}
.btn.is-enviando .fa-spin{margin-right:.35rem}
.wz-espera{margin:.7rem 0 0;text-align:center;
  font:400 12.5px/1.55 'Manrope',system-ui,sans-serif;color:#6f6675}