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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Estilos para formularios */
.form-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 500px;
}

.form-container h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.form-group select {
    cursor: pointer;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s;
}

.btn-primary {
    background-color: #3498db;
}

.btn-primary:hover {
    background-color: #2980b9;
}

.btn-secondary {
    background-color: #2ecc71;
}

.btn-secondary:hover {
    background-color: #27ae60;
}

.btn-logout {
    background-color: #e74c3c;
    padding: 8px 16px;
    font-size: 14px;
}

.btn-logout:hover {
    background-color: #c0392b;
}

.form-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.form-footer a {
    color: #3498db;
    text-decoration: none;
}

.form-footer a:hover {
    text-decoration: underline;
}

/* Alertas */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Dashboard */
.dashboard-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dashboard-header {
    background-color: #2c3e50;
    color: #fff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-header .logo h1 {
    font-size: 24px;
    margin: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dashboard-content {
    flex: 1;
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Panel con sidebar: ancho completo, sin centrar a 1200px (H16). */
.dashboard-content.dashboard-shell {
    max-width: none;
    margin: 0;
    padding: 20px 24px 24px;
}

.dashboard-welcome {
    margin-bottom: 20px;
}

.dashboard-welcome h2 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.dashboard-main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-height: calc(100vh - 180px);
}

.dashboard-sidebar {
    flex: 0 0 260px;
    width: 260px;
    max-width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    height: fit-content;
}

.dashboard-content-area {
    flex: 1 1 auto;
    min-width: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 500px;
}

.sidebar-button {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 14px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
    font-size: 16px;
    box-sizing: border-box;
}

.sidebar-button:hover {
    background: #2980b9;
}

.sidebar-button.active {
    background: #2c3e50;
}

.sidebar-label {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 13px;
}

.dashboard-footer {
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .user-info {
        flex-direction: column;
        gap: 10px;
    }

    .dashboard-main {
        flex-direction: column;
    }

    .dashboard-sidebar {
        flex-basis: auto;
        width: 100%;
    }
}

/* Dashboard del anfitrión */
.host-app {
    font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #F5F7FA;
    color: #0F172A;
    min-height: 100vh;
}

.host-layout { min-height: 100vh; display: flex; flex-direction: column; background: #F5F7FA; }

.host-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #E8EEF4;
    position: sticky;
    top: 0;
    z-index: 40;
}

.host-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #0F172A; }
.host-brand strong { display: block; font-size: 18px; letter-spacing: -0.02em; }
.host-brand small { display: block; color: #94A3B8; font-size: 12px; font-weight: 500; }
.host-brand-mark {
    width: 36px; height: 36px; border-radius: 10px; background: #159A4A; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.host-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.host-icon-btn {
    width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #64748B;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.host-icon-btn:hover { background: #F5F7FA; }
.host-notif { position: relative; }
.host-notif-btn { position: relative; }
.host-notif-badge {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #159A4A; color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.host-notif-badge[hidden] { display: none; }
.host-notif-panel {
    position: fixed; top: 76px; right: 12px; width: min(360px, calc(100vw - 24px));
    max-height: min(420px, 70vh); overflow: auto; background: #fff; border: 1px solid #E8EEF4;
    border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, .12); z-index: 80; padding: 8px;
}
.host-notif-panel[hidden] { display: none; }
.host-notif-heading { margin: 4px 8px 8px; font-size: 13px; font-weight: 700; color: #64748B; }
.host-notif-vacio { margin: 8px; color: #64748B; font-size: 14px; }
.host-notif-item {
    display: flex; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent;
    border-radius: 12px; padding: 10px; cursor: pointer; min-height: 44px; color: inherit;
}
.host-notif-item:hover, .host-notif-item:focus { background: #F8FAFC; }
.host-notif-item.is-unread { background: #F3FBF6; }
.host-notif-ico {
    width: 36px; height: 36px; border-radius: 10px; background: #E8F8EF; color: #159A4A;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
}
.host-notif-item.is-read .host-notif-ico { background: #F1F5F9; color: #64748B; }
.host-notif-copy { min-width: 0; }
.host-notif-copy strong { display: block; font-size: 14px; color: #0F172A; }
.host-notif-copy p { margin: 2px 0 0; color: #475569; font-size: 13px; line-height: 1.35; }
.host-notif-copy small { display: block; margin-top: 4px; color: #94A3B8; font-size: 12px; }
.host-user-menu { position: relative; }
.host-user-summary {
    list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px;
    padding: 4px 8px; border-radius: 14px; cursor: pointer; color: #64748B;
}
.host-user-summary::-webkit-details-marker { display: none; }
.host-avatar {
    width: 40px; height: 40px; border-radius: 999px; background: #159A4A; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.host-user-copy { display: none; flex-direction: column; line-height: 1.2; text-align: left; }
.host-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
.host-user-role { font-size: 12px; color: #64748B; }
.host-user-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: #fff;
    border: 1px solid #E8EEF4; border-radius: 12px; box-shadow: 0 12px 28px rgba(15,23,42,.08); padding: 6px; z-index: 50;
}
.host-user-dropdown a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #B91C1C; text-decoration: none; font-size: 14px; }
.host-user-dropdown a:hover { background: #F8FAFC; }

.host-body { display: flex; flex: 1; min-width: 0; }
.host-sidebar-backdrop { display: none; }
.host-sidebar {
    position: fixed; top: 72px; bottom: 0; left: 0; width: min(270px, 86vw); background: #fff;
    border-right: 1px solid #E8EEF4; padding: 16px 12px; display: flex; flex-direction: column;
    transform: translateX(-105%); z-index: 35; overflow-y: auto;
}
.host-app.host-sidebar-open .host-sidebar { transform: none; }
.host-app.host-sidebar-open .host-sidebar-backdrop { display: block; position: fixed; inset: 72px 0 0; background: rgba(15,23,42,.28); z-index: 34; }
.host-nav { display: flex; flex-direction: column; gap: 4px; }
.host-nav-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px;
    border: 0; border-radius: 12px; background: transparent; color: #475569; font: inherit; font-size: 14.5px;
    font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.host-nav-item svg { flex: 0 0 auto; }
.host-nav-item--home svg { color: #159A4A; }
.host-nav-item--locales svg { color: #0F766E; }
.host-nav-item--tvs svg { color: #059669; }
.host-nav-item--campanas svg { color: #D97706; }
.host-nav-item--stats svg { color: #7C3AED; }
.host-nav-item--crear svg { color: #16A34A; }
.host-nav-item--registrar svg { color: #0F766E; }
.host-nav-item--switch svg { color: #16A34A; }
.host-nav-item.active { background: #159A4A; color: #fff; font-weight: 600; }
.host-nav-item.active svg { color: #fff; }
.host-nav-label {
    margin: 14px 12px 6px; padding-top: 12px; border-top: 1px solid #EEF2F6;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8;
}
.host-switch-form { margin: 0; }
.host-side-note {
    margin-top: auto; display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: #E8F8EF; color: #0F7A45;
}
.host-side-note p { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; }
.host-side-note-icon {
    width: 32px; height: 32px; border-radius: 10px; background: #fff; color: #159A4A;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

.host-main-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.host-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px 16px 8px; }
.host-dashboard { display: flex; flex-direction: column; gap: 16px; }
.host-push {
    background: #fff; border: 1px solid #E8EEF4; border-radius: 20px; padding: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.host-push h2 { margin: 0 0 4px; font-size: 18px; }
.host-push p { margin: 0; color: #64748B; font-size: 14px; }
.host-push-btn {
    margin-top: 12px; width: 100%; min-height: 48px; border: 0; border-radius: 14px;
    background: #159A4A; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.host-push-btn[disabled] { background: #E8F8EF; color: #0F7A45; cursor: default; }
.host-push-msg { margin-top: 8px; }
.host-push-msg[hidden] { display: none; }
.host-page-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.host-page-head h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; }
.host-page-head p, .host-card-head p { margin: 0; color: #64748B; font-size: 14px; }
.host-date {
    display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E8EEF4;
    border-radius: 12px; padding: 8px 12px; color: #64748B; min-height: 48px;
}
.host-date small { display: block; font-size: 11px; color: #94A3B8; }
.host-date strong { display: block; font-size: 13px; color: #0F172A; }

.host-metrics { display: grid; grid-template-columns: 1fr; gap: 12px; }
.host-metric-card {
    display: flex; gap: 12px; align-items: flex-start; min-height: 108px; padding: 16px;
    border-radius: 16px; border: 1px solid rgba(15,23,42,.04); box-shadow: 0 8px 20px rgba(15,23,42,.04);
}
.host-metric-card--locales { background: #EAF3FF; }
.host-metric-card--tvs { background: #E8F8EF; }
.host-metric-card--campanas { background: #FFF6E8; }
.host-metric-card--audiencia { background: #F4EEFF; }
.host-metric-icon {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fff; flex: 0 0 auto;
}
.host-metric-card--locales .host-metric-icon { color: #2563EB; }
.host-metric-card--tvs .host-metric-icon { color: #159A4A; }
.host-metric-card--campanas .host-metric-icon { color: #D97706; }
.host-metric-card--audiencia .host-metric-icon { color: #7C3AED; }
.host-metric-card h2 { margin: 0; font-size: 13px; font-weight: 600; color: #334155; }
.host-metric-value { margin: 4px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #0F172A; }
.host-metric-hint { margin: 6px 0 0; font-size: 12px; color: #64748B; }

.host-dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.host-map-card, .host-quick-actions, .host-tvs-card {
    background: #fff; border: 1px solid #E8EEF4; border-radius: 16px; box-shadow: 0 8px 24px rgba(15,23,42,.04); padding: 16px;
}
.host-card-head { display: flex; gap: 10px; align-items: flex-start; }
.host-card-head h2 { margin: 0 0 2px; font-size: 16px; }
.host-card-head--split { justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.host-card-icon {
    width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.host-card-icon--green { background: #E8F8EF; color: #159A4A; }
.host-card-icon--blue { background: #EAF3FF; color: #2563EB; }
.host-map { height: 280px; border-radius: 14px; overflow: hidden; margin-top: 12px; border: 1px solid #E8EEF4; }
.host-map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #EEF2F6; color: #475569; font-size: 13px; font-weight: 600; }
.host-map-legend li { display: inline-flex; align-items: center; }
.host-legend-dot { width: 8px; height: 8px; border-radius: 999px; margin-right: 8px; }
.host-legend-dot--pin { background: #2563EB; }
.host-legend-dot--on { background: #159A4A; }
.host-legend-dot--off { background: #CBD5E1; }
.leaflet-div-icon.host-pin { background: transparent; border: 0; }
.host-pin span {
    width: 28px; height: 28px; border-radius: 999px; background: #159A4A; color: #fff; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
    box-shadow: 0 4px 10px rgba(21,154,74,.35);
}
.host-popup strong { display: block; margin-bottom: 4px; }
.host-popup p { margin: 0 0 4px; font-size: 13px; color: #475569; }

.host-quick-actions { display: flex; flex-direction: column; gap: 8px; }
.host-quick-action {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 12px;
    border: 0; border-radius: 14px; text-align: left; text-decoration: none; color: #0F172A; font: inherit; cursor: pointer;
}
.host-quick-action--blue { background: #EAF3FF; }
.host-quick-action--green { background: #E8F8EF; }
.host-quick-action--amber { background: #FFF6E8; }
.host-quick-action--purple { background: #F4EEFF; }
.host-quick-action:hover { filter: brightness(.98); }
.host-action-icon { width: 36px; height: 36px; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.host-quick-action--blue .host-action-icon { color: #2563EB; }
.host-quick-action--green .host-action-icon { color: #159A4A; }
.host-quick-action--amber .host-action-icon { color: #D97706; }
.host-quick-action--purple .host-action-icon { color: #7C3AED; }
.host-action-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.host-action-copy strong { font-size: 14px; }
.host-action-copy small { display: block; margin-top: 2px; color: #64748B; font-size: 12px; }
.host-action-arrow { color: #94A3B8; font-size: 22px; }
.host-network-card { margin-top: 4px; padding: 14px; border-radius: 14px; background: #F3FBF6; border: 1px solid #DDF3E6; }
.host-network-card h3 { margin: 0 0 4px; font-size: 14px; }
.host-network-card p { margin: 0; color: #64748B; font-size: 13px; }

.host-filter select { min-height: 40px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; color: #334155; padding: 0 10px; font: inherit; }
.host-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.host-tvs-table-wrap { overflow-x: auto; }
.host-tvs-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.host-tvs-table th { text-align: left; font-size: 12px; color: #64748B; font-weight: 600; background: #F8FAFC; padding: 12px 14px; }
.host-tvs-table td { padding: 14px; border-top: 1px solid #F1F5F9; font-size: 14px; color: #334155; }
.host-tvs-table tbody tr:hover td { background: #F8FAFC; }
.host-status-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.host-status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.host-status-badge.is-activo { background: #E8F8EF; color: #0F7A45; }
.host-status-badge.is-inactivo { background: #FEE2E2; color: #B91C1C; }
.host-status-badge.is-otro { background: #F1F5F9; color: #475569; }
.host-tv-row-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; }
.host-tv-row-actions .host-local-link,
.host-tv-row-actions .host-status-badge { min-height: 36px; }
.host-tv-row-actions .host-local-link:disabled { opacity: .55; cursor: not-allowed; }
.host-tv-verify-link {
    display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 0 0 auto;
    min-height: 36px; padding: 4px 12px; border: 1px solid #E2E8F0; border-radius: 12px;
    background: #fff; color: #159A4A; font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1.2;
}
.host-tv-verified {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-height: 36px; padding: 4px 12px; border-radius: 12px;
    background: #E8F8EF; color: #0F7A45; font-size: 13px; font-weight: 700; line-height: 1.2;
}
@media (max-width: 700px) {
    .host-tv-row-actions .host-local-link,
    .host-tv-row-actions .host-status-badge,
    .host-tv-verify-link, .host-tv-verified { min-height: 44px; }
}
.host-tvs-table.host-tvs-table--listado { min-width: 0; }
@media (max-width: 700px) {
    .host-tvs-table--listado thead { display: none; }
    .host-tvs-table--listado,
    .host-tvs-table--listado tbody,
    .host-tvs-table--listado tr,
    .host-tvs-table--listado td { display: block; width: 100%; }
    .host-tvs-table--listado tr { padding: 8px 0 12px; }
    .host-tvs-table--listado td { border-top: 0; padding: 4px 14px; }
    .host-tvs-table--listado td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: #64748B; font-size: 12px; font-weight: 700; }
}
.host-footer {
    width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 16px 24px;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #94A3B8; font-size: 13px;
}
.host-footer p { margin: 0; }
.host-footer strong { color: #0F172A; }
.host-footer-links { display: flex; gap: 14px; }

@media (min-width: 640px) {
    .host-user-copy { display: flex; }
    .host-metrics { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
    .host-menu-toggle { display: none; }
    .host-sidebar { position: sticky; top: 72px; transform: none; width: 250px; flex: 0 0 250px; height: calc(100vh - 72px); }
    .host-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .host-dashboard-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .85fr); align-items: start; }
    .host-map { height: 340px; }
    .host-main { padding: 24px 24px 8px; }
    .host-mobile-home { display: none; }
    .host-desktop-home { display: contents; }
    .host-nav-item--instalar { display: none; }
}
.host-mobile-home { display: none; }
@media (max-width: 979px) {
    .host-desktop-home { display: none; }
    .host-dashboard > #host-tvs { display: none; }
    .host-dashboard.host-solo-tvs > #host-tvs { display: block; }
    .host-mobile-home { display: flex; flex-direction: column; gap: 16px; }
    .host-mobile-home h1 { margin: 4px 0 0; font-size: 28px; letter-spacing: -0.03em; }
    .host-mobile-home > p { margin: 0; color: #64748B; font-size: 15px; }
    .host-mobile-steps { list-style: none; display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0; }
    .host-mobile-steps li { display: flex; align-items: center; gap: 8px; color: #94A3B8; font-size: 13px; font-weight: 700; }
    .host-mobile-steps li span {
        width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
        background: #E2E8F0; color: #64748B; font-size: 13px;
    }
    .host-mobile-steps li.is-on { color: #159A4A; }
    .host-mobile-steps li.is-on span, .host-mobile-steps li.is-done span { background: #159A4A; color: #fff; }
    .host-mobile-steps li + li::before { content: ''; width: 28px; height: 2px; background: #E2E8F0; }
    .host-mobile-card, .host-mobile-ready {
        background: #fff; border: 1px solid #E8EEF4; border-radius: 20px; padding: 28px 20px;
        box-shadow: 0 8px 24px rgba(15,23,42,.04); text-align: center;
    }
    .host-mobile-art { display: block; width: 180px; height: 120px; margin: 0 auto 8px; }
    .host-mobile-art svg { width: 100%; height: 100%; }
    .host-mobile-card h2 { display: block; margin: 0 0 8px; font-size: 24px; }
    .host-mobile-card p { margin: 0 0 18px; color: #64748B; font-size: 15px; }
    .host-mobile-cta {
        display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px;
        border-radius: 14px; background: #159A4A; color: #fff; font-weight: 700; text-decoration: none; font-size: 17px;
    }
    .host-mobile-cta::after { content: ' →'; }
    .host-mobile-note { color: #64748B; font-size: 14px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .host-mobile-note svg { flex: 0 0 auto; color: #F59E0B; }
    .host-mobile-note--grafica svg { color: #0284C7; }
    .host-install {
        display: block; text-align: left;
        background: #fff; border: 1px solid #E8EEF4; border-radius: 20px; padding: 16px;
        box-shadow: 0 8px 24px rgba(15,23,42,.04);
    }
    .host-install[hidden],
    .host-install-invite[hidden],
    .host-install-guide[hidden],
    .host-install-guide ol[hidden],
    .host-install-go[hidden] { display: none; }
    .host-install-invite { display: flex; gap: 12px; align-items: flex-start; }
    .host-install-mark {
        width: 44px; height: 44px; border-radius: 14px; background: #E8F8EF; color: #159A4A;
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    }
    .host-install-copy { min-width: 0; flex: 1; }
    .host-install h2 { margin: 0 0 4px; font-size: 18px; }
    .host-install-copy > p { margin: 0; color: #64748B; font-size: 14px; }
    .host-install-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
    .host-install-guide h2 { margin: 0 0 8px; font-size: 18px; }
    .host-install-guide ol { margin: 0; padding-left: 1.25em; color: #334155; font-size: 15px; line-height: 1.45; }
    .host-install-guide li { margin: 0 0 8px; overflow-wrap: anywhere; }
    .host-install-guide p { margin: 0; color: #334155; font-size: 15px; line-height: 1.45; }
    .host-install-back {
        width: 100%; min-height: 48px; margin-top: 8px; border: 1px solid #E2E8F0; border-radius: 14px;
        background: #fff; color: #334155; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    }
    .host-install-go {
        width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: #159A4A; color: #fff;
        font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    }
    .host-install-later {
        width: 100%; min-height: 44px; border: 0; border-radius: 14px; background: transparent; color: #64748B;
        font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    }
    .host-nav-item--instalar:disabled { cursor: default; }
    .host-mobile-saludo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; }
    .host-mobile-saludo p { margin: 0; text-align: right; }
    .host-mobile-ready {
        display: flex; gap: 12px; align-items: center; text-align: left;
        background: #E8F8EF; border-color: #BBF7D0;
    }
    .host-mobile-ready-mark { font-size: 28px; }
    .host-mobile-ready strong { display: block; margin: 0 0 4px; font-size: 18px; }
    .host-mobile-ready p { margin: 0; color: #334155; font-size: 14px; }
    .host-mobile-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .host-mobile-row {
        display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-height: 118px; padding: 14px;
        border: 1px solid #E8EEF4; border-radius: 16px; background: #fff; color: #0F172A;
        font: inherit; text-align: left; text-decoration: none; cursor: pointer;
    }
    .host-mobile-row strong { display: block; font-size: 15px; }
    .host-mobile-row small { display: block; margin-top: 2px; color: #64748B; font-size: 12px; font-weight: 500; }
    .host-mobile-row-icon {
        width: 40px; height: 40px; border-radius: 12px; background: #E8F8EF; color: #159A4A;
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    }
    .host-mobile-row--verde { background: #159A4A; color: #fff; border-color: #159A4A; }
    .host-mobile-row--verde small { color: #DCFCE7; }
    .host-mobile-row--verde .host-mobile-row-icon { background: #fff; }
}

@media (max-width: 979px) {
    #host-tvs.host-tvs-card {
        background: transparent; border: 0; box-shadow: none; padding: 0;
    }
    #host-tvs .host-card-head--split {
        flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 14px;
    }
    #host-tvs .host-card-head--split > .host-card-head { width: 100%; align-items: flex-start; }
    #host-tvs .host-card-head--split > .host-card-head > div { min-width: 0; flex: 1; }
    #host-tvs .host-card-icon { width: 48px; height: 48px; border-radius: 14px; }
    #host-tvs .host-card-icon svg { width: 22px; height: 22px; }
    #host-tvs .host-card-head h2 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.15; }
    #host-tvs .host-card-head p { margin: 0; color: #64748B; font-size: 15px; line-height: 1.4; }
    #host-tvs .host-filter { display: block; width: 100%; }
    #host-tvs .host-filter select {
        width: 100%; min-height: 48px; border-radius: 14px; padding: 0 14px 0 42px;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px;
    }
    #host-tvs .host-tvs-table-wrap { overflow: visible; }
    #host-tvs .host-tvs-table--listado thead { display: none; }
    #host-tvs .host-tvs-table--listado,
    #host-tvs .host-tvs-table--listado tbody {
        display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0;
    }
    #host-tvs .host-tvs-table--listado tr[data-estado] {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-areas: "nombre nombre" "local ubicacion" "acciones acciones";
        gap: 14px 12px; position: relative; width: 100%; min-width: 0;
        background: #fff; border: 1px solid #E8EEF4; border-radius: 18px;
        box-shadow: 0 8px 24px rgba(15,23,42,.04); padding: 16px;
    }
    #host-tvs .host-tvs-table--listado tr:not([data-estado]) {
        display: block; background: #fff; border: 1px solid #E8EEF4; border-radius: 18px; padding: 16px;
    }
    #host-tvs .host-tvs-table tbody tr:hover td { background: transparent; }
    #host-tvs .host-tvs-table--listado td {
        display: block; width: auto; min-width: 0; border: 0; padding: 0; overflow-wrap: anywhere;
    }
    #host-tvs .host-tvs-table--listado td::before {
        content: attr(data-label); display: block; margin: 0 0 2px;
        color: #94A3B8; font-size: 12px; font-weight: 600; line-height: 1.2;
    }
    #host-tvs .host-tvs-table--listado td[data-label="Nombre del TV"] {
        grid-area: nombre; display: flex; align-items: center; gap: 12px;
        padding-right: 104px; color: #0F172A; font-size: 18px; font-weight: 700; line-height: 1.25;
    }
    #host-tvs .host-tvs-table--listado td[data-label="Nombre del TV"]::before {
        content: ''; width: 42px; height: 42px; flex: 0 0 42px; margin: 0; border-radius: 12px;
        background: #E8F8EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23159A4A' stroke-width='2'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    }
    #host-tvs .host-tvs-table--listado td[data-label="Local"] { grid-area: local; color: #0F172A; font-size: 14px; font-weight: 700; }
    #host-tvs .host-tvs-table--listado td[data-label="Ubicación"] { grid-area: ubicacion; color: #0F172A; font-size: 14px; font-weight: 700; }
    #host-tvs .host-tvs-table--listado td[data-label="Local"]::before,
    #host-tvs .host-tvs-table--listado td[data-label="Ubicación"]::before {
        padding-left: 20px; background-repeat: no-repeat; background-position: left center; background-size: 14px 14px;
    }
    #host-tvs .host-tvs-table--listado td[data-label="Local"]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5z'/%3E%3C/svg%3E");
    }
    #host-tvs .host-tvs-table--listado td[data-label="Ubicación"]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    }
    #host-tvs .host-tvs-table--listado td[data-label="Acciones"] { grid-area: acciones; }
    #host-tvs .host-tvs-table--listado td[data-label="Acciones"]::before,
    #host-tvs .host-tvs-table--listado td:not([data-label])::before { content: none; display: none; }
    #host-tvs .host-status-badge { position: absolute; top: 18px; right: 16px; }
    #host-tvs .host-tv-row-actions {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; width: 100%;
    }
    #host-tvs .host-tv-row-actions .host-local-link,
    #host-tvs .host-tv-verify-link,
    #host-tvs .host-tv-verified {
        width: 100%; min-height: 48px; border-radius: 14px; gap: 8px;
    }
    #host-tvs .host-tv-verify-link { background: #E8F8EF; border-color: #BBF7D0; }
    #host-tvs .host-local-link::before,
    #host-tvs .host-tv-verify-link::before {
        content: ''; width: 16px; height: 16px; flex: 0 0 16px; background: center / 16px 16px no-repeat;
    }
    #host-tvs .host-local-link::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    }
    #host-tvs .host-tv-verify-link::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23159A4A' stroke-width='2'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E");
    }
}

/* Crear local */
.local-page {
    font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #F5F7FA;
    color: #0F172A;
    min-height: 100vh;
}
.local-layout { min-height: 100vh; display: flex; flex-direction: column; }
.local-header {
    display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 18px;
    background: #fff; border-bottom: 1px solid #E8EEF4; position: sticky; top: 0; z-index: 40;
}
.local-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #0F172A; }
.local-brand strong { display: block; font-size: 18px; }
.local-brand small { display: block; color: #94A3B8; font-size: 12px; }
.local-brand-mark {
    width: 36px; height: 36px; border-radius: 10px; background: #159A4A; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.local-header-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.local-icon-btn {
    width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #64748B;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.local-user-menu { position: relative; }
.local-user-summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.local-user-summary::-webkit-details-marker { display: none; }
.local-avatar {
    width: 40px; height: 40px; border-radius: 999px; background: #159A4A; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.local-user-copy { display: none; flex-direction: column; line-height: 1.2; }
.local-user-name { font-size: 14px; font-weight: 600; }
.local-user-role { font-size: 12px; color: #64748B; }
.local-user-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: #fff;
    border: 1px solid #E8EEF4; border-radius: 12px; box-shadow: 0 12px 28px rgba(15,23,42,.08); padding: 6px; z-index: 50;
}
.local-user-dropdown a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: #B91C1C; text-decoration: none; }
.local-body { display: flex; flex: 1; min-width: 0; }
.local-sidebar-backdrop { display: none; }
.local-sidebar {
    position: fixed; top: 72px; bottom: 0; left: 0; width: min(270px, 86vw); background: #fff;
    border-right: 1px solid #E8EEF4; padding: 16px 12px; display: flex; flex-direction: column;
    transform: translateX(-105%); z-index: 35; overflow-y: auto;
}
.local-page.local-sidebar-open .local-sidebar { transform: none; }
.local-page.local-sidebar-open .local-sidebar-backdrop { display: block; position: fixed; inset: 72px 0 0; background: rgba(15,23,42,.28); z-index: 34; }
.local-nav { display: flex; flex-direction: column; gap: 4px; }
.local-nav-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px;
    border: 0; border-radius: 12px; background: transparent; color: #475569; font: inherit; font-size: 14.5px;
    font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.local-nav-item svg { color: #159A4A; flex: 0 0 auto; }
.local-nav-item.active { background: #159A4A; color: #fff; font-weight: 600; }
.local-nav-item.active svg { color: #fff; }
.local-nav-label {
    margin: 14px 12px 6px; padding-top: 12px; border-top: 1px solid #EEF2F6;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8;
}
.local-switch-form { margin: 0; }
.local-side-note {
    margin-top: auto; display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: #E8F8EF; color: #0F7A45;
}
.local-side-note p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.local-content { flex: 1 1 0; width: auto; max-width: none; min-width: 0; padding: 20px 16px 28px; }
.local-page-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.local-breadcrumb { margin: 0 0 6px; color: #94A3B8; font-size: 13px; display: flex; gap: 6px; }
.local-breadcrumb a { color: #64748B; text-decoration: none; }
.local-page-head h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; }
.local-page-head h1 svg { color: #2563EB; flex: 0 0 auto; }
.local-page-head > div > p { margin: 0; color: #64748B; }
.local-date {
    display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E8EEF4;
    border-radius: 12px; padding: 8px 12px; min-height: 48px;
}
.local-date small { display: block; font-size: 11px; color: #94A3B8; }
.local-date strong { display: block; font-size: 13px; }
.local-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.local-main, .local-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.local-card, .local-note {
    background: #fff; border: 1px solid #E8EEF4; border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,.04); padding: 16px;
}
.local-card-head { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.local-card-head > div { min-width: 0; }
.local-card-head h2 { margin: 0 0 2px; font-size: 16px; }
.local-card-head p, .local-note p, .local-note li { margin: 0; color: #64748B; font-size: 14px; }
.local-card-icon {
    width: 32px; height: 32px; border-radius: 10px; background: #E8F8EF; color: #159A4A;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.local-card-icon--blue { background: #EAF3FF; color: #2563EB; }
.local-page .form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.local-page .form-col { flex: 1 1 220px; min-width: 0; }
.local-page .form-group { margin-bottom: 12px; }
.local-page .form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.local-field-hint { display: block; margin: -2px 0 6px; color: #64748B; font-size: 12px; font-weight: 400; line-height: 1.4; }
.local-page .form-group input,
.local-page .form-group select {
    width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 12px;
    background: #fff; color: #0F172A; font: inherit; font-size: 15px;
}
.local-page .form-group input:focus,
.local-page .form-group select:focus { outline: 3px solid rgba(21,154,74,.2); border-color: #159A4A; }
.local-page .form-group input[type="checkbox"] {
    width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: 4px; flex: 0 0 auto;
}
.local-page .form-group label:has(input[type="checkbox"]) {
    display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500;
}
.local-map { height: 280px; border-radius: 14px; overflow: hidden; border: 1px solid #E8EEF4; margin-bottom: 12px; }
.local-location-button, .local-submit {
    gap: 8px;
}
.local-location-button {
    width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: #159A4A; color: #fff;
    font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.local-location-button:disabled { opacity: .7; cursor: wait; }
.local-geo-status, .local-coords { margin: 8px 0 0; color: #64748B; font-size: 13px; }
.local-note h3 { margin: 0 0 8px; font-size: 15px; }
.local-note ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.local-note--tips { background: #F3FBF6; }
.local-note--important { background: #FFF9EE; }
.local-actions { display: flex; justify-content: space-between; gap: 12px; }
.local-cancel, .local-submit {
    min-height: 48px; padding: 0 18px; border-radius: 12px; font: inherit; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
}
.local-cancel { background: #fff; color: #334155; border: 1px solid #E2E8F0; }
.local-submit { background: #159A4A; color: #fff; border: 0; }
.local-footer {
    width: 100%; margin: 8px 0 0; padding: 16px 0 8px;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #94A3B8; font-size: 13px;
}
.local-footer p { margin: 0; }
.local-footer strong { color: #0F172A; }
.local-footer-links { display: flex; gap: 14px; }
.local-page .alert-error, .local-page .alert-success { border-radius: 12px; margin-bottom: 12px; }

@media (max-width: 700px) {
    .local-page-head { flex-direction: column; }
    .local-page-head h1 { font-size: 24px; }
}
@media (min-width: 640px) {
    .local-user-copy { display: flex; }
}
@media (min-width: 980px) {
    .local-menu-toggle { display: none; }
    .local-sidebar { position: sticky; top: 72px; transform: none; width: 250px; flex: 0 0 250px; height: calc(100vh - 72px); }
    .local-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 380px); }
    .local-side { position: sticky; top: 88px; }
    .local-map { height: 340px; }
    .local-content { padding: 24px 28px; }
}

/* Mis locales y editar local */
.host-breadcrumb { margin: 0 0 6px; color: #94A3B8; font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; }
.host-breadcrumb a { color: #64748B; text-decoration: none; }
.host-locales-mark { display: none; }
.host-locales-create {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px;
    border-radius: 12px; background: #159A4A; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.host-locales-tools { display: flex; gap: 12px; flex-wrap: wrap; }
.host-locales-tools input, .host-locales-tools select {
    min-height: 46px; border: 1px solid #E2E8F0; border-radius: 12px; padding: 0 12px; background: #fff; color: #0F172A; font: inherit;
}
.host-locales-tools input { flex: 1 1 220px; }
.host-local-list { display: flex; flex-direction: column; gap: 12px; }
.host-local-card { display: flex; flex-direction: column; gap: 12px; }
.host-local-top, .host-local-actions { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.host-local-card h2 { margin: 0 0 4px; font-size: 18px; }
.host-local-card p { margin: 0; color: #64748B; font-size: 14px; }
.host-local-meta { display: flex; flex-direction: column; gap: 4px; color: #334155; font-size: 14px; }
.host-local-meta strong { color: #0F172A; }
.host-local-link, .host-editar-cancel, .host-editar-save {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
    border-radius: 12px; font-weight: 700; text-decoration: none; font: inherit; cursor: pointer;
}
.host-local-link { background: #fff; color: #334155; border: 1px solid #E2E8F0; }
.host-local-link--edit, .host-editar-save { background: #159A4A; color: #fff; border: 0; }
@media (max-width: 979px) {
    .host-locales-page .host-page-head {
        display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center;
    }
    .host-locales-page .host-page-head > div { display: contents; }
    .host-locales-page .host-breadcrumb { grid-column: 1 / -1; }
    .host-locales-page .host-locales-mark {
        display: inline-flex; align-items: center; justify-content: center; grid-column: 1; grid-row: 2 / span 2;
        width: 48px; height: 48px; border-radius: 14px; background: #E8F8EF; color: #159A4A;
    }
    .host-locales-page .host-page-head h1 { grid-column: 2; grid-row: 2; margin: 0; font-size: 26px; line-height: 1.1; }
    .host-locales-page .host-page-head > div > p:last-child { grid-column: 2; grid-row: 3; }
    .host-locales-page .host-locales-create {
        grid-column: 1 / -1; justify-self: start; min-height: 48px; margin-top: 8px; white-space: nowrap;
    }
    .host-locales-page .host-metrics {
        display: flex; gap: 0; padding: 6px; background: #E8F8EF; border-radius: 16px;
    }
    .host-locales-page .host-metric-card {
        flex: 1 1 0; min-width: 0; min-height: 0; padding: 10px 8px; background: transparent;
        border: 0; box-shadow: none; flex-direction: column; align-items: center; text-align: center; gap: 2px;
    }
    .host-locales-page .host-metric-card + .host-metric-card { border-left: 1px solid rgba(21,154,74,.18); }
    .host-locales-page .host-metric-icon { width: 32px; height: 32px; }
    .host-locales-page .host-metric-card > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
    .host-locales-page .host-metric-value { order: -1; font-size: 24px; }
    .host-locales-page .host-metric-card h2 { font-size: 12px; line-height: 1.25; }
    .host-locales-page .host-metric-hint { font-size: 11px; }
    .host-locales-page .host-locales-filters {
        background: transparent; border: 0; box-shadow: none; padding: 0;
    }
    .host-locales-page .host-locales-tools { flex-direction: column; gap: 10px; }
    .host-locales-page .host-locales-tools input,
    .host-locales-page .host-locales-tools select {
        width: 100%; flex: 0 0 auto; min-height: 48px; height: 48px; border-radius: 14px;
    }
    .host-locales-page .host-locales-tools input {
        padding-left: 40px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 18px 18px no-repeat;
    }
    .host-locales-page .host-locales-tools select {
        padding-left: 40px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z'/%3E%3C/svg%3E") 14px center / 18px 18px no-repeat;
    }
    .host-locales-page .host-local-list { gap: 12px; }
    .host-locales-page .host-local-card {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "top top" "tipo tipo" "dir dir" "ubi ubi" "tvs aud" "edit edit";
        gap: 10px 8px; border-radius: 18px; padding: 16px;
    }
    .host-locales-page .host-local-top { grid-area: top; align-items: flex-start; gap: 10px; }
    .host-locales-page .host-local-top > div { min-width: 0; flex: 1; }
    .host-locales-page .host-local-card h2 { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
    .host-locales-page .host-local-tipo,
    .host-locales-page .host-local-dir,
    .host-locales-page .host-local-ubi { overflow-wrap: anywhere; }
    .host-locales-page .host-local-tipo { grid-area: tipo; margin: 0; padding-left: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5z'/%3E%3C/svg%3E") left 2px / 14px 14px no-repeat; }
    .host-locales-page .host-local-dir { grid-area: dir; margin: 0; color: #334155; padding-left: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") left 2px / 14px 14px no-repeat; }
    .host-locales-page .host-local-meta { display: contents; }
    .host-locales-page .host-local-ubi { grid-area: ubi; padding-left: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") left 2px / 14px 14px no-repeat; }
    .host-locales-page .host-local-stat {
        display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "icon num" "label label";
        align-items: center; column-gap: 8px; row-gap: 4px; min-width: 0; min-height: 56px; padding: 10px;
        border-radius: 12px; background: #F8FAFC; color: #334155;
    }
    .host-locales-page .host-local-tvs { grid-area: tvs; }
    .host-locales-page .host-local-aud { grid-area: aud; }
    .host-locales-page .host-local-stat::before {
        content: ''; grid-area: icon; width: 28px; height: 28px; border-radius: 8px; background: #E8F8EF center / 16px 16px no-repeat;
    }
    .host-locales-page .host-local-tvs::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23159A4A' stroke-width='2'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E"); }
    .host-locales-page .host-local-aud::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23159A4A' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
    .host-locales-page .host-local-count { grid-area: num; font-size: 18px; font-weight: 700; color: #0F172A; line-height: 1; }
    .host-locales-page .host-local-stat strong { grid-area: label; font-size: 11px; font-weight: 600; color: #64748B; line-height: 1.25; }
    .host-locales-page .host-local-actions { grid-area: edit; align-self: end; justify-content: flex-end; margin: 0; }
    .host-locales-page .host-local-actions .host-local-link--edit { width: auto; min-height: 48px; padding: 0 14px; border-radius: 14px; gap: 6px; }
    .host-locales-page .host-local-actions .host-local-link--edit::before {
        content: ''; width: 16px; height: 16px; flex: 0 0 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    }
}
.host-editar-cancel { background: #fff; color: #334155; border: 1px solid #E2E8F0; }
.host-editar-local { display: flex; flex-direction: column; gap: 16px; }
.host-editar-local .form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.host-editar-local .form-col { flex: 1 1 220px; min-width: 0; }
.host-editar-local .form-group { margin-bottom: 12px; }
.host-editar-local .form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.host-editar-local .form-group input,
.host-editar-local .form-group select {
    width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 12px;
    background: #fff; color: #0F172A; font: inherit; font-size: 15px;
}
.host-editar-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.host-locales-empty { margin: 0; color: #64748B; }
@media (min-width: 980px) {
    .host-metrics.host-metrics--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Registrar televisor */
.host-tv-register-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.host-tv-register-main, .host-tv-register-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.host-tv-local-unico { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.host-tv-local-unico strong { font-size: 16px; color: #0F172A; }
.host-tv-local-unico span { color: #64748B; font-size: 14px; }
.host-tv-register input[readonly] { background: #F8FAFC; color: #334155; }
.host-tv-register .local-map { height: 360px; margin-top: 4px; }
.host-tv-help { margin: 6px 0 0; color: #64748B; font-size: 13px; }
.host-tv-register .host-tv-dia-activo { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 0; cursor: pointer; }
.host-tv-register .form-group .host-tv-dia-activo input { width: auto; min-height: 0; margin: 0; }
.host-tv-register .host-tv-base { margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #EEF2F6; }
.host-tv-register .host-tv-base h3,
.host-tv-register .host-tv-semana-titulo { margin: 14px 0 6px; font-size: 16px; }
.host-tv-register .host-tv-base-horas,
.host-tv-register .host-tv-base-dias { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 8px; }
.host-tv-register .host-tv-base-horas .form-group { margin: 0; }
.host-tv-register .host-tv-base-horas input[type="time"] { width: 140px; min-height: 40px; }
.host-tv-register #disp-aplicar { margin-top: 12px; }
.host-tv-register .host-tv-semana-fila {
    display: grid;
    grid-template-columns: 148px auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin: 0 0 8px;
}
.host-tv-register .host-tv-semana-horas { display: flex; align-items: center; gap: 8px; }
.host-tv-register .host-tv-semana-horas[hidden],
.host-tv-register .js-disp-guion[hidden] { display: none; }
.host-tv-register .js-disp-guion { color: #64748B; }
.host-tv-register .host-tv-semana-fila input[type="time"] { width: 124px; min-width: 124px; min-height: 40px; }
.host-tv-register .host-tv-semana-fila .tv-field-error { grid-column: 1 / -1; }
@media (max-width: 800px) {
    .host-tv-register .host-tv-semana-fila { grid-template-columns: 1fr; row-gap: 6px; margin-bottom: 12px; }
}
.host-tv-register .tv-field-error { margin: 6px 0 0; color: #B91C1C; font-size: 13px; font-weight: 600; }
.host-editar-local .form-group.has-error input,
.host-editar-local .form-group.has-error select { border-color: #F87171; }
.host-tv-drop {
    position: relative; border: 1px dashed #CBD5E1; border-radius: 16px; background: #F8FAFC;
    padding: 22px 16px; text-align: center;
}
.host-tv-drop h3 { margin: 8px 0 4px; font-size: 16px; }
.host-tv-drop p { margin: 0; color: #64748B; font-size: 14px; }
.host-tv-drop-icon {
    width: 48px; height: 48px; margin: 0 auto; border-radius: 14px; background: #E8F8EF; color: #159A4A;
    display: inline-flex; align-items: center; justify-content: center;
}
.host-tv-pick {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; padding: 0 16px;
    border-radius: 12px; background: #159A4A; color: #fff; font-weight: 700; cursor: pointer;
}
.host-editar-local .form-group input.host-tv-file-input {
    position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); border: 0;
}
.host-tv-photo { margin-top: 12px; border: 1px solid #E8EEF4; border-radius: 14px; overflow: hidden; background: #fff; }
.host-tv-photo img { display: block; width: 100%; max-height: 240px; object-fit: cover; background: #F8FAFC; }
.host-tv-photo p { margin: 0; padding: 10px 12px 0; color: #334155; font-size: 13px; }
.host-tv-photo-change {
    margin: 10px 12px 12px; min-height: 44px; padding: 0 14px; border: 1px solid #E2E8F0; border-radius: 12px;
    background: #fff; color: #334155; font: inherit; font-weight: 700; cursor: pointer;
}
.host-tv-tips { background: #F3FBF6; }
.host-tv-tips ul { margin: 8px 0 0; padding-left: 18px; color: #334155; display: flex; flex-direction: column; gap: 6px; }
.host-tv-confirm { display: flex; flex-direction: column; gap: 8px; }
.host-tv-confirm-mark {
    width: 42px; height: 42px; border-radius: 999px; background: #E8F8EF; color: #159A4A;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.host-tv-confirm h2 { margin: 0; font-size: 22px; }
.host-tv-confirm dl { margin: 8px 0; display: grid; gap: 8px; }
.host-tv-confirm dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #EEF2F6; }
.host-tv-confirm dt { color: #64748B; }
.host-tv-confirm dd { margin: 0; font-weight: 700; text-align: right; }
.host-tv-confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.host-tv-confirm-actions--movil { display: none; }
.host-tv-confirm a.host-tv-verificar {
    background: #F59E0B; color: #fff; border: 0; font-weight: 800;
    box-shadow: 0 8px 18px rgba(245, 158, 11, .35);
}
.host-tv-confirm a.host-tv-verificar:hover { background: #D97706; color: #fff; }
.host-campanas { display: flex; flex-direction: column; gap: 16px; }
.host-campanas-head h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; }
.host-campanas-head p, .host-campanas-vacio p { margin: 0; color: #64748B; }
.host-campanas-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.host-campanas-filtros button {
    min-height: 40px; padding: 0 14px; border: 1px solid #E2E8F0; border-radius: 999px;
    background: #fff; color: #334155; font: inherit; font-weight: 700; cursor: pointer;
}
.host-campanas-filtros button.is-on { background: #159A4A; color: #fff; border-color: #159A4A; }
.host-campanas-lista { display: flex; flex-direction: column; gap: 16px; }
.host-campanas-tv, .host-campanas-vacio {
    background: #fff; border: 1px solid #E8EEF4; border-radius: 20px; padding: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.host-campanas-tv-head { display: flex; gap: 12px; align-items: flex-start; }
.host-campanas-tv-head h2, .host-campanas-item h3 { margin: 0; }
.host-campanas-tv-head p, .host-campanas-linea {
    display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: #64748B;
}
.host-campanas-tv-head .host-status-badge { margin-left: auto; }
.host-campanas-icono, .host-campanas-arte {
    width: 44px; height: 44px; border-radius: 14px; background: #E8F8EF; color: #159A4A;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.host-campanas-items { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.host-campanas-item { border: 1px solid #E8EEF4; border-radius: 16px; padding: 14px; background: #F8FAFC; }
.host-campanas-item-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.host-campanas-estado {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px;
    font-size: 12px; font-weight: 800; white-space: nowrap;
}
.host-campanas-estado.is-activa { background: #E8F8EF; color: #0F7A45; }
.host-campanas-estado.is-pendiente { background: #FEF3C7; color: #B45309; }
.host-campanas-estado.is-pausada { background: #E0E7FF; color: #3730A3; }
.host-campanas-estado.is-finalizada, .host-campanas-estado.is-cancelada, .host-campanas-estado.is-otro { background: #F1F5F9; color: #334155; }
.host-campanas-dias, .host-campanas-asignacion, .host-campanas-medio { margin: 8px 0 0; font-size: 14px; }
.host-campanas-asignacion { color: #64748B; }
.host-campanas-medio { color: #0F766E; font-weight: 700; }
.host-campanas-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.host-campanas-vacio h2 { margin: 0; font-size: 22px; }
.host-campanas-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px;
    padding: 0 18px; border-radius: 14px; background: #159A4A; color: #fff; font-weight: 700; text-decoration: none;
}
.host-campanas-vacio-filtro { margin: 0; color: #64748B; }
@media (max-width: 979px) {
    .host-campanas-head h1 { font-size: 26px; }
    .host-campanas-filtros button { min-height: 44px; }
    .host-campanas-tv-head { flex-wrap: wrap; }
    .host-campanas-item-top { flex-direction: column; }
}
@media (max-width: 979px) {
    .host-tv-confirm { align-items: center; text-align: center; padding: 28px 16px; }
    .host-tv-confirm-mark { width: 72px; height: 72px; font-size: 32px; }
    .host-tv-confirm .host-tv-confirm-actions:not(.host-tv-confirm-actions--movil) { display: none; }
    .host-tv-confirm .host-tv-confirm-actions--movil { display: flex; flex-direction: column; width: 100%; }
    .host-tv-confirm .host-tv-confirm-actions--movil a { width: 100%; min-height: 52px; }
}
@media (min-width: 980px) {
    .host-tv-register-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); }
}

/* Verificar televisor — fase 0 */
.host-tv-verify-steps { display: flex; flex-direction: column; gap: 12px; }
.host-tv-verify-step { border: 1px solid #E8EEF4; border-radius: 14px; padding: 14px 16px; background: #fff; }
.host-tv-verify-step h2 { margin: 0 0 4px; font-size: 16px; }
.host-tv-verify-step p { margin: 0; color: #64748B; font-size: 14px; }
.host-tv-verify-kicker { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #159A4A; }
.host-tv-verify-step.is-locked { background: #F8FAFC; }
.host-tv-verify-step.is-locked .host-tv-verify-kicker { color: #94A3B8; }
.host-tv-verify-next { margin-top: 12px; }
.host-tv-verify-next:disabled { background: #E2E8F0; color: #64748B; cursor: not-allowed; }
.host-tv-verify-status { margin: 0; font-size: 14px; color: #334155; }
.host-tv-verify-status.is-ok { color: #159A4A; font-weight: 700; }
.host-tv-verify-status.is-bad { color: #B91C1C; font-weight: 700; }
.host-tv-verify-status.is-wait { color: #64748B; }
.host-tv-verify-step.is-ready { background: #F3FBF6; border-color: #BBF7D0; }

/* Dashboard del anunciante */
.adv-app {
    --vm-primary: #1769E8;
    --vm-primary-dark: #0B2347;
    --vm-bg: #F5F8FC;
    --vm-card: #fff;
    --vm-text: #102A56;
    --vm-muted: #64748B;
    --vm-success: #16A765;
    --vm-warning: #F5B72A;
    --vm-danger: #E5484D;
    --vm-border: rgba(16, 42, 86, .08);
    font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--vm-bg);
    color: var(--vm-text);
    min-height: 100vh;
}
.adv-layout { min-height: 100vh; display: flex; background: var(--vm-bg); }
.adv-backdrop { display: none; }
.adv-sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(270px, 86vw); z-index: 35;
    display: flex; flex-direction: column; gap: 8px; padding: 18px 14px 14px;
    background: linear-gradient(180deg, #071B3A 0%, #0B2347 100%); color: #fff;
    transform: translateX(-105%); overflow-y: auto;
}
.adv-app.adv-sidebar-open .adv-sidebar { transform: none; }
.adv-app.adv-sidebar-open .adv-backdrop { display: block; position: fixed; inset: 0; background: rgba(7, 23, 58, .45); z-index: 34; }
.adv-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 4px 8px 12px; }
.adv-brand strong { display: block; font-size: 18px; }
.adv-brand small { display: block; color: #9FB0C9; font-size: 12px; }
.adv-brand-mark { width: 36px; height: 36px; border-radius: 10px; background: #1769E8; display: inline-flex; align-items: center; justify-content: center; }
.adv-nav { display: flex; flex-direction: column; gap: 4px; }
.adv-switch-form { margin: 0; }
.adv-nav-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px;
    border: 0; border-radius: 12px; background: transparent; color: #D6E2F2; font: inherit; font-size: 14px;
    font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.adv-nav-item svg { flex: 0 0 18px; }
.adv-nav-item:hover { background: rgba(255,255,255,.06); }
.adv-nav-item.active, .adv-nav-item:focus-visible { background: #1769E8; color: #fff; outline: 2px solid #93C5FD; outline-offset: 2px; }
.adv-profile { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.adv-profile strong, .adv-hello-user strong { display: block; font-size: 13px; }
.adv-profile small, .adv-hello-user small { display: block; color: #9FB0C9; font-size: 12px; }
.adv-avatar { width: 40px; height: 40px; border-radius: 999px; background: #1769E8; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.adv-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adv-topbar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--vm-border); }
.adv-menu-toggle { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--vm-text); cursor: pointer; }
.adv-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px; }
.adv-dashboard { display: flex; flex-direction: column; gap: 16px; }
.adv-hello { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.adv-hello h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; }
.adv-hello p, .adv-muted, .adv-empty p { margin: 0; color: var(--vm-muted); font-size: 14px; }
.adv-hello-user { display: none; align-items: center; gap: 10px; }
.adv-hello-user small { color: var(--vm-muted); }
.adv-metrics, .adv-split { display: grid; grid-template-columns: 1fr; gap: 12px; }
.adv-metric, .adv-card, .adv-cta, .adv-help {
    background: var(--vm-card); border: 1px solid var(--vm-border); border-radius: 16px;
    box-shadow: 0 8px 24px rgba(16, 42, 86, .04); padding: 20px;
}
.adv-metric-icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.adv-metric-icon.is-total { background: #E8F1FC; color: #1769E8; }
.adv-metric-icon.is-activa { background: #E7F8F0; color: #16A765; }
.adv-metric-icon.is-pendiente { background: #FFF6DE; color: #B8860B; }
.adv-metric-icon.is-finalizada { background: #F1F5F9; color: #64748B; }
.adv-metric-value { margin: 10px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.adv-metric-label { margin: 6px 0 0; color: var(--vm-muted); font-size: 14px; }
.adv-cta { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: #E8F1FC; }
.adv-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1769E8; }
.adv-cta h2, .adv-card h2, .adv-help h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.02em; }
.adv-cta-art { flex: 0 0 auto; }
.adv-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #1769E8; color: #fff;
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.adv-btn:hover { background: #0F56C2; }
.adv-btn:focus-visible, .adv-text-btn:focus-visible, .adv-icon-btn:focus-visible, .adv-nav-item:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.adv-btn--light { background: #fff; color: #1769E8; border: 1px solid #D6E4F7; }
.adv-card-head, .adv-help { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.adv-card-head h2 { margin: 0; }
.adv-text-btn { border: 0; background: transparent; color: #1769E8; font: inherit; font-weight: 600; cursor: pointer; }
.adv-empty { padding: 8px 0; }
.adv-empty strong { display: block; margin-bottom: 4px; }
.adv-table-wrap { overflow-x: auto; }
.adv-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.adv-table th { text-align: left; font-size: 12px; color: var(--vm-muted); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid #E8EEF4; }
.adv-table td { padding: 12px 8px; border-bottom: 1px solid #F1F5F9; font-size: 14px; vertical-align: middle; }
.adv-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.adv-badge.is-activa { background: #E7F8F0; color: #0F7A52; }
.adv-badge.is-pendiente { background: #FFF6DE; color: #8A6508; }
.adv-badge.is-finalizada, .adv-badge.is-otro { background: #F1F5F9; color: #475569; }
.adv-badge.is-pausada { background: #E8EEF5; color: #3E5678; }
.adv-actions { display: flex; gap: 8px; white-space: nowrap; }
.adv-icon-btn {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid #E2E8F0;
    border-radius: 10px; background: #fff; color: #1769E8; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.adv-dist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.adv-dist li { display: grid; grid-template-columns: 92px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; }
.adv-dist-bar { height: 8px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.adv-dist-bar span { display: block; height: 100%; border-radius: 999px; }
.adv-dist-bar .is-activa { background: #16A765; }
.adv-dist-bar .is-pendiente { background: #F5B72A; }
.adv-dist-bar .is-pausada { background: #8AA0BE; }
.adv-dist-bar .is-finalizada { background: #94A3B8; }
.adv-money { margin: 8px 0 4px; font-size: 28px; font-weight: 700; }
.adv-media-page { display: flex; flex-direction: column; gap: 16px; }
.adv-media-page h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; }
.adv-media-card { display: flex; flex-direction: column; gap: 8px; }
.adv-media-label { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--vm-text); }
.adv-media-preview { display: block; max-width: 280px; width: 100%; height: auto; border-radius: 12px; background: #F5F8FC; }
.adv-media-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.adv-media-form input[type=file] { max-width: 100%; font: inherit; font-size: 14px; }
.adv-media-msg { margin: 0; min-height: 1.2em; color: var(--vm-text); font-size: 14px; }
.adv-side-stack { display: flex; flex-direction: column; gap: 12px; }
.adv-modal { position: fixed; inset: 0; z-index: 60; background: rgba(7, 23, 58, .45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: auto; }
.adv-modal[hidden] { display: none; }
.adv-modal-card { width: min(760px, 100%); background: #fff; border-radius: 16px; padding: 16px; }
.adv-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.adv-modal-head button { min-height: 40px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; cursor: pointer; }
.adv-app .content-section h3 { margin-top: 0; color: var(--vm-text); }
.adv-app .campaigns-table th { background: #0B2347; }
.adv-app .status-finalizada { background: #F1F5F9; color: #475569; }
.adv-app .status-pausada { background: #E8EEF5; color: #3E5678; }
@media (max-width: 700px) {
    .adv-table { min-width: 0; }
    .adv-table thead { display: none; }
    .adv-table, .adv-table tbody, .adv-table tr, .adv-table td { display: block; width: 100%; }
    .adv-table tr { padding: 8px 0 12px; border-bottom: 1px solid #E8EEF4; }
    .adv-table td { border: 0; padding: 4px 0; }
    .adv-table td::before { content: attr(data-label); display: block; color: var(--vm-muted); font-size: 12px; font-weight: 700; }
    .adv-cta { flex-direction: column; align-items: flex-start; }
    .adv-help { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 720px) {
    .adv-hello-user { display: flex; }
    .adv-metrics { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
    .adv-menu-toggle, .adv-topbar { display: none; }
    .adv-sidebar { position: sticky; top: 0; transform: none; width: 260px; flex: 0 0 260px; height: 100vh; }
    .adv-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .adv-split { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); align-items: start; }
    .adv-main { padding: 28px 24px; }
}
.adv-wizard { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.adv-wizard h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; }
.adv-wizard-progress { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.adv-wizard-progress li {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 10px; border-radius: 12px; background: #fff; color: var(--vm-muted);
    border: 1px solid var(--vm-border); font-size: 14px; font-weight: 700;
}
.adv-wizard-progress li span {
    width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: #E8EEF5; color: #3E5678; flex: 0 0 auto;
}
.adv-wizard-progress li.is-current { background: #1769E8; color: #fff; border-color: #1769E8; }
.adv-wizard-progress li.is-current span { background: #fff; color: #1769E8; }
.adv-wizard-progress li.is-done { background: #E8F1FC; color: #1769E8; border-color: #D6E4F7; }
.adv-wizard-msg { margin: 0; min-height: 1.2em; font-weight: 600; }
.adv-wizard-fields, .adv-periodo-tv { display: flex; flex-direction: column; gap: 8px; }
.adv-wizard-fields input, .adv-wizard-fields textarea, .adv-wizard-fields select,
.adv-wizard select, .adv-wizard-filters input, .adv-wizard-filters select, .adv-periodo-tv input {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--vm-border); border-radius: 12px;
    background: #fff; color: var(--vm-text); font: inherit; font-size: 15px;
}
.adv-wizard-fields textarea { min-height: 96px; }
.adv-wizard-filters { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
.adv-wizard-filters label, .adv-wizard > form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; min-width: 0; }
.adv-wizard-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.adv-local-groups { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.adv-local-group { padding: 12px; border: 1px solid var(--vm-border); border-radius: 14px; background: #F8FBFF; min-width: 0; }
.adv-local-group h3 { margin: 0 0 4px; font-size: 16px; }
.adv-local-group p { margin: 0 0 8px; color: var(--vm-muted); overflow-wrap: anywhere; }
.adv-tv-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid #E8EEF4; font-weight: 600; }
.adv-tv-option input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.adv-tv-option span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adv-tv-option small { color: var(--vm-muted); font-weight: 500; }
.adv-wizard-count { margin: 0 0 8px; font-weight: 700; }
.adv-selected-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adv-selected-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #E8EEF4; }
.adv-selected-list li span { min-width: 0; overflow-wrap: anywhere; }
.adv-checkline { flex-direction: row !important; align-items: center; font-weight: 600; }
.adv-checkline input { width: 18px; height: 18px; }
.adv-period-general h3, .adv-resumen-datos h3 { margin: 12px 0 8px; font-size: 16px; }
.adv-wizard-done h2 { margin-top: 0; }
.adv-wizard-done dl { margin: 16px 0; }
.adv-wizard-done dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #E8EEF4; }
.adv-wizard-done dt { color: var(--vm-muted); font-weight: 600; }
.adv-wizard-done dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
@media (min-width: 720px) {
    .adv-wizard-filters { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    .adv-wizard-filters { grid-template-columns: 1fr 1fr 1fr; }
}

.admin-app {
    --admin-primary: #2563eb;
    --admin-primary-dark: #1d4ed8;
    --admin-bg: #f5f7fb;
    --admin-card: #ffffff;
    --admin-text: #172033;
    --admin-muted: #64748b;
    --admin-border: #e5e7eb;
    --admin-success: #16a34a;
    --admin-warning: #f59e0b;
    --admin-danger: #ef4444;
    --admin-info: #2563eb;
    margin: 0;
    background: var(--admin-bg);
    color: var(--admin-text);
    font-family: Inter, "Segoe UI", sans-serif;
    overflow-x: hidden;
}
.admin-dashboard { display: flex; min-height: 100vh; min-width: 0; }
.admin-sidebar {
    width: 260px; flex: 0 0 260px; background: #0f172a; color: #e2e8f0;
    display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0;
}
.admin-brand { display: flex; gap: 10px; align-items: center; padding: 22px 18px 12px; }
.admin-brand strong { display: block; letter-spacing: .04em; font-size: 14px; }
.admin-brand span { display: block; color: #94a3b8; font-size: 12px; line-height: 1.3; }
.admin-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--admin-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.admin-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px;
    border: 0; border-radius: 12px; background: transparent; color: #cbd5e1; font: inherit; font-size: 14px;
    font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.admin-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav-item.active { background: var(--admin-primary); color: #fff; }
.admin-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.admin-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.admin-sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.admin-main-col { flex: 1 1 auto; min-width: 0; }
.admin-menu-toggle { display: none; margin: 12px 16px 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--admin-border); border-radius: 12px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.admin-main { padding: 20px 16px 32px; min-width: 0; }
.admin-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.admin-header h1, .admin-page h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; }
.admin-header p, .admin-muted { margin: 0; color: var(--admin-muted); font-size: 14px; }
.admin-header-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-date { margin: 0; color: var(--admin-muted); font-size: 14px; }
.admin-profile { display: flex; align-items: center; gap: 10px; }
.admin-profile strong, .admin-profile small { display: block; }
.admin-profile small { color: var(--admin-muted); }
.admin-avatar { width: 40px; height: 40px; border-radius: 999px; background: #dbeafe; color: var(--admin-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.admin-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); padding: 16px; min-width: 0; }
.admin-metrics, .admin-quick-actions, .admin-dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.admin-metric-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.admin-metric-icon.is-info { background: #dbeafe; color: var(--admin-info); }
.admin-metric-icon.is-success { background: #dcfce7; color: var(--admin-success); }
.admin-metric-icon.is-tv { background: #ede9fe; color: #7c3aed; }
.admin-metric-icon.is-warning { background: #fef3c7; color: #b45309; }
.admin-metric-icon.is-danger { background: #fee2e2; color: var(--admin-danger); }
.admin-metric-label { margin: 10px 0 0; color: var(--admin-muted); font-size: 13px; font-weight: 600; }
.admin-metric-value { margin: 4px 0; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.admin-quick { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px; padding: 16px; border: 1px solid var(--admin-border); border-radius: 16px; background: #fff; text-align: left; font: inherit; cursor: pointer; color: var(--admin-text); }
.admin-quick strong { font-size: 16px; }
.admin-quick span { color: var(--admin-muted); font-size: 13px; }
.admin-quick-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.admin-quick.is-users { background: #eff6ff; }
.admin-quick.is-users .admin-quick-icon { background: #dbeafe; color: var(--admin-primary); }
.admin-quick.is-campaigns { background: #ecfdf5; }
.admin-quick.is-campaigns .admin-quick-icon { background: #d1fae5; color: var(--admin-success); }
.admin-quick.is-payments { background: #fffbeb; }
.admin-quick.is-payments .admin-quick-icon { background: #fef3c7; color: #b45309; }
.admin-quick.is-earnings { background: #f5f3ff; }
.admin-quick.is-earnings .admin-quick-icon { background: #ede9fe; color: #7c3aed; }
.admin-quick.is-tv { background: #eff6ff; }
.admin-quick.is-tv .admin-quick-icon { background: #dbeafe; color: var(--admin-primary); }
.admin-quick .admin-badge { position: absolute; top: 12px; right: 12px; }
.admin-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.admin-panel-head h2, .admin-panel h2 { margin: 0; font-size: 18px; }
.admin-link { border: 0; background: transparent; color: var(--admin-primary); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.admin-empty { margin: 8px 0; color: var(--admin-muted); }
.admin-table-wrap { overflow-x: auto; max-width: 100%; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-size: 12px; color: var(--admin-muted); font-weight: 700; padding: 8px; border-bottom: 1px solid var(--admin-border); }
.admin-table td { padding: 10px 8px; border-bottom: 1px solid #f1f5f9; font-size: 14px; vertical-align: middle; }
.admin-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f1f5f9; color: #475569; }
.admin-status.is-pendiente, .admin-status.is-pausada { background: #fef3c7; color: #92400e; }
.admin-status.is-programado { background: #dbeafe; color: #1d4ed8; }
.admin-status.is-activa, .admin-status.is-verificado { background: #dcfce7; color: #166534; }
.admin-status.is-finalizada, .admin-status.is-otro, .admin-status.is-sin { background: #f1f5f9; color: #475569; }
.admin-status.is-cancelado { background: #fee2e2; color: #991b1b; }
.admin-status.is-anfitrion { background: #dcfce7; color: #166534; }
.admin-status.is-anunciante { background: #dbeafe; color: #1d4ed8; }
.admin-status.is-administrador { background: #ede9fe; color: #6d28d9; }
.admin-tv-summary { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.admin-donut {
    width: 148px; height: 148px; border-radius: 50%;
    background: conic-gradient(var(--admin-success) var(--admin-donut), #e5e7eb 0);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.admin-donut div { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.admin-donut strong { font-size: 22px; }
.admin-donut span, .admin-legend { color: var(--admin-muted); font-size: 13px; }
.admin-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-legend li { display: flex; align-items: center; gap: 8px; }
.admin-legend b { margin-left: auto; color: var(--admin-text); }
.admin-legend i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.admin-legend .is-success { background: var(--admin-success); }
.admin-legend .is-muted { background: #94a3b8; }
.admin-legend .is-info { background: var(--admin-info); }
.admin-legend .is-warning { background: var(--admin-warning); }
.admin-bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin: 8px 0 12px; }
.admin-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.admin-bar span { display: block; width: 100%; max-width: 36px; border-radius: 8px 8px 0 0; background: var(--admin-primary); }
.admin-bar small, .admin-bar b { color: var(--admin-muted); font-size: 11px; font-weight: 600; text-align: center; }
.admin-money { margin: 8px 0 4px; font-size: 28px; font-weight: 700; }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-tab { min-height: 40px; padding: 0 14px; border: 1px solid var(--admin-border); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.admin-tab.is-on { background: var(--admin-primary); color: #fff; border-color: var(--admin-primary); }
.admin-modal { position: fixed; inset: 0; z-index: 70; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: auto; }
.admin-modal[hidden] { display: none; }
.admin-modal-card { width: min(760px, 100%); background: #fff; border-radius: 16px; padding: 16px; }
.admin-modal img, .admin-modal video { display: block; max-width: 100%; margin-top: 8px; }
.admin-backdrop { display: none; border: 0; padding: 0; }
@media (max-width: 979px) {
    .admin-sidebar { position: fixed; z-index: 40; transform: translateX(-105%); transition: transform .2s ease; }
    body.admin-sidebar-open .admin-sidebar { transform: none; }
    body.admin-sidebar-open .admin-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(15, 23, 42, .45); }
    .admin-menu-toggle { display: inline-flex; }
}
@media (min-width: 720px) {
    .admin-metrics, .admin-quick-actions { grid-template-columns: 1fr 1fr; }
    .admin-metrics--tres { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 980px) {
    .admin-menu-toggle { display: none; }
    .admin-main { padding: 28px 24px 40px; }
    .admin-dashboard-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); align-items: start; }
}
@media (min-width: 1200px) {
    .admin-metrics, .admin-quick-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .admin-table thead { display: none; }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
    .admin-table tr { padding: 8px 0 12px; border-bottom: 1px solid var(--admin-border); }
    .admin-table td { border: 0; padding: 4px 0; }
    .admin-table td::before { content: attr(data-label); display: block; color: var(--admin-muted); font-size: 12px; font-weight: 700; }
}
.vm-solo-movil, .vm-cerrar-menu, .vm-guia, .vm-pasos-nav, .vm-exito-arte { display: none; }
@media (max-width: 979px) {
    .vm-solo-escritorio { display: none; }
    h2.vm-solo-movil, p.vm-solo-movil, span.vm-solo-movil { display: inline; }
    h2.vm-solo-movil, p.vm-solo-movil { display: block; }
    .vm-cerrar-menu {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; margin: 0 0 8px auto; border: 0; border-radius: 12px;
        background: #F8FAFC; color: #334155; cursor: pointer;
    }
    .host-app.host-sidebar-open .host-sidebar,
    .local-page.local-sidebar-open .local-sidebar {
        width: min(320px, 88vw); border-radius: 0 24px 24px 0; box-shadow: 12px 0 32px rgba(15,23,42,.12);
    }
    .host-nav-item, .local-nav-item { min-height: 52px; font-size: 16px; border-radius: 14px; }
    .host-nav-item.active, .local-nav-item.active, .local-nav-item--crear.active {
        background: #E8F8EF; color: #0F7A45;
    }
    .host-nav-item svg, .local-nav-item svg { color: #334155; }
    .host-nav-item.active svg, .local-nav-item.active svg { color: #159A4A; }
    .vm-guia { display: block; margin-bottom: 8px; }
    .vm-guia h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.03em; }
    .vm-guia p { margin: 0 0 12px; color: #64748B; }
    .vm-fuera { display: none; }
    .vm-pasos-nav { display: flex; gap: 10px; margin-top: 12px; }
    .vm-pasos-atras, .vm-pasos-siguiente, .local-submit, .host-editar-save, #disp-aplicar {
        min-height: 54px; border-radius: 14px; font-size: 16px;
    }
    .vm-pasos-atras {
        flex: 0 0 96px; border: 1px solid #E2E8F0; background: #fff; color: #334155; font: inherit; font-weight: 700; cursor: pointer;
    }
    .vm-pasos-siguiente {
        flex: 1; border: 0; background: #159A4A; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
    }
    .vm-pasos-siguiente::after { content: ' →'; }
    .local-form:not(.vm-paso-final):not(.vm-mostrar-todo) .local-actions,
    .host-tv-register:not(.vm-paso-final):not(.vm-mostrar-todo) .host-editar-actions { display: none; }
    .vm-paso-final .vm-pasos-siguiente { display: none; }
    .local-page .local-page-head, .local-page .local-note, .host-tv-tips { display: none; }
    .host-dashboard:has(.vm-guia) .vm-cabecera-escritorio,
    .host-dashboard:has(.host-tv-confirm) .vm-cabecera-escritorio { display: none; }
    .local-page .form-group input, .local-page .form-group select,
    .host-tv-register .form-group input, .host-tv-register .form-group select {
        min-height: 52px; border-radius: 14px; font-size: 16px;
    }
    .local-page .form-group label, .host-tv-register .form-group label { font-size: 14px; }
    .local-card, .host-tv-register .host-tvs-card { border-radius: 20px; }
    .local-actions, .host-editar-actions { flex-direction: column; }
    .local-cancel, .local-submit, .host-editar-cancel, .host-editar-save { width: 100%; }
    .vm-exito-arte { display: block; width: 180px; height: 120px; margin: 0 auto; }
    .vm-exito-arte svg { width: 100%; height: 100%; }
    .host-tv-confirm .host-tv-confirm-mark { display: none; }
    .host-tv-drop { min-height: 180px; border-radius: 20px; }
    .host-tv-drop .host-tv-drop-icon { display: none; }
    span.host-tv-foto-arte { display: block; width: 180px; height: 110px; margin: 0 auto 8px; }
    .host-tv-foto-arte svg { width: 100%; height: 100%; }
    p.vm-exito-nota {
        display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; padding: 14px 16px;
        border-radius: 16px; background: #E0F2FE; color: #0F172A; text-align: left; font-weight: 700;
    }
    p.vm-exito-nota svg { flex: 0 0 auto; color: #0284C7; }
    .host-tv-pick { min-height: 48px; border-radius: 14px; }
    .host-tv-base-dias { display: grid; grid-template-columns: 1fr 1fr; }
    .host-tv-register .host-tv-base-dias .host-tv-dia-activo {
        min-height: 48px; padding: 0 10px; border: 1px solid #E8EEF4; border-radius: 12px; background: #fff;
    }
    #disp-aplicar { width: 100%; }
}

/* Inicio de sesión. Solo aplica en body.vm-login. */
body.vm-login {
    min-height: 100vh;
    background: #1E293B;
    color: #102A56;
    font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
}
body.vm-login::before {
    content: "";
    position: fixed;
    inset: -24px;
    z-index: 0;
    background: url("../assets/login/local-pantalla.jpg") center / cover no-repeat;
    filter: blur(6px) brightness(.62);
}
.vm-login-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.vm-login-escena {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 20px;
}
.vm-login-tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(1000px, 100%);
    min-height: 600px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.vm-login-formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 56px;
}
.vm-login-caja { width: 100%; max-width: 380px; }
.vm-login-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #102A56;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.vm-login-logo svg { flex: 0 0 auto; width: 30px; height: 26px; }
.vm-login-caja h1 {
    margin: 22px 0 8px;
    color: #0F1F3D;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.vm-login-lead { margin: 0; color: #475569; font-size: 15px; }
.vm-login-alerta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 11px 14px;
    border: 1px solid #F3C1C4;
    border-radius: 10px;
    background: #FDECEE;
    color: #9F1239;
    font-size: 14px;
    font-weight: 600;
}
.vm-login-alerta svg { flex: 0 0 auto; }
.vm-login-form { margin-top: 24px; }
.vm-login-campo { position: relative; margin-top: 14px; }
.vm-login-campo:first-child { margin-top: 0; }
.vm-login-campo-icono {
    position: absolute;
    top: 50%;
    left: 14px;
    display: inline-flex;
    color: #64748B;
    transform: translateY(-50%);
    pointer-events: none;
}
.vm-login-campo input {
    width: 100%;
    height: 50px;
    padding: 0 14px 0 44px;
    border: 1px solid #D6DEE8;
    border-radius: 10px;
    background: #fff;
    color: #102A56;
    font: inherit;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vm-login-campo input::placeholder { color: #94A3B8; }
.vm-login-campo input:focus {
    border-color: #1769E8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 232, .2);
}
.vm-login-campo--clave input { padding-right: 52px; }
.vm-login-ver {
    position: absolute;
    top: 50%;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748B;
    cursor: pointer;
    transform: translateY(-50%);
}
.vm-login-ver:hover { background: #F1F5F9; color: #1769E8; }
.vm-login-ver .vm-ojo-cerrado,
.vm-login-ver[aria-pressed="true"] .vm-ojo-abierto { display: none; }
.vm-login-ver[aria-pressed="true"] .vm-ojo-cerrado { display: block; }
.vm-login-fila { display: flex; justify-content: flex-end; margin-top: 12px; }
.vm-login-olvido { color: #1769E8; font-size: 14px; font-weight: 600; text-decoration: none; }
.vm-login-olvido:hover { text-decoration: underline; }
.vm-login-ingresar,
.vm-login-camino-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.vm-login-ingresar svg,
.vm-login-camino-btn svg { position: absolute; right: 16px; }
.vm-login-ingresar {
    height: 50px;
    margin-top: 18px;
    background: #1769E8;
    font-size: 16px;
    box-shadow: 0 8px 18px rgba(23, 105, 232, .25);
}
.vm-login-ingresar:hover { background: #1257C4; }
.vm-login-divisor {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: #94A3B8;
    font-size: 14px;
}
.vm-login-divisor::before,
.vm-login-divisor::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}
.vm-login-secundario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    border: 1.5px solid #16A34A;
    border-radius: 10px;
    background: #fff;
    color: #15803D;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.vm-login-secundario:hover { background: #F0FDF4; }
.vm-login-como {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #1769E8;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.vm-login-como:hover span { text-decoration: underline; }
.vm-login-olvido:focus-visible,
.vm-login-secundario:focus-visible,
.vm-login-ingresar:focus-visible,
.vm-login-ver:focus-visible,
.vm-login-como:focus-visible,
.vm-login-modal-cerrar:focus-visible,
.vm-login-camino-btn:focus-visible,
.vm-login-continuar:focus-visible,
.vm-login-no-mostrar:focus-within {
    outline: 3px solid rgba(23, 105, 232, .45);
    outline-offset: 2px;
}
.vm-login-marca-panel {
    display: flex;
    align-items: flex-end;
    padding: 40px 36px;
    background:
        linear-gradient(180deg, rgba(10, 16, 28, 0) 22%, rgba(10, 16, 28, .72) 56%, rgba(10, 16, 28, .94) 100%),
        url("../assets/login/local-pantalla.jpg") 100% center / cover no-repeat;
    color: #fff;
}
.vm-login-marca-caja { width: 100%; }
.vm-login-marca-caja h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.vm-login-marca-caja > p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.55; }
.vm-login-beneficios,
.vm-login-modal-beneficios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
.vm-login-beneficios li,
.vm-login-modal-beneficios li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
}
.vm-login-beneficios li { color: rgba(255, 255, 255, .92); }
.vm-login-beneficios li + li { border-left: 1px solid rgba(255, 255, 255, .22); }
.vm-login-beneficios svg { width: 26px; height: 26px; color: #fff; }
body.vm-login-modal-abierta { overflow: hidden; }
.vm-login-modal[hidden] { display: none; }
.vm-login-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 15, 30, .55);
}
.vm-login-modal-panel {
    position: relative;
    width: min(680px, 100%);
    max-height: min(94vh, 900px);
    max-height: min(94dvh, 900px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 26px 28px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.vm-login-modal-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748B;
    cursor: pointer;
}
.vm-login-modal-cerrar:hover { background: #F1F5F9; color: #102A56; }
.vm-login-modal-cabecera { text-align: center; }
.vm-login-modal-cabecera h2 {
    margin: 12px 0 4px;
    color: #0F1F3D;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}
.vm-login-modal-sub { margin: 0; color: #102A56; font-size: 15px; font-weight: 700; }
.vm-login-modal-desc { max-width: 470px; margin: 8px auto 0; color: #475569; font-size: 14px; }
.vm-login-video {
    margin-top: 16px;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    aspect-ratio: 16 / 9;
}
.vm-login-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.vm-login-video video:focus-visible { outline: 3px solid rgba(23, 105, 232, .55); outline-offset: -3px; }
.vm-login-video-nota { margin: 8px 0 0; color: #102A56; font-size: 13px; font-weight: 600; text-align: center; }
.vm-login-caminos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 16px;
}
.vm-login-camino { display: flex; flex-direction: column; padding: 16px; border-radius: 12px; }
.vm-login-camino--anfitrion { border: 1px solid #D1F2DD; background: #ECFDF3; }
.vm-login-camino--anunciante { border: 1px solid #D8E4FC; background: #EEF4FF; }
.vm-login-camino-cabecera { display: flex; align-items: flex-start; gap: 12px; }
.vm-login-camino-icono {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}
.vm-login-camino-icono svg { width: 40px; height: 40px; }
.vm-login-camino--anfitrion .vm-login-camino-icono,
.vm-login-camino--anfitrion .vm-login-checks svg { color: #16A34A; }
.vm-login-camino--anunciante .vm-login-camino-icono,
.vm-login-camino--anunciante .vm-login-checks svg { color: #1769E8; }
.vm-login-camino h3 { margin: 0 0 4px; color: #0F1F3D; font-size: 16px; }
.vm-login-camino-cabecera p { margin: 0; color: #475569; font-size: 13px; line-height: 1.4; }
.vm-login-checks { display: grid; gap: 7px; margin: 14px 0 16px; padding: 0; list-style: none; }
.vm-login-checks li { display: flex; align-items: center; gap: 8px; color: #1E293B; font-size: 13.5px; line-height: 1.35; }
.vm-login-checks svg { flex: 0 0 auto; width: 18px; height: 18px; }
.vm-login-camino-btn { height: 46px; margin-top: auto; font-size: 15px; }
.vm-login-camino--anfitrion .vm-login-camino-btn { background: #16A34A; }
.vm-login-camino--anfitrion .vm-login-camino-btn:hover { background: #15803D; }
.vm-login-camino--anunciante .vm-login-camino-btn { background: #1769E8; }
.vm-login-camino--anunciante .vm-login-camino-btn:hover { background: #1257C4; }
.vm-login-modal-beneficios { margin-top: 18px; }
.vm-login-modal-beneficios li { color: #334155; }
.vm-login-modal-beneficios li + li { border-left: 1px solid #E2E8F0; }
.vm-login-modal-beneficios svg { width: 24px; height: 24px; color: #102A56; }
.vm-login-modal-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #EEF2F6;
}
.vm-login-no-mostrar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border-radius: 8px;
    color: #334155;
    font-size: 14px;
    cursor: pointer;
}
.vm-login-no-mostrar input { width: 18px; height: 18px; margin: 0; accent-color: #1769E8; }
.vm-login-continuar {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #1769E8;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
}
.vm-login-continuar:hover { text-decoration: underline; }
@media (max-width: 979px) {
    body.vm-login { background: #F4F7FB; }
    body.vm-login::before { display: none; }
    .vm-login-escena { align-items: flex-start; padding: 0; }
    .vm-login-tarjeta {
        grid-template-columns: 1fr;
        width: 100%;
        min-height: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .vm-login-formulario { padding: 28px 20px 24px; }
    .vm-login-caja { max-width: 440px; }
    .vm-login-caja h1 { margin-top: 18px; font-size: 28px; }
    .vm-login-marca-panel {
        padding: 200px 20px 28px;
        background:
            linear-gradient(180deg, rgba(11, 18, 32, 0) 110px, #0B1220 225px),
            url("../assets/login/local-pantalla.jpg") 100% 0 / auto 230px no-repeat,
            #0B1220;
    }
    .vm-login-marca-caja h2 { font-size: 26px; }
    .vm-login-modal { align-items: flex-end; padding: 0; }
    .vm-login-modal-panel {
        width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        padding: 22px 16px 16px;
        border-radius: 18px 18px 0 0;
    }
    .vm-login-modal-cabecera h2 { font-size: 24px; }
    .vm-login-caminos { grid-template-columns: 1fr; }
    .vm-login-modal-pie { flex-direction: column; align-items: stretch; }
    .vm-login-continuar {
        min-height: 48px;
        background: #1769E8;
        color: #fff;
        font-size: 15px;
        text-align: center;
    }
    .vm-login-continuar:hover { background: #1257C4; text-decoration: none; }
}
@media (min-width: 600px) and (max-width: 979px) {
    body.vm-login { background: #1E293B; }
    body.vm-login::before { display: block; }
    .vm-login-escena { align-items: center; padding: 32px 20px; }
    .vm-login-tarjeta {
        width: min(560px, 100%);
        border-radius: 18px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    }
    .vm-login-formulario { padding: 40px 48px 32px; }
    .vm-login-marca-panel {
        padding: 250px 40px 32px;
        background:
            linear-gradient(180deg, rgba(11, 18, 32, 0) 150px, #0B1220 310px),
            url("../assets/login/local-pantalla.jpg") 0 0 / 100% auto no-repeat,
            #0B1220;
    }
    .vm-login-modal { align-items: center; padding: 20px; }
    .vm-login-modal-panel { border-radius: 16px; }
    .vm-login-caminos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vm-login-modal-pie { flex-direction: row; align-items: center; }
    .vm-login-continuar {
        min-height: 44px;
        background: none;
        color: #1769E8;
        font-size: 14px;
        text-align: right;
    }
    .vm-login-continuar:hover { background: none; text-decoration: underline; }
}

/* Registro. Solo aplica en body.vm-registro. */
body.vm-registro {
    min-height: 100vh;
    background: linear-gradient(135deg, #F4F8FB 0%, #EEF6F2 100%);
    color: #102A56;
    font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
}
.vm-registro-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.vm-registro-escena {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    min-height: 100vh;
}
.vm-registro-lado {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 32px;
}
.vm-registro-tarjeta {
    width: 100%;
    max-width: 580px;
    padding: 36px 40px 28px;
    border: 1px solid #E6ECF2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(16, 42, 86, .1);
}
.vm-registro-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #102A56;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.vm-registro-logo svg { flex: 0 0 auto; width: 30px; height: 26px; }
.vm-registro-tarjeta h1 {
    margin: 18px 0 6px;
    color: #0F1F3D;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.vm-registro-lead { margin: 0; color: #334155; font-size: 15px; }
.vm-registro-acceso,
.vm-registro-pie { margin: 6px 0 0; color: #475569; font-size: 14px; }
.vm-registro-acceso a,
.vm-registro-pie a { color: #1769E8; font-weight: 600; text-decoration: none; }
.vm-registro-acceso a:hover,
.vm-registro-pie a:hover { text-decoration: underline; }
.vm-registro-pie { margin-top: 16px; text-align: center; }
.vm-registro-alerta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}
.vm-registro-alerta svg { flex: 0 0 auto; }
.vm-registro-alerta--error { border: 1px solid #F3C1C4; background: #FDECEE; color: #9F1239; }
.vm-registro-alerta--exito { border: 1px solid #BBE7CB; background: #ECFDF3; color: #166534; }
.vm-registro-form { margin-top: 22px; }
.vm-registro-campo { position: relative; margin-top: 12px; }
.vm-registro-campo:first-child { margin-top: 0; }
.vm-registro-campo-icono {
    position: absolute;
    top: 50%;
    left: 14px;
    display: inline-flex;
    color: #475569;
    transform: translateY(-50%);
    pointer-events: none;
}
.vm-registro-campo input {
    width: 100%;
    height: 50px;
    padding: 0 14px 0 44px;
    border: 1px solid #D6DEE8;
    border-radius: 10px;
    background: #fff;
    color: #102A56;
    font: inherit;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vm-registro-campo input::placeholder { color: #8291A7; }
.vm-registro-campo input:focus {
    border-color: #16A34A;
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .2);
}
.vm-registro-campo--clave input { padding-right: 52px; }
.vm-registro-ver {
    position: absolute;
    top: 50%;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transform: translateY(-50%);
}
.vm-registro-ver:hover { background: #F1F5F9; color: #15803D; }
.vm-registro-ver .vm-ojo-cerrado,
.vm-registro-ver[aria-pressed="true"] .vm-ojo-abierto { display: none; }
.vm-registro-ver[aria-pressed="true"] .vm-ojo-cerrado { display: block; }
.vm-registro-roles { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.vm-registro-roles legend {
    padding: 0;
    color: #0F1F3D;
    font-size: 18px;
    font-weight: 700;
}
.vm-registro-roles-ayuda { margin: 2px 0 12px; color: #475569; font-size: 14px; }
.vm-registro-opciones {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}
.vm-registro-rol {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    border: 2px solid #E2E8F0;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.vm-registro-rol:hover { box-shadow: 0 6px 18px rgba(16, 42, 86, .08); }
.vm-registro-rol--anfitrion:hover { border-color: #86D9A6; }
.vm-registro-rol--anunciante:hover { border-color: #9DBDF5; }
.vm-registro-radio {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.vm-registro-rol-marca {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    background: #fff;
}
.vm-registro-rol-marca svg { width: 18px; height: 18px; opacity: 0; }
.vm-registro-rol-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 28px;
}
.vm-registro-rol-icono {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.vm-registro-rol-icono svg { width: 36px; height: 36px; }
.vm-registro-rol--anfitrion .vm-registro-rol-icono,
.vm-registro-rol--anfitrion .vm-registro-rol-lista svg { color: #16A34A; }
.vm-registro-rol--anunciante .vm-registro-rol-icono,
.vm-registro-rol--anunciante .vm-registro-rol-lista svg { color: #1769E8; }
.vm-registro-rol-titulo { color: #0F1F3D; font-size: 16px; font-weight: 700; }
.vm-registro-rol-desc {
    display: block;
    margin-top: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E8EEF4;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.4;
}
.vm-registro-rol-lista { display: grid; gap: 6px; margin-top: 10px; }
.vm-registro-rol-lista > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1E293B;
    font-size: 13px;
    line-height: 1.35;
}
.vm-registro-rol-lista svg { flex: 0 0 auto; width: 17px; height: 17px; }
.vm-registro-rol--anfitrion.is-selected { border-color: #16A34A; background: #F0FDF4; }
.vm-registro-rol--anunciante.is-selected { border-color: #1769E8; background: #F0F6FF; }
.vm-registro-rol--anfitrion.is-selected .vm-registro-rol-marca { border-color: #16A34A; background: #16A34A; }
.vm-registro-rol--anunciante.is-selected .vm-registro-rol-marca { border-color: #1769E8; background: #1769E8; }
.vm-registro-rol.is-selected .vm-registro-rol-marca svg { opacity: 1; }
.vm-registro-rol:has(.vm-registro-radio:focus-visible) {
    outline: 3px solid rgba(23, 105, 232, .45);
    outline-offset: 2px;
}
.vm-registro-ver:focus-visible,
.vm-registro-enviar:focus-visible,
.vm-registro-acceso a:focus-visible,
.vm-registro-pie a:focus-visible {
    outline: 3px solid rgba(23, 105, 232, .45);
    outline-offset: 2px;
}
.vm-registro-enviar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 20px;
    border: 0;
    border-radius: 12px;
    background: #16A34A;
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(22, 163, 74, .25);
}
.vm-registro-enviar:hover { background: #15803D; }
.vm-registro-panel {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 620px;
    padding: 0 52px 48px;
    background: #0B1220;
    color: #fff;
}
.vm-registro-panel::before {
    content: "";
    flex: 1 1 auto;
    min-height: 170px;
    margin: 0 -52px;
    background:
        linear-gradient(180deg, rgba(11, 18, 32, 0) 50%, #0B1220 100%),
        url("../assets/login/video-portada.jpg") 85% 35% / cover no-repeat;
}
.vm-registro-panel-contenido { position: relative; max-width: 520px; margin-top: -28px; }
.vm-registro-panel h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.vm-registro-panel-contenido > p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 16px; line-height: 1.55; }
.vm-registro-beneficios { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.vm-registro-beneficios li { display: flex; align-items: center; gap: 14px; }
.vm-registro-beneficio-icono {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
}
.vm-registro-beneficios strong,
.vm-registro-beneficios small { display: block; }
.vm-registro-beneficios strong { color: #fff; font-size: 16px; }
.vm-registro-beneficios small { color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.4; }
@media (max-width: 1180px) and (min-width: 980px) {
    .vm-registro-tarjeta { padding: 32px 28px 24px; }
    .vm-registro-panel { padding: 0 36px 40px; }
    .vm-registro-panel::before { margin: 0 -36px; }
    .vm-registro-panel h2 { font-size: 30px; }
}
@media (max-width: 979px) {
    .vm-registro-escena { grid-template-columns: 1fr; }
    .vm-registro-lado { align-items: flex-start; padding: 24px 16px; }
    .vm-registro-tarjeta { max-width: 620px; padding: 28px 22px 22px; }
    .vm-registro-tarjeta h1 { font-size: 28px; }
    .vm-registro-panel {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 200px 20px 32px;
    }
    .vm-registro-panel::before {
        position: absolute;
        margin: 0;
        top: 0;
        left: 0;
        right: 0;
        height: 230px;
        background:
            linear-gradient(180deg, rgba(11, 18, 32, 0) 45%, #0B1220 98%),
            url("../assets/login/video-portada.jpg") 75% 40% / cover no-repeat;
    }
    .vm-registro-panel-contenido { margin-top: 0; }
    .vm-registro-panel h2 { font-size: 26px; }
}
@media (max-width: 599px) {
    .vm-registro-lado { padding: 0; }
    .vm-registro-tarjeta {
        max-width: none;
        padding: 24px 18px 22px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .vm-registro-opciones { grid-template-columns: 1fr; }
    .vm-registro-rol { padding: 16px; }
    .vm-registro-rol-desc { font-size: 14px; }
    .vm-registro-rol-lista > span { font-size: 14px; }
}