/* ═══════════════════════════════════════════════
   PANEL CSS — Staff & Admin
   ═══════════════════════════════════════════════ */
:root {
    --bg:        #f4f4f6;
    --surface:   #ffffff;
    --border:    #e2e2e7;
    --txt:       #1a1a2e;
    --txt-2:     #6b6b80;
    --accent:    #c8a96e;
    --danger:    #e53e3e;
    --success:   #38a169;
    --warning:   #d69e2e;
    --sidebar-w: 248px;
    --font:      'Jost', sans-serif;
    --radius:    6px;
    --trans:     0.2s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: .9rem; background: var(--bg); color: var(--txt); }
a { text-decoration: none; color: inherit; }

/* ── Login ─────────────────────────────────────── */
.login-body { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.login-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 2.75rem; width: 100%; max-width: 380px;
}
.login-logo { font-size: 2.5rem; text-align: center; margin-bottom: .75rem; }
.login-card h1 { font-size: 1.25rem; font-weight: 500; text-align: center; margin-bottom: .25rem; }
.login-sub { color: var(--txt-2); font-size: .82rem; text-align: center; margin-bottom: 1.75rem; }

/* ── Layout ────────────────────────────────────── */
.panel-body { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w);
    background: var(--txt);
    color: white;
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0;
    z-index: 200; overflow-y: auto;
    transition: transform var(--trans);
}
.sidebar__brand {
    padding: 1.25rem 1.25rem 1rem;
    font-size: .95rem; font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: space-between; align-items: center;
}
.sidebar__close { display: none; background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 1rem; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.sidebar__nav { flex: 1; padding: .75rem 0; display: flex; flex-direction: column; }
.sidebar__section {
    font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
    color: rgba(255,255,255,.25); padding: .85rem 1.25rem .3rem;
}
.sidebar__link {
    color: rgba(255,255,255,.6); padding: .55rem 1.25rem;
    font-size: .82rem; border-left: 3px solid transparent;
    transition: all var(--trans); display: flex; align-items: center; gap: .5rem;
}
.sidebar__link:hover, .sidebar__link.active {
    color: white; background: rgba(255,255,255,.07);
    border-left-color: var(--accent);
}
.sidebar__footer {
    padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: space-between; align-items: center;
    font-size: .78rem; color: rgba(255,255,255,.45);
}
.sidebar__footer a { color: rgba(255,255,255,.3); font-size: .72rem; }
.sidebar__footer a:hover { color: white; }
.panel-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; }
.panel-overlay.visible { display: block; }
.panel-main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.panel-content { max-width: 100%; }
.topbar {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: .85rem 1.5rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 100;
}
.topbar__hamburger { display: none; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--txt); min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.topbar__title { font-size: .95rem; font-weight: 500; flex: 1; }
.topbar__site { font-size: .78rem; color: var(--accent); }
.panel-content { padding: 1.5rem; max-width: 1200px; width: 100%; }

/* ── Panels ────────────────────────────────────── */
.panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem;
}
.panel--warning { border-left: 3px solid var(--warning); background: #fffbeb; }
.panel--success { border-left: 3px solid var(--success); background: #f0fff4; }
.panel__title {
    font-size: .95rem; font-weight: 500;
    margin-bottom: 1.25rem; padding-bottom: .7rem;
    border-bottom: 1px solid var(--border); cursor: pointer;
}
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ── Forms ─────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.25rem; margin-bottom: 1rem; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .7rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-2); }
.field input, .field textarea, .field select {
    width: 100%; padding: .5rem .7rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font); font-size: .875rem;
    background: var(--bg); color: var(--txt);
    transition: border-color var(--trans);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field input[type="color"] { height: 40px; padding: .2rem .4rem; cursor: pointer; }
.form-inline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.form-inline input, .form-inline select {
    padding: .45rem .65rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-family: var(--font); font-size: .85rem; background: var(--bg);
}
.select-sm {
    padding: .45rem .65rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-family: var(--font); font-size: .85rem;
    background: var(--bg); width: 100%;
}
.input-sm { padding: .45rem .65rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: .85rem; background: var(--bg); }

/* ── Buttons ───────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .55rem 1.2rem; border: none; border-radius: var(--radius);
    font-family: var(--font); font-size: .85rem; font-weight: 400;
    cursor: pointer; transition: opacity var(--trans), transform .1s;
    white-space: nowrap; text-decoration: none;
}
.btn:hover { opacity: .82; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--txt); color: white; }
.btn--ghost   { background: var(--bg); color: var(--txt); border: 1px solid var(--border); }
.btn--danger  { background: var(--danger); color: white; }
.btn--success { background: var(--success); color: white; }
.btn--accent  { background: var(--accent); color: white; }
.btn--sm      { padding: .35rem .85rem; font-size: .78rem; }
.btn--block   { width: 100%; justify-content: center; margin-top: .5rem; }

/* ── Tables ────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.tabla { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .85rem; }
.tabla th {
    background: var(--bg); padding: .65rem 1rem; text-align: left;
    font-weight: 500; font-size: .72rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--txt-2); border-bottom: 1px solid var(--border);
}
.tabla td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tfoot td { background: var(--bg); border-top: 2px solid var(--border); font-weight: 500; }
.row-inactiva { opacity: .45; }

/* ── Badges ────────────────────────────────────── */
.badge {
    display: inline-block; padding: .2rem .65rem;
    border-radius: 20px; font-size: .7rem; font-weight: 500;
}
.badge--lg { font-size: .82rem; padding: .3rem 1rem; }
.badge--en_negociacion { background: #ffedd5; color: #9a3412; }  /* 🟠 Naranja */
.badge--degustacion    { background: #fef9c3; color: #854d0e; }  /* 🟡 Amarillo */
.badge--confirmado     { background: #d1fae5; color: #065f46; }  /* 🟢 Verde */
.badge--en_curso       { background: #dbeafe; color: #1e40af; }  /* 🔵 Azul */
.badge--finalizado     { background: #f3f4f6; color: #374151; }  /* ⬛ Gris */
.badge--cancelado      { background: #fee2e2; color: #991b1b; }  /* 🔴 Rojo */
.badge--pendiente      { background: #fef3c7; color: #92400e; }
.badge--aprobado       { background: #d1fae5; color: #065f46; }
.badge--rechazado      { background: #fee2e2; color: #991b1b; }
.badge--programada     { background: #ede9fe; color: #5b21b6; }
.badge--realizada      { background: #d1fae5; color: #065f46; }
.badge--entregado      { background: #d1fae5; color: #065f46; }

/* ── Cards eventos ─────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.evento-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem;
    transition: box-shadow var(--trans), transform var(--trans);
    display: block; color: var(--txt); border-left: 3px solid transparent;
}
.evento-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.evento-card--en_negociacion { border-left-color: #f97316; }  /* 🟠 Naranja */
.evento-card--degustacion    { border-left-color: #ca8a04; }  /* 🟡 Amarillo */
.evento-card--confirmado     { border-left-color: #16a34a; }  /* 🟢 Verde */
.evento-card--en_curso       { border-left-color: #2563eb; }  /* 🔵 Azul */
.evento-card--finalizado     { border-left-color: #6b7280; }  /* ⬛ Gris */
.evento-card--cancelado      { border-left-color: #ef4444; }  /* 🔴 Rojo */
.evento-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.evento-card__tipo { font-weight: 500; font-size: .9rem; }
.evento-card__cliente { font-size: 1rem; font-weight: 500; margin-bottom: .5rem; }
.evento-card__info { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--txt-2); }
.evento-card__codigo { margin-top: .65rem; font-size: .72rem; color: var(--accent); font-family: monospace; }

/* ── Stats ─────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.stat-box--danger  { border-left: 3px solid var(--danger); }
.stat-box--success { border-left: 3px solid var(--success); }
.stat-box--warning { border-left: 3px solid var(--warning); }
.stat-box--accent  { border-left: 3px solid var(--accent); }
.stat-box__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-2); }
.stat-box__val { font-size: 1.75rem; font-weight: 500; line-height: 1; }

/* ── Evento header ─────────────────────────────── */
.evento-header {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
}
.evento-header__info { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; font-size: .88rem; color: var(--txt-2); }
.evento-header__info strong { color: var(--txt); font-size: 1.05rem; }

/* ── Tabs ──────────────────────────────────────── */
.tabs {
    display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem;
    flex-wrap: nowrap; gap: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    background: none; border: none; padding: .65rem 1.1rem;
    font-family: var(--font); font-size: .8rem; color: var(--txt-2);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color var(--trans), border-color var(--trans); white-space: nowrap;
}
.tab:hover { color: var(--txt); }
.tab.active { color: var(--txt); border-bottom-color: var(--accent); font-weight: 500; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Galería admin ─────────────────────────────── */
.galeria-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.galeria-admin-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); transition: opacity .2s; }
.galeria-inactiva { opacity: .4; }
.galeria-admin-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.galeria-admin-img img { width: 100%; height: 100%; object-fit: cover; }
.galeria-admin-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,.55);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    opacity: 0; transition: opacity .2s;
}
.galeria-admin-card:hover .galeria-admin-overlay { opacity: 1; }
.galeria-admin-info { padding: .55rem .7rem; display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--txt-2); gap: .4rem; }
.galeria-admin-info span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Salones admin ─────────────────────────────── */
.salones-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.salon-admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.salon-admin-imgs { display: flex; gap: .25rem; overflow-x: auto; background: var(--bg); padding: .25rem; }
.salon-admin-thumb { flex-shrink: 0; width: 80px; height: 60px; border-radius: 3px; overflow: hidden; position: relative; }
.salon-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.salon-admin-thumb .del-foto {
    position: absolute; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; cursor: pointer; font-size: .7rem; color: white;
    transition: opacity .15s;
}
.salon-admin-thumb:hover .del-foto { opacity: 1; }
.salon-admin-body { padding: 1rem; }
.salon-admin-body strong { font-size: 1rem; }
.salon-admin-body p { font-size: .82rem; color: var(--txt-2); margin: .25rem 0; }

/* ── Equipo admin ──────────────────────────────── */
.equipo-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.equipo-admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.equipo-admin-foto { aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.equipo-admin-foto img { width: 100%; height: 100%; object-fit: cover; }
.equipo-admin-body { padding: 1rem; }
.equipo-admin-body strong { display: block; margin-bottom: .15rem; }
.equipo-admin-body .cargo { font-size: .72rem; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }

/* ── Decoraciones admin ────────────────────────── */
.dec-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.dec-admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dec-admin-imgs { display: flex; gap: .25rem; overflow-x: auto; background: var(--bg); padding: .25rem; }
.dec-admin-body { padding: 1rem; }

/* ── Personalización ───────────────────────────── */
.color-preview-wrap { display: flex; align-items: center; gap: .75rem; }
.color-preview-wrap input[type="color"] { width: 48px; height: 38px; padding: .15rem .3rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.diseno-preview {
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; margin-top: 1.25rem;
}
.dp-header { padding: .85rem 1.25rem; color: white; font-weight: 500; }
.dp-body { padding: 1.25rem; background: var(--surface); }
.dp-title { font-size: 1.5rem; margin-bottom: .35rem; }
.dp-btn { display: inline-block; padding: .5rem 1.25rem; border-radius: 3px; color: white; font-size: .8rem; }
.dp-body-text { font-size: .88rem; color: var(--txt-2); margin-top: .75rem; }
.temas-guardados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; }
.tema-slot { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; }
.tema-slot h4 { font-size: .85rem; margin-bottom: .75rem; color: var(--txt-2); }
.tema-slot.ocupado h4 { color: var(--txt); }
.fuente-select { display: flex; flex-direction: column; gap: .3rem; }
.fuente-preview { font-size: 1.2rem; color: var(--txt-2); padding: .35rem 0; }

/* ── Permisos ──────────────────────────────────── */
.permisos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.permiso-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; padding: .4rem; border-radius: 4px; transition: background .1s; }
.permiso-item:hover { background: var(--bg); }
.permiso-item input[type="checkbox"] { accent-color: var(--accent); }

/* ── Testimonios admin ─────────────────────────── */
.testimonio-admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.testimonio-admin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.testimonio-admin-texto { font-style: italic; color: var(--txt-2); font-size: .88rem; margin-bottom: 1rem; }

/* ── Helpers ───────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.section-header h2 { font-size: .95rem; font-weight: 500; }
.empty-state { text-align: center; color: var(--txt-2); padding: 2.5rem; font-size: .88rem; font-style: italic; }
.mt { margin-top: 1.5rem; }
.mt-sm { margin-top: .75rem; }
.mb { margin-bottom: 1.25rem; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.quick-links  { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.panel-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-size: .8rem; color: var(--accent); }
.img-preview { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.img-preview small { font-size: .72rem; color: var(--txt-2); }
.img-preview img { max-height: 100px; border-radius: var(--radius); }

/* ── Alerts ────────────────────────────────────── */
.alert { padding: .7rem 1rem; border-radius: var(--radius); font-size: .85rem; border-left: 3px solid; margin-bottom: 1rem; }
.alert--success { background: #f0fff4; border-color: var(--success); color: #276749; }
.alert--error   { background: #fff5f5; border-color: var(--danger);  color: #c53030; }
.alert--warning { background: #fffbeb; border-color: var(--warning); color: #744210; }

/* ── WhatsApp selector ─────────────────────────── */
.phone-input { display: flex; gap: .5rem; }
.phone-input select { flex-shrink: 0; width: 120px; }
.phone-input input { flex: 1; }

/* ── Stat grid (4-col → 2 → 1) ────────────────── */
.stat-grid, .stat-grid--3, .stat-grid--2 {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
}
.stat-grid   { grid-template-columns: repeat(4, 1fr); }
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ── Responsive — Tablet 768px ─────────────────── */
@media (max-width: 768px) {
    /* iOS Safari: evitar auto-zoom al enfocar inputs (font-size >= 16px) */
    .field input, .field textarea, .field select,
    input[type="text"], input[type="number"], input[type="url"],
    input[type="email"], input[type="password"], input[type="date"],
    input[type="time"], select, textarea {
        font-size: 16px !important;
    }

    /* Layout */
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar__close { display: block; }
    .panel-main { margin-left: 0; }
    .topbar__hamburger { display: block; }
    .panel-content { padding: 1rem; }

    /* Grids */
    .form-grid, .form-grid--3, .form-grid--4 { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .panel-grid { grid-template-columns: 1fr; }
    .permisos-grid { grid-template-columns: 1fr; }
    .temas-guardados { grid-template-columns: 1fr; }
    .stat-grid, .stat-grid--3 { grid-template-columns: 1fr 1fr; }

    /* Evento header */
    .evento-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .evento-header__info { gap: .45rem; }

    /* Tabs */
    .tab { padding: .6rem .85rem; font-size: .78rem; }

    /* Tables */
    .tabla th, .tabla td { padding: .5rem .75rem; font-size: .78rem; }

    /* Topbar */
    .topbar { padding: .75rem 1rem; gap: .6rem; }
    .topbar__title { font-size: .88rem; }

    /* Panels */
    .panel { padding: 1.1rem; }
}

/* ── Responsive — Móvil 480px ──────────────────── */
@media (max-width: 480px) {
    /* Layout */
    .panel-content { padding: .75rem; }
    .panel { padding: .9rem; }

    /* Grids colapsan a 1 columna */
    .stats-row { grid-template-columns: 1fr; }
    .stat-grid, .stat-grid--3 { grid-template-columns: 1fr 1fr; }
    .stat-grid--2 { grid-template-columns: 1fr; }

    /* Tabs más compactos pero tap target mínimo 44px */
    .tab { padding: .75rem .7rem; font-size: .75rem; min-height: 44px; }

    /* Botones */
    .btn { font-size: .8rem; padding: .5rem 1rem; }
    .btn--sm { padding: .55rem .85rem; font-size: .74rem; min-height: 44px; }

    /* Sidebar links — tap target mínimo */
    .sidebar__link { padding: .75rem 1.25rem; min-height: 44px; }

    /* Sidebar max-width en pantallas muy angostas */
    .sidebar { max-width: 85vw; }

    /* Topbar */
    .topbar { padding: .65rem .75rem; }
    .topbar__title { font-size: .82rem; }
    .topbar__site { font-size: .72rem; }

    /* Tables — scroll horizontal siempre */
    .tabla th { font-size: .75rem; }
    .tabla td { font-size: .78rem; }

    /* Section header */
    .section-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .section-header .btn { align-self: flex-start; }

    /* Form inline → wrap */
    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline input, .form-inline select { width: 100%; }

    /* Phone input */
    .phone-input { flex-direction: column; }
    .phone-input select { width: 100%; }

    /* Cards events — full width en pantallas muy pequeñas */
    .cards-grid { grid-template-columns: 1fr; }
}

/* ── Pantallas muy angostas ≤375px ──────────────────────── */
@media (max-width: 375px) {
    .stat-grid, .stat-grid--3 { grid-template-columns: 1fr; }
    .panel-content { padding: .5rem; }
}

/* Filas de precios dinámicas (paquetes) — apilar en móvil chico */
@media (max-width: 480px) {
    .precio-fila { flex-wrap: wrap; }
    .precio-fila input[name="precio_etiqueta[]"] { flex: 1 1 100%; }
    .precio-fila input[name="precio_valor[]"] { flex: 1; width: auto !important; }
}