/* =====================================================================
   Momentiu :: Panel administrativo
   Paleta tomada de la landing:
     #2c1535  berenjena (fondo del menu vertical)
     #1f0f26  berenjena oscuro (hover / bordes)
     #e02aa6  magenta (iconos y acentos, igual que los iconos del sitio)
     #FFFAEF  crema
   Tipografias: Inria Serif para titulos, Jost para interfaz.
   ===================================================================== */

:root {
    --mo-morado: #2c1535;
    --mo-morado-900: #1f0f26;
    --mo-morado-700: #3d1f49;
    --mo-magenta: #e02aa6;
    --mo-magenta-soft: rgba(224, 42, 166, .12);
    --mo-crema: #fffaef;
    --mo-gris: #f9f8f8;
    --mo-borde: #e7e3ea;
    --mo-texto: #333;
    --mo-texto-suave: #6b6577;
    --mo-ok: #1d9a6c;
    --mo-alerta: #c9820a;
    --mo-error: #c0392b;
    --mo-sidebar: 268px;
    --mo-sidebar-mini: 74px;
    --mo-radio: 12px;
    --mo-sombra: 0 2px 14px rgba(44, 21, 53, .08);
}

* { box-sizing: border-box; }

body.mo-body {
    margin: 0;
    font-family: "Jost", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    color: var(--mo-texto);
    background: var(--mo-gris);
}

h1, h2, h3, h4, .mo-serif {
    font-family: "Inria Serif", Georgia, serif;
    font-weight: 700;
    margin: 0;
}

a { color: var(--mo-magenta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ Sidebar */
.mo-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--mo-sidebar);
    background: var(--mo-morado);
    color: #efe9f2;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .22s ease, transform .22s ease;
    overflow: hidden;
}

/* El logo es morado oscuro: sobre el menu no se veia. Va en una pastilla
   clara, como en la pantalla de login. */
.mo-sidebar__marca {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: 68px;
    text-decoration: none;
}
.mo-sidebar__marca:hover { text-decoration: none; }
.mo-sidebar__logo {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 9px 14px;
    width: 100%;
    overflow: hidden;
    transition: padding .22s ease;
}
.mo-sidebar__logo img {
    height: 26px;
    width: auto;
    max-width: none;
    display: block;
}
/* Extendido se ve el logo con el nombre; el isotipo solo espera su turno.
   Va con el padre adelante para ganarle a la regla de arriba, que al ser
   clase + etiqueta pesa mas que una clase sola. */
.mo-sidebar__logo .mo-sidebar__logo-iso { display: none; }

.mo-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 24px;
}
.mo-sidebar__nav::-webkit-scrollbar { width: 6px; }
.mo-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

.mo-grupo__titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: 0;
    color: #efe9f2;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
}
.mo-grupo__titulo:hover { background: var(--mo-morado-700); }
.mo-grupo__titulo i:first-child { color: var(--mo-magenta); width: 20px; text-align: center; font-size: 15px; flex: 0 0 20px; }
.mo-grupo__titulo .mo-chevron { margin-left: auto; font-size: 11px; transition: transform .2s ease; opacity: .7; }
.mo-grupo.abierto .mo-grupo__titulo .mo-chevron { transform: rotate(90deg); opacity: 1; }

/* Tres tonos para que se vea de un golpe que un grupo se desplego:
   el encabezado abierto sube (mas claro que el fondo del menu), el bloque
   de sus opciones baja (mas oscuro), y el fondo del menu queda en medio.
   Antes el encabezado abierto y la opcion activa usaban el mismo tono y
   todo parecia una lista plana. */
.mo-grupo.abierto .mo-grupo__titulo {
    background: var(--mo-morado-700);
    color: #fff;
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--mo-magenta);
}

.mo-grupo__items { display: none; }
.mo-grupo.abierto .mo-grupo__items {
    display: block;
    padding: 4px 0 8px;
    background: var(--mo-morado-900);
    box-shadow: inset 0 6px 10px -8px rgba(0, 0, 0, .7);
}

.mo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px 9px 20px;
    color: rgba(239, 233, 242, .82);
    font-size: 13px;
    border-left: 3px solid transparent;
    white-space: nowrap;
}
.mo-item:hover { background: var(--mo-morado-700); color: #fff; text-decoration: none; }
.mo-item i { color: var(--mo-magenta); width: 18px; text-align: center; font-size: 14px; flex: 0 0 18px; }

/* Dentro del bloque desplegado, las opciones llevan una guia vertical a la
   izquierda, como las ramas de un arbol. */
.mo-grupo.abierto .mo-grupo__items .mo-item {
    position: relative;
    margin-left: 26px;
    padding-left: 14px;
    border-left: 0;
}
.mo-grupo.abierto .mo-grupo__items .mo-item::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: rgba(224, 42, 166, .22);
}
.mo-grupo.abierto .mo-grupo__items .mo-item:first-child::before { top: 6px; }
.mo-grupo.abierto .mo-grupo__items .mo-item:last-child::before { bottom: 6px; }

/* La opcion en la que estas parado es lo mas marcado de los tres. */
.mo-item.activo,
.mo-grupo.abierto .mo-grupo__items .mo-item.activo {
    background: var(--mo-magenta-soft);
    color: #fff;
    font-weight: 500;
}
.mo-item.activo { border-left-color: var(--mo-magenta); }
.mo-grupo.abierto .mo-grupo__items .mo-item.activo::before {
    background: var(--mo-magenta);
    width: 3px;
}

.mo-item--hijo { padding-left: 46px; font-size: 12.5px; }
.mo-grupo.abierto .mo-grupo__items .mo-item--hijo { padding-left: 30px; opacity: .92; }

.mo-sidebar__pie {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px;
    color: rgba(239, 233, 242, .5);
    white-space: nowrap;
}

/* --------------------------------------------------- Sidebar colapsado */
body.mo-mini .mo-sidebar { width: var(--mo-sidebar-mini); }
/* En modo mini la pastilla se encoge y se cambia el logo por el isotipo. */
body.mo-mini .mo-sidebar__marca { padding: 14px 10px; }
body.mo-mini .mo-sidebar__logo { padding: 7px; justify-content: center; }
body.mo-mini .mo-sidebar__logo .mo-sidebar__logo-completo { display: none; }
body.mo-mini .mo-sidebar__logo .mo-sidebar__logo-iso { display: block; height: 30px; }
body.mo-mini .mo-grupo__titulo span,
body.mo-mini .mo-grupo__titulo .mo-chevron,
body.mo-mini .mo-item span,
body.mo-mini .mo-sidebar__pie { display: none; }
body.mo-mini .mo-grupo__items { display: block; }
body.mo-mini .mo-item { padding-left: 0; justify-content: center; border-left-width: 0; }
/* Colapsado no hay jerarquia que mostrar: fuera la guia y los margenes. */
body.mo-mini .mo-grupo.abierto .mo-grupo__items .mo-item { margin-left: 0; padding-left: 0; }
body.mo-mini .mo-grupo.abierto .mo-grupo__items .mo-item::before { display: none; }
body.mo-mini .mo-grupo.abierto .mo-grupo__titulo { box-shadow: none; }
body.mo-mini .mo-item--hijo { opacity: .75; }
body.mo-mini .mo-grupo__titulo { justify-content: center; padding-left: 0; padding-right: 0; }
body.mo-mini .mo-contenido { margin-left: var(--mo-sidebar-mini); }
body.mo-mini .mo-item.activo { background: var(--mo-magenta-soft); }

/* ----------------------------------------------------------- Contenido */
.mo-contenido {
    margin-left: var(--mo-sidebar);
    min-height: 100vh;
    transition: margin-left .22s ease;
    display: flex;
    flex-direction: column;
}

.mo-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--mo-borde);
    padding: 0 20px;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mo-topbar__toggle {
    background: none;
    border: 1px solid var(--mo-borde);
    border-radius: 8px;
    width: 38px; height: 38px;
    color: var(--mo-morado);
    cursor: pointer;
    font-size: 16px;
}
.mo-topbar__toggle:hover { background: var(--mo-magenta-soft); color: var(--mo-magenta); }
.mo-topbar__titulo { font-size: 17px; color: var(--mo-morado); }
.mo-topbar__ruta { font-size: 11.5px; color: var(--mo-texto-suave); display: block; }
.mo-topbar__derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.mo-chip-usuario {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--mo-borde);
    border-radius: 30px;
    background: #fff;
}
.mo-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--mo-morado); color: #fff;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 600;
}
.mo-chip-usuario small { display: block; color: var(--mo-texto-suave); font-size: 10.5px; }

.mo-main { padding: 22px; flex: 1; }

/* -------------------------------------------------------------- Cards */
.mo-card {
    background: #fff;
    border: 1px solid var(--mo-borde);
    border-radius: var(--mo-radio);
    box-shadow: var(--mo-sombra);
    margin-bottom: 18px;
}
.mo-card__head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--mo-borde);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mo-card__head h2 { font-size: 16px; color: var(--mo-morado); }
.mo-card__head .mo-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mo-card__body { padding: 18px; }

/* ------------------------------------------------------------- Tabs */
.mo-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mo-borde); padding: 0 18px; background: #fff; border-radius: var(--mo-radio) var(--mo-radio) 0 0; }
.mo-tab {
    padding: 13px 16px;
    border: 0; background: none;
    font: inherit; font-size: 13.5px;
    color: var(--mo-texto-suave);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.mo-tab:hover { color: var(--mo-morado); }
.mo-tab.activo { color: var(--mo-magenta); border-bottom-color: var(--mo-magenta); font-weight: 600; }
.mo-panel { display: none; }
.mo-panel.activo { display: block; }

/* ------------------------------------------------------------ Botones */
.mo-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit; font-size: 13px;
    cursor: pointer;
    transition: filter .15s ease;
    text-decoration: none;
}
.mo-btn:hover { filter: brightness(.94); text-decoration: none; }
.mo-btn:disabled { opacity: .55; cursor: not-allowed; }
.mo-btn--primario { background: var(--mo-magenta); color: #fff; }
.mo-btn--oscuro { background: var(--mo-morado); color: #fff; }
.mo-btn--claro { background: #fff; color: var(--mo-morado); border-color: var(--mo-borde); }
.mo-btn--peligro { background: #fff; color: var(--mo-error); border-color: #f0c8c3; }
.mo-btn--sm { padding: 5px 10px; font-size: 12px; }

/* ------------------------------------------------------------- Tablas */
.mo-tabla-wrap { overflow-x: auto; }
.mo-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.mo-tabla th {
    text-align: left;
    padding: 11px 12px;
    background: var(--mo-crema);
    color: var(--mo-morado);
    font-weight: 600;
    border-bottom: 1px solid var(--mo-borde);
    white-space: nowrap;
}
.mo-tabla td { padding: 10px 12px; border-bottom: 1px solid #f0eef2; vertical-align: middle; }
.mo-tabla tbody tr:hover { background: #fcfbfd; }
.mo-tabla .mo-col-acciones { width: 1%; white-space: nowrap; }
.mo-vacio { padding: 30px; text-align: center; color: var(--mo-texto-suave); }

.mo-badge {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
}
.mo-badge--ok { background: rgba(29, 154, 108, .12); color: var(--mo-ok); }
.mo-badge--off { background: rgba(0, 0, 0, .07); color: var(--mo-texto-suave); }
.mo-badge--alerta { background: rgba(201, 130, 10, .14); color: var(--mo-alerta); }
.mo-badge--error { background: rgba(192, 57, 43, .12); color: var(--mo-error); }
.mo-badge--magenta { background: var(--mo-magenta-soft); color: var(--mo-magenta); }

/* --------------------------------------------------------- Formularios */
.mo-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.mo-col-2 { grid-column: span 2; }
.mo-col-3 { grid-column: span 3; }
.mo-col-4 { grid-column: span 4; }
.mo-col-6 { grid-column: span 6; }
.mo-col-8 { grid-column: span 8; }
.mo-col-12 { grid-column: span 12; }

.mo-campo { display: flex; flex-direction: column; gap: 5px; }
.mo-campo label { font-size: 12.5px; color: var(--mo-texto-suave); font-weight: 500; }
.mo-campo label .req { color: var(--mo-magenta); }
.mo-campo input[type=text],
.mo-campo input[type=email],
.mo-campo input[type=password],
.mo-campo input[type=number],
.mo-campo input[type=date],
.mo-campo input[type=time],
.mo-campo input[type=color],
.mo-campo select,
.mo-campo textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--mo-borde);
    border-radius: 8px;
    font: inherit; font-size: 13px;
    background: #fff;
    color: var(--mo-texto);
}
.mo-campo input:focus, .mo-campo select:focus, .mo-campo textarea:focus {
    outline: none;
    border-color: var(--mo-magenta);
    box-shadow: 0 0 0 3px var(--mo-magenta-soft);
}
.mo-campo textarea { min-height: 96px; resize: vertical; }
.mo-campo input[type=color] { padding: 3px; height: 38px; }
.mo-ayuda { font-size: 11.5px; color: var(--mo-texto-suave); }

.mo-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mo-check input { width: 16px; height: 16px; accent-color: var(--mo-magenta); }

.mo-form-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mo-borde); }

.mo-buscador { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mo-buscador input, .mo-buscador select {
    padding: 8px 11px; border: 1px solid var(--mo-borde); border-radius: 8px; font: inherit; font-size: 13px;
}

/* ------------------------------------------------------- Paginacion */
.mo-paginacion { display: flex; align-items: center; gap: 6px; padding: 14px 18px; flex-wrap: wrap; }
.mo-paginacion .info { margin-right: auto; font-size: 12px; color: var(--mo-texto-suave); }
/* Sirve igual como <button> (tablas AJAX) que como <a> (pantallas completas),
   por eso lleva el centrado explicito y quita el subrayado del enlace. */
.mo-pag {
    min-width: 32px; height: 32px; padding: 0 9px;
    border: 1px solid var(--mo-borde); border-radius: 8px;
    background: #fff; color: var(--mo-morado);
    font: inherit; font-size: 12.5px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.mo-pag:hover { background: var(--mo-magenta-soft); text-decoration: none; }
.mo-pag.activo:hover { color: #fff; }
.mo-pag.activo { background: var(--mo-morado); color: #fff; border-color: var(--mo-morado); }

/* ------------------------------------------------- Barra de avance RSVP */
.mo-barra__pista {
    display: flex; height: 14px; border-radius: 10px; overflow: hidden;
    background: var(--mo-borde); margin-bottom: 10px;
}
.mo-barra__ok { background: var(--mo-ok); }
.mo-barra__no { background: var(--mo-error); }
.mo-barra__leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--mo-texto-suave); }
.mo-barra__leyenda strong { margin-left: auto; color: var(--mo-morado); }

/* ------------------------------------------------------------ Matriz */
.mo-matriz td, .mo-matriz th { text-align: center; }
.mo-matriz td:first-child, .mo-matriz th:first-child { text-align: left; }
.mo-matriz input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--mo-magenta); }

/* ------------------------------------------------------------- Avisos */
.mo-aviso {
    padding: 11px 14px; border-radius: 9px; font-size: 13px;
    border: 1px solid transparent; margin-bottom: 14px;
}
.mo-aviso--info { background: var(--mo-crema); border-color: #eee0c9; color: #6b5730; }
.mo-aviso--error { background: rgba(192, 57, 43, .07); border-color: #f0c8c3; color: var(--mo-error); }
.mo-aviso--ok { background: rgba(29, 154, 108, .08); border-color: #bde5d4; color: var(--mo-ok); }

/* ------------------------------------------------------------- Toasts */
#mo-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 9px; }
.mo-toast {
    background: var(--mo-morado); color: #fff;
    padding: 12px 16px; border-radius: 10px;
    box-shadow: 0 6px 22px rgba(44, 21, 53, .28);
    font-size: 13px; max-width: 340px;
    border-left: 4px solid var(--mo-magenta);
    animation: moIn .22s ease;
}
.mo-toast--error { border-left-color: #ff6b5b; }
.mo-toast--ok { border-left-color: #3ddc97; }
@keyframes moIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- Modal */
.mo-modal { position: fixed; inset: 0; background: rgba(31, 15, 38, .55); z-index: 1900; display: none; align-items: center; justify-content: center; padding: 18px; }
.mo-modal.abierto { display: flex; }
.mo-modal__caja { background: #fff; border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.mo-modal__head { padding: 16px 18px; border-bottom: 1px solid var(--mo-borde); display: flex; align-items: center; }
.mo-modal__head h3 { font-size: 16px; color: var(--mo-morado); }
.mo-modal__head button { margin-left: auto; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--mo-texto-suave); }
.mo-modal__body { padding: 18px; }

/* ------------------------------------------------------------ Metricas */
.mo-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.mo-metrica {
    background: #fff; border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    padding: 16px 18px; box-shadow: var(--mo-sombra);
    display: flex; align-items: center; gap: 14px;
}
.mo-metrica__icono {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--mo-magenta-soft); color: var(--mo-magenta);
    display: grid; place-items: center; font-size: 18px; flex: 0 0 44px;
}
.mo-metrica__valor { font-family: "Inria Serif", Georgia, serif; font-size: 25px; color: var(--mo-morado); line-height: 1.1; }
.mo-metrica__label { font-size: 12px; color: var(--mo-texto-suave); }

.mo-json {
    background: var(--mo-morado-900); color: #e8dff0;
    padding: 12px; border-radius: 9px;
    font-family: Consolas, "Courier New", monospace; font-size: 11.5px;
    white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
}

/* ------------------------------------------------------------- Login */
.mo-login {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 20px;
    background: var(--mo-morado);
    background-image: radial-gradient(circle at 20% 20%, rgba(224, 42, 166, .22), transparent 45%),
                      radial-gradient(circle at 85% 80%, rgba(224, 42, 166, .16), transparent 40%);
}
.mo-login__caja {
    width: 100%; max-width: 400px;
    background: #fff; border-radius: 18px;
    padding: 34px 30px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .32);
}
.mo-login__marca { text-align: center; margin-bottom: 22px; }
.mo-login__marca img { height: 42px; margin-bottom: 10px; }
.mo-login__marca h1 { font-size: 21px; color: var(--mo-morado); }
.mo-login__marca p { margin: 5px 0 0; font-size: 12.5px; color: var(--mo-texto-suave); }
.mo-login .mo-campo { margin-bottom: 14px; }
.mo-login .mo-btn { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }
.mo-login__pie { text-align: center; margin-top: 18px; font-size: 11px; color: var(--mo-texto-suave); }

/* --------------------------------------------------------- Responsive */
.mo-overlay { position: fixed; inset: 0; background: rgba(31, 15, 38, .5); z-index: 1035; display: none; }
.mo-overlay.visible { display: block; }

@media (max-width: 991px) {
    .mo-sidebar { transform: translateX(-100%); width: var(--mo-sidebar); }
    body.mo-abierto .mo-sidebar { transform: none; }
    .mo-contenido, body.mo-mini .mo-contenido { margin-left: 0; }
    body.mo-mini .mo-sidebar__marca span,
    body.mo-mini .mo-grupo__titulo span,
    body.mo-mini .mo-grupo__titulo .mo-chevron,
    body.mo-mini .mo-item span,
    body.mo-mini .mo-sidebar__pie { display: initial; }
    body.mo-mini .mo-item { padding: 9px 16px 9px 20px; justify-content: flex-start; border-left-width: 3px; }
    body.mo-mini .mo-grupo__titulo { justify-content: flex-start; padding: 11px 16px; }
    .mo-col-2, .mo-col-3, .mo-col-4, .mo-col-6, .mo-col-8 { grid-column: span 12; }
    .mo-main { padding: 14px; }
    .mo-topbar { padding: 0 12px; }
    .mo-topbar__titulo { font-size: 15px; }
    .mo-chip-usuario span.mo-nombre { display: none; }
}

@media print {
    .mo-sidebar, .mo-topbar, .mo-acciones, .mo-form-pie { display: none !important; }
    .mo-contenido { margin-left: 0; }
    .mo-card { box-shadow: none; border: 0; }
}

/* =====================================================================
   Area de cliente
   ===================================================================== */
.mo-card--destacada { border-color: var(--mo-magenta); }
.mo-pasos { margin: 0; padding-left: 18px; color: var(--mo-texto-suave); font-size: 13px; }
.mo-pasos li { margin-bottom: 7px; }

.mo-filtros-evento { display: flex; gap: 8px; flex-wrap: wrap; }
.mo-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 30px;
    border: 1px solid var(--mo-borde); background: #fff;
    color: var(--mo-morado); font-size: 13px; text-decoration: none;
}
.mo-chip:hover { border-color: var(--mo-magenta); text-decoration: none; }
.mo-chip i { color: var(--mo-magenta); }
.mo-chip.activo { background: var(--mo-morado); color: #fff; border-color: var(--mo-morado); }
.mo-chip.activo i { color: #fff; }

.mo-galeria-plantillas {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.mo-plantilla {
    background: #fff; border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    overflow: hidden; box-shadow: var(--mo-sombra); display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mo-plantilla:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(44,21,53,.14); }
.mo-plantilla__vista { position: relative; height: 168px; display: grid; place-items: center; overflow: hidden; }
.mo-plantilla__vista img { width: 100%; height: 100%; object-fit: cover; }
.mo-plantilla__muestra { text-align: center; padding: 12px; }
.mo-plantilla__muestra span { display: block; font-size: 26px; line-height: 1.2; }
.mo-plantilla__muestra small { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; }
.mo-plantilla__tipo {
    position: absolute; top: 10px; left: 10px;
    background: rgba(255,255,255,.92); color: var(--mo-morado);
    padding: 4px 10px; border-radius: 20px; font-size: 11px;
}
.mo-plantilla__tipo i { color: var(--mo-magenta); }
.mo-plantilla__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.mo-plantilla__cuerpo h3 { font-family: "Inria Serif", Georgia, serif; font-size: 16px; color: var(--mo-morado); margin: 0 0 4px; }
.mo-plantilla__cuerpo p { margin: 0 0 10px; font-size: 12.5px; color: var(--mo-texto-suave); }
.mo-plantilla__tema { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.mo-plantilla__tema small { margin-left: 6px; font-size: 10.5px; color: var(--mo-texto-suave); }
.mo-punto { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.mo-plantilla__pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mo-plantilla__pie strong { color: var(--mo-morado); font-size: 15px; }

/* Datos minimos para arrancar la experiencia desde la propia tarjeta. */
.mo-plantilla__usar { margin-top: 12px; display: grid; gap: 8px; }
.mo-plantilla__usar label { display: grid; gap: 4px; }
.mo-plantilla__usar label span { font-size: 11px; color: var(--mo-texto-suave); }
.mo-plantilla__usar input {
    width: 100%; padding: 8px 10px; font-size: 13px;
    border: 1px solid var(--mo-borde); border-radius: 8px; background: #fff;
}
.mo-plantilla__usar input:focus { outline: none; border-color: var(--mo-magenta); }

/* =====================================================================
   DDLove :: modalidades y grid de experiencias
   ===================================================================== */
.mo-modalidades {
    display: grid; gap: 10px; margin-bottom: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mo-modalidad {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--mo-radio);
    border: 1px solid var(--mo-borde); background: #fff;
    color: var(--mo-morado); text-decoration: none;
}
.mo-modalidad:hover { border-color: var(--mo-magenta); text-decoration: none; }
.mo-modalidad i { font-size: 20px; color: var(--mo-magenta); }
.mo-modalidad strong { display: block; font-size: 13.5px; }
.mo-modalidad small { display: block; font-size: 11px; color: var(--mo-texto-suave); }
.mo-modalidad.activo { border-color: var(--mo-morado); background: var(--mo-morado); color: #fff; }
.mo-modalidad.activo i,
.mo-modalidad.activo small { color: #fff; opacity: .9; }

.mo-grid-ddlove {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.mo-ddlove {
    background: #fff; border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    overflow: hidden; box-shadow: var(--mo-sombra); display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mo-ddlove:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(44,21,53,.14); }
/* Las que quedaron a medias se marcan con una franja, para ubicarlas rapido. */
.mo-ddlove--borrador { border-left: 3px solid var(--mo-magenta); }
.mo-ddlove__cabecera { position: relative; padding: 20px 16px 16px; text-align: center; }
.mo-ddlove__cabecera h3 { margin: 6px 0 2px; font-size: 20px; font-style: italic; }
.mo-ddlove__cabecera p { margin: 0; font-size: 12.5px; }
.mo-ddlove__modo {
    position: absolute; top: 10px; left: 10px;
    background: rgba(255,255,255,.92); color: var(--mo-morado);
    padding: 4px 10px; border-radius: 20px; font-size: 11px;
}
.mo-ddlove__modo i { color: var(--mo-magenta); }
.mo-ddlove__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mo-ddlove__estado { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mo-ddlove__estado small { margin-left: auto; font-size: 11.5px; color: var(--mo-texto-suave); }
.mo-ddlove__acciones { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.mo-avance__barra {
    height: 6px; border-radius: 4px; overflow: hidden;
    background: rgba(44,21,53,.09);
}
.mo-avance__barra span {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--mo-magenta), var(--mo-morado));
    transition: width .4s ease;
}
.mo-avance small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--mo-texto-suave); }

.mo-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mo-checklist li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.mo-checklist li.listo { color: var(--mo-morado); }
.mo-checklist li.listo i { color: #2f9e6e; }
.mo-checklist li.pendiente { color: var(--mo-texto-suave); }
.mo-checklist li.pendiente i { color: var(--mo-borde); }

/* =====================================================================
   Constructor
   ===================================================================== */
.ct-barra {
    background: #fff; border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    padding: 12px 16px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    box-shadow: var(--mo-sombra);
}
.ct-barra__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-barra__info small { color: var(--mo-texto-suave); }
.ct-barra__acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.ct-lienzo { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.ct-editor { min-width: 0; }
.ct-tabs { overflow-x: auto; }

.ct-preview { position: sticky; top: 78px; }
.ct-preview__marco {
    background: var(--mo-morado); border-radius: 16px; padding: 10px;
    box-shadow: 0 10px 30px rgba(44,21,53,.22);
}
.ct-preview__barra { display: flex; align-items: center; gap: 6px; padding: 4px 8px 10px; }
.ct-preview__barra span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); }
.ct-preview__barra small { margin-left: 8px; color: rgba(255,255,255,.6); font-size: 11px; }
.ct-preview__recargar {
    margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.7);
    cursor: pointer; font-size: 13px;
}
.ct-preview__recargar:hover { color: #fff; }
/* Fichas para elegir en que aparato se mira la vista previa. */
.ct-aparatos {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 0 4px 10px; justify-content: center;
}
.ct-aparato {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 20px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7); font: inherit; font-size: 10.5px; line-height: 1;
}
.ct-aparato i { font-size: 11px; }
.ct-aparato:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.ct-aparato.activo { background: #fff; color: var(--mo-morado); border-color: #fff; }

.ct-preview__escenario { display: flex; justify-content: center; }
/* El hueco toma el tamano YA escalado; el iframe se encoge dentro de el. */
.ct-preview__hueco { position: relative; overflow: hidden; border-radius: 10px; }
.ct-preview__medida {
    text-align: center; padding-top: 8px;
    font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .04em;
}

.ct-preview iframe {
    width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; display: block;
    transform-origin: top left;
}

.ct-subtitulo {
    font-family: "Inria Serif", Georgia, serif; font-size: 14.5px;
    color: var(--mo-morado); margin: 18px 0 10px;
}
.ct-subtitulo:first-child { margin-top: 0; }

/* --------------------------------------------------------- Biblioteca */
.ct-biblioteca {
    background: var(--mo-crema); border: 1px dashed #e6d9c2;
    border-radius: var(--mo-radio); padding: 14px; margin-bottom: 16px;
}
.ct-biblioteca__titulo { font-size: 13px; color: var(--mo-morado); font-weight: 600; margin-bottom: 10px; }
.ct-biblioteca__titulo i { color: var(--mo-magenta); }
.ct-biblioteca__items { display: flex; gap: 7px; flex-wrap: wrap; }
.ct-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 20px;
    border: 1px solid var(--mo-borde); background: #fff;
    font: inherit; font-size: 12.5px; color: var(--mo-morado); cursor: pointer;
}
.ct-chip:hover:not(.agotado) { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-chip i { color: var(--mo-magenta); }
.ct-chip.agotado { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------ Bloques */
.ct-bloque {
    border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    margin-bottom: 12px; background: #fff; overflow: hidden;
}
.ct-bloque.oculto { opacity: .6; }
.ct-bloque__head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; background: #fcfbfd; border-bottom: 1px solid var(--mo-borde);
    flex-wrap: wrap;
}
.ct-bloque__icono {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
    background: var(--mo-magenta-soft); color: var(--mo-magenta);
    display: grid; place-items: center;
}
/* El titulo abre y cierra el bloque, igual que el chevron. */
.ct-bloque__titulo { min-width: 0; cursor: pointer; user-select: none; }
.ct-bloque__titulo strong { display: block; font-size: 13px; color: var(--mo-morado); }
.ct-bloque__titulo small { display: block; color: var(--mo-texto-suave); font-size: 11.5px; }
.ct-bloque__acciones { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.ct-bloque__cuerpo { padding: 14px; }
.ct-bloque.plegado .ct-bloque__cuerpo { display: none; }
.ct-bloque.plegado .ct-plegar i { transform: rotate(-90deg); }
.ct-bloque__pie {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mo-borde);
}
.ct-bloque__pie .mo-btn { margin-left: auto; }

/* ---------------------------------------------------- Asistente de IA */
.ct-ia { float: right; display: inline-flex; gap: 6px; align-items: center; }
.ct-ia select { padding: 3px 6px; font-size: 11.5px; border: 1px solid var(--mo-borde); border-radius: 6px; }
.ct-sugerencias { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ct-sugerencia {
    text-align: left; padding: 9px 11px; font: inherit; font-size: 12.5px;
    border: 1px dashed var(--mo-magenta); border-radius: 9px;
    background: var(--mo-magenta-soft); color: var(--mo-texto); cursor: pointer;
}
.ct-sugerencia:hover { background: #fff; }

/* -------------------------------------------------------------- Fotos */
.ct-fotos-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-foto {
    width: 76px; height: 76px; border-radius: 9px; overflow: hidden;
    border: 2px solid transparent; cursor: pointer; position: relative; background: var(--mo-gris);
    display: grid; place-items: center;
}
.ct-foto img { width: 100%; height: 100%; object-fit: cover; }
.ct-foto input { position: absolute; opacity: 0; pointer-events: none; }
.ct-foto.elegida { border-color: var(--mo-magenta); }
.ct-foto--ninguna span { font-size: 11px; color: var(--mo-texto-suave); text-align: center; padding: 4px; }

.ct-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 26px; border: 2px dashed var(--mo-borde); border-radius: var(--mo-radio);
    cursor: pointer; text-align: center; color: var(--mo-texto-suave);
}
.ct-dropzone:hover { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-dropzone i { font-size: 26px; color: var(--mo-magenta); }
.ct-dropzone strong { color: var(--mo-morado); font-size: 14px; }
.ct-dropzone input { display: none; }

.ct-galeria-admin { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-top: 14px; }
.ct-galeria-admin__item { margin: 0; border: 1px solid var(--mo-borde); border-radius: 10px; overflow: hidden; background: #fff; }
.ct-galeria-admin__item img { width: 100%; height: 100px; object-fit: cover; display: block; }
.ct-galeria-admin__item figcaption { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.ct-galeria-admin__item figcaption small { flex: 1; color: var(--mo-texto-suave); font-size: 10.5px; overflow: hidden; }

/* ------------------------------------------------------------- Listas */
.ct-lista { display: flex; flex-direction: column; gap: 7px; }
.ct-lista__fila { display: grid; grid-template-columns: 110px 1fr auto; gap: 7px; }
.ct-lista__fila input {
    padding: 8px 10px; border: 1px solid var(--mo-borde); border-radius: 8px; font: inherit; font-size: 13px;
}

/* ----------------------------------------------------------- Tipografias */
.ct-fuentes { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ct-fuente {
    border: 2px solid var(--mo-borde); border-radius: 11px; padding: 11px 8px;
    text-align: center; cursor: pointer; background: #fff;
}
.ct-fuente:hover { border-color: var(--mo-magenta); }
.ct-fuente.elegida { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-fuente input { display: none; }
.ct-fuente__muestra { display: block; font-size: 26px; color: var(--mo-morado); line-height: 1; }
.ct-fuente__nombre { display: block; font-size: 12px; margin-top: 5px; color: var(--mo-morado); }
.ct-fuente small { display: block; font-size: 10.5px; color: var(--mo-texto-suave); }

.ct-paletas { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ct-paleta {
    border: 2px solid var(--mo-borde); border-radius: 11px; padding: 9px;
    background: #fff; cursor: pointer; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.ct-paleta:hover { border-color: var(--mo-magenta); }
.ct-paleta.elegida { border-color: var(--mo-magenta); }
.ct-paleta span { width: 18px; height: 18px; border-radius: 50%; }
.ct-paleta small { width: 100%; text-align: center; font-size: 10.5px; color: var(--mo-texto-suave); margin-top: 4px; }

/* ------------------------------------------------- Fondos y marcos */
.ct-fondos { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.ct-fondo {
    border: 2px solid var(--mo-borde); border-radius: 11px; padding: 7px;
    cursor: pointer; background: #fff; text-align: center;
}
.ct-fondo:hover { border-color: var(--mo-magenta); }
.ct-fondo.elegida { border-color: var(--mo-magenta); }
.ct-fondo input { display: none; }
.ct-fondo__muestra {
    display: block; height: 52px; border-radius: 7px;
    border: 1px solid var(--mo-borde); margin-bottom: 5px;
}
.ct-fondo small { font-size: 10.5px; color: var(--mo-texto-suave); }

.ct-marcos { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ct-marco {
    border: 2px solid var(--mo-borde); border-radius: 11px; padding: 10px 7px;
    cursor: pointer; background: #fff; text-align: center;
}
.ct-marco:hover { border-color: var(--mo-magenta); }
.ct-marco.elegida { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-marco input { display: none; }
.ct-marco small { display: block; font-size: 10.5px; color: var(--mo-texto-suave); margin-top: 7px; }

#ct-opacidad { width: 100%; accent-color: var(--mo-magenta); }

/* ------------------------------------------- Invitados del constructor */
.ct-invitados-resumen {
    display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-bottom: 16px;
}
.ct-invitados-resumen > div {
    background: var(--mo-crema); border: 1px solid #eee0c9;
    border-radius: 10px; padding: 12px 14px; text-align: center;
}
.ct-invitados-resumen strong {
    display: block; font-family: "Inria Serif", Georgia, serif;
    font-size: 23px; color: var(--mo-morado); line-height: 1.1;
}
.ct-invitados-resumen span { font-size: 11px; color: var(--mo-texto-suave); }

.ct-invitado-form {
    border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    padding: 16px; background: #fcfbfd;
}

/* ------------------------------------ Opciones de pregunta (juego) */
.ct-opciones { display: grid; gap: 8px; }
.ct-opcion-fila { display: flex; align-items: center; gap: 10px; }
.ct-opcion-fila input[type=radio] { accent-color: var(--mo-magenta); width: 18px; height: 18px; flex: 0 0 18px; }
.ct-opcion-fila input[type=text] {
    flex: 1; padding: 9px 11px; border: 1px solid var(--mo-borde);
    border-radius: 8px; font: inherit; font-size: 13px;
}

/* ------------------------------ Previsualizador en forma de celular */
.mo-celular-modal {
    position: fixed; inset: 0; z-index: 1950;
    background: rgba(31, 15, 38, .62);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.mo-celular-modal.abierto { display: flex; }
.mo-celular-modal__caja {
    background: #fff; border-radius: 16px; padding: 16px;
    max-height: 94vh; max-width: 96vw; overflow: auto;
    display: flex; flex-direction: column; gap: 12px;
}
.mo-celular-modal__head { display: flex; align-items: center; gap: 16px; }
.mo-celular-modal__head strong { display: block; font-size: 15px; color: var(--mo-morado); }
.mo-celular-modal__head small { color: var(--mo-texto-suave); font-size: 11.5px; }
.mo-celular-modal__head button { margin-left: auto; }

/* Selector de aparato */
.mo-aparatos {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    padding-bottom: 4px;
}
.mo-aparato {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 20px;
    border: 1px solid var(--mo-borde); background: #fff;
    font: inherit; font-size: 12.5px; color: var(--mo-morado); cursor: pointer;
}
.mo-aparato:hover { border-color: var(--mo-magenta); }
.mo-aparato i { color: var(--mo-magenta); }
.mo-aparato.activo { background: var(--mo-morado); color: #fff; border-color: var(--mo-morado); }
.mo-aparato.activo i { color: #fff; }

/* El escenario mide lo que ocupa el marco YA escalado, y se centra solo.
   El marco va dentro en posicion absoluta y se escala desde la esquina
   superior izquierda: asi lo pintado coincide exacto con la caja y no se
   desalinea cuando el aparato es mas ancho que la ventana. */
.mo-aparato-escenario { position: relative; margin: 0 auto; }

.mo-aparato-marco {
    position: absolute; top: 0; left: 0;
    transform-origin: top left;
    background: var(--mo-morado-900);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}
/* El iframe recibe los pixeles reales del aparato; el marco crece con el. */
.mo-aparato-marco iframe { border: 0; background: #fff; display: block; }
.mo-aparato-marco__bocina,
.mo-aparato-marco__base { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }

/* Movil: bisel grueso, esquinas muy redondeadas y bocina. */
.mo-aparato-marco[data-tipo="movil"] { border-radius: 40px; padding: 14px 12px; }
.mo-aparato-marco[data-tipo="movil"] iframe { border-radius: 28px; }
.mo-aparato-marco[data-tipo="movil"] .mo-aparato-marco__bocina {
    top: 6px; width: 92px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .24);
}
.mo-aparato-marco[data-tipo="movil"] .mo-aparato-marco__base { display: none; }

/* Tableta: bisel parejo y esquinas medianas. */
.mo-aparato-marco[data-tipo="tableta"] { border-radius: 24px; padding: 18px 14px; }
.mo-aparato-marco[data-tipo="tableta"] iframe { border-radius: 8px; }
.mo-aparato-marco[data-tipo="tableta"] .mo-aparato-marco__bocina {
    top: 7px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3);
}
.mo-aparato-marco[data-tipo="tableta"] .mo-aparato-marco__base { display: none; }

/* Escritorio: marco fino, barra de camara y peana abajo. */
.mo-aparato-marco[data-tipo="escritorio"] { border-radius: 12px 12px 4px 4px; padding: 22px 10px 12px; }
.mo-aparato-marco[data-tipo="escritorio"] iframe { border-radius: 3px; }
.mo-aparato-marco[data-tipo="escritorio"] .mo-aparato-marco__bocina {
    top: 8px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3);
}
.mo-aparato-marco[data-tipo="escritorio"] .mo-aparato-marco__base {
    bottom: -12px; width: 34%; height: 12px;
    border-radius: 0 0 8px 8px; background: var(--mo-morado-900); opacity: .9;
}

.mo-aparato-pie {
    text-align: center; font-size: 11.5px; color: var(--mo-texto-suave);
    letter-spacing: .08em; padding-top: 18px;
}

@media (max-width: 560px) {
    .mo-celular-modal__caja { padding: 12px; width: 100%; }
    .mo-aparato span { display: none; }
    .mo-aparato { padding: 8px 11px; }
}

/* -------------------------- Montajes de galeria y estilos de portada */
.ct-montajes { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ct-montaje {
    border: 2px solid var(--mo-borde); border-radius: 11px; padding: 9px 7px;
    cursor: pointer; background: #fff; text-align: center;
}
.ct-montaje:hover { border-color: var(--mo-magenta); }
.ct-montaje.elegida { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-montaje input { display: none; }
.ct-montaje small { display: block; font-size: 10.5px; color: var(--mo-texto-suave); margin-top: 6px; }

/* Cada montaje se dibuja con tres rectangulos que imitan el resultado. */
.ct-montaje__icono {
    display: block; height: 46px; background: var(--mo-crema);
    border-radius: 6px; padding: 5px; position: relative;
}
.ct-montaje__icono i { position: absolute; background: var(--mo-magenta); opacity: .55; border-radius: 2px; }

/* Las fichas de montaje dibujan su maqueta con <i> sueltos convertidos en
   rectangulos. Cuando la ficha usa un icono de verdad hay que devolverle el
   glifo, o el fondo rosado se lo come. */
.ct-montaje__icono .fa {
    position: static; background: none; opacity: 1; border-radius: 0;
    display: grid; place-items: center; height: 100%;
    font-size: 20px; color: var(--mo-magenta);
}

.ct-montaje__icono--carrusel i { top: 8px; bottom: 8px; width: 40%; }
.ct-montaje__icono--carrusel i:nth-child(1) { left: 6px; }
.ct-montaje__icono--carrusel i:nth-child(2) { left: 50%; }
.ct-montaje__icono--carrusel i:nth-child(3) { display: none; }

.ct-montaje__icono--mosaico i { width: 40%; height: 40%; }
.ct-montaje__icono--mosaico i:nth-child(1) { top: 6px; left: 7px; }
.ct-montaje__icono--mosaico i:nth-child(2) { top: 6px; right: 7px; }
.ct-montaje__icono--mosaico i:nth-child(3) { bottom: 6px; left: 7px; }

.ct-montaje__icono--collage i { width: 34%; height: 46%; }
.ct-montaje__icono--collage i:nth-child(1) { top: 7px; left: 8px; transform: rotate(-9deg); }
.ct-montaje__icono--collage i:nth-child(2) { top: 12px; right: 9px; transform: rotate(7deg); }
.ct-montaje__icono--collage i:nth-child(3) { bottom: 5px; left: 32%; transform: rotate(3deg); }

.ct-montaje__icono--tira i { left: 8px; right: 8px; height: 22%; }
.ct-montaje__icono--tira i:nth-child(1) { top: 6px; }
.ct-montaje__icono--tira i:nth-child(2) { top: 39%; }
.ct-montaje__icono--tira i:nth-child(3) { bottom: 6px; }

.ct-montaje__icono--destacada i:nth-child(1) { top: 6px; left: 8px; right: 8px; height: 46%; }
.ct-montaje__icono--destacada i:nth-child(2) { bottom: 6px; left: 8px; width: 38%; height: 30%; }
.ct-montaje__icono--destacada i:nth-child(3) { bottom: 6px; right: 8px; width: 38%; height: 30%; }

.ct-montaje__icono--portada-centrada i { left: 22%; right: 22%; height: 10%; }
.ct-montaje__icono--portada-centrada i:nth-child(1) { top: 9px; }
.ct-montaje__icono--portada-centrada i:nth-child(2) { top: 40%; left: 30%; right: 30%; }
.ct-montaje__icono--portada-centrada i:nth-child(3) { bottom: 7px; left: 14%; right: 14%; height: 26%; }

.ct-montaje__icono--portada-foto i:nth-child(1) { inset: 5px; opacity: .3; }
.ct-montaje__icono--portada-foto i:nth-child(2) { bottom: 14px; left: 12px; right: 12px; height: 9%; }
.ct-montaje__icono--portada-foto i:nth-child(3) { bottom: 8px; left: 24%; right: 24%; height: 7%; }

.ct-montaje__icono--portada-marco i:nth-child(1) {
    inset: 6px; background: none; border: 2px solid var(--mo-magenta); opacity: .5;
}
.ct-montaje__icono--portada-marco i:nth-child(2) { top: 38%; left: 26%; right: 26%; height: 10%; }
.ct-montaje__icono--portada-marco i:nth-child(3) { display: none; }

/* --------------------------------------- Paleta del dress code */
.ct-paleta-campos { display: flex; gap: 10px; flex-wrap: wrap; }
.ct-paleta-campo {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 7px; border: 2px solid var(--mo-borde); border-radius: 10px;
    cursor: pointer; background: #fff;
}
.ct-paleta-campo.activo { border-color: var(--mo-magenta); }
.ct-paleta-campo input[type=color] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--mo-borde); border-radius: 6px; }
.ct-paleta-campo input[type=color]:disabled { opacity: .35; }
.ct-paleta-campo input[type=checkbox] { accent-color: var(--mo-magenta); }

/* ---------------------------------------------- Adornos y divisores */
.ct-adornos { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.ct-adorno {
    border: 2px solid var(--mo-borde); border-radius: 11px; padding: 8px;
    cursor: pointer; background: #fff; text-align: center;
}
.ct-adorno:hover { border-color: var(--mo-magenta); }
.ct-adorno.elegida { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-adorno input { display: none; }
.ct-adorno__lienzo {
    display: grid; place-items: center; height: 60px;
    background: var(--mo-crema); border-radius: 7px; overflow: hidden;
}
.ct-adorno small { display: block; font-size: 10.5px; color: var(--mo-texto-suave); margin-top: 6px; }

.ct-divisores { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ct-divisor {
    border: 2px solid var(--mo-borde); border-radius: 11px; padding: 10px 8px;
    cursor: pointer; background: #fff; text-align: center;
}
.ct-divisor:hover { border-color: var(--mo-magenta); }
.ct-divisor.elegida { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-divisor input { display: none; }
.ct-divisor__lienzo { display: block; min-height: 24px; }
.ct-divisor__lienzo svg { max-width: 100%; height: auto; }
.ct-divisor small { display: block; font-size: 10.5px; color: var(--mo-texto-suave); margin-top: 4px; }

/* ------------------------------------------------------------- Musica */
.ct-pistas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ct-pista {
    display: flex; align-items: center; gap: 10px;
    border: 2px solid var(--mo-borde); border-radius: 11px;
    padding: 10px 12px; cursor: pointer; background: #fff;
}
.ct-pista:hover { border-color: var(--mo-magenta); }
.ct-pista.elegida { border-color: var(--mo-magenta); background: var(--mo-magenta-soft); }
.ct-pista input { display: none; }
.ct-pista__icono {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
    background: var(--mo-magenta-soft); color: var(--mo-magenta);
    display: grid; place-items: center;
}
.ct-pista__datos { min-width: 0; flex: 1; }
.ct-pista__datos strong { display: block; font-size: 13px; color: var(--mo-morado); }
.ct-pista__datos small { display: block; font-size: 10.5px; color: var(--mo-texto-suave); }

/* ---------------------------------------------------------- Compartir */
.ct-enlace { display: flex; gap: 8px; }
.ct-enlace input {
    flex: 1; padding: 10px 12px; border: 1px solid var(--mo-borde);
    border-radius: 9px; font: inherit; font-size: 13px; background: var(--mo-gris);
}
.ct-compartir-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ct-qr { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--mo-borde); border-radius: 12px; }

@media (max-width: 1100px) {
    .ct-lienzo { grid-template-columns: 1fr; }
    .ct-preview { position: static; order: -1; }
    .ct-preview iframe { height: 460px; }
}

@media (max-width: 640px) {
    .ct-barra__acciones { margin-left: 0; width: 100%; }
    .ct-barra__acciones .mo-btn { flex: 1; justify-content: center; }
    .ct-lista__fila { grid-template-columns: 1fr; }
    .ct-bloque__acciones { width: 100%; }
    .ct-preview iframe { height: 420px; }
    .mo-galeria-plantillas { grid-template-columns: 1fr; }
    .mo-grid-ddlove { grid-template-columns: 1fr; }
    .mo-modalidades { grid-template-columns: 1fr; }
}

/* =====================================================================
   Muro de fotos
   ===================================================================== */
.mo-muro-fotos {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.mo-muro-foto {
    margin: 0; background: #fff; border: 1px solid var(--mo-borde);
    border-radius: 10px; overflow: hidden;
}
/* Una foto oculta se sigue viendo aqui, pero apagada. */
.mo-muro-foto.oculta { opacity: .42; }
.mo-muro-foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.mo-muro-foto figcaption {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; padding: 7px 9px;
}
.mo-muro-foto figcaption small { font-size: 10.5px; color: var(--mo-texto-suave); }
.mo-muro-foto figcaption span { display: flex; gap: 4px; }

@media (max-width: 640px) {
    .mo-muro-fotos { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------- Muestra del marco (muro de fotos) */
/* Va acotada a proposito: la imagen mide 900x1200 de verdad y, cuando el
   panel se apila debajo del formulario en pantallas angostas, sin tope se
   desplegaba a tamano completo y reventaba el ancho de la pagina. */
.ct-preview__marco--muestra { max-width: 390px; margin: 0 auto; }
.mu-muestra { background: #241129; border-radius: 10px; overflow: hidden; }
.mu-muestra img { width: 100%; height: auto; display: block; }

/* Las paletas del muro son dos colores, no tres: marco y texto. */
.mu-paleta span { width: 15px; height: 15px; }

/* =====================================================================
   Configuracion :: catalogo de estilos
   ===================================================================== */
.cfg-muestra { display: flex; align-items: center; gap: 6px; min-height: 42px; }
.cfg-muestra svg { display: block; max-width: 110px; max-height: 42px; }
.cfg-muestra small { font-size: 10px; color: var(--mo-texto-suave); }
.cfg-banda {
    display: grid; place-items: center;
    width: 54px; height: 34px; border-radius: 6px; font-size: 13px;
}
.cfg-cuadro { width: 42px; height: 42px; border-radius: 6px; border: 1px solid var(--mo-borde); }
/* La miniatura del marco necesita una "foto" dentro para verse. */
.cfg-marco { display: inline-block; width: 46px; }
.cfg-marco__foto {
    display: block; width: 100%; aspect-ratio: 1;
    background: linear-gradient(135deg, var(--mo-magenta), var(--mo-morado));
}
.cfg-ambitos { display: flex; gap: 18px; flex-wrap: wrap; }

/* Muros ya contratados, en la pantalla de planes. */
.mo-contratados {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.mo-contratado {
    border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    padding: 12px 14px; background: var(--mo-crema);
    display: flex; flex-direction: column; gap: 9px;
}
.mo-contratado header strong { display: block; font-size: 14px; color: var(--mo-morado); }
.mo-contratado header small { display: block; font-size: 11.5px; color: var(--mo-texto-suave); margin-top: 2px; }
.mo-contratado header small i { color: var(--mo-magenta); }
.mo-contratado__datos { display: flex; align-items: center; gap: 8px; }
.mo-contratado__datos small { margin-left: auto; font-size: 11.5px; color: var(--mo-texto-suave); }
.mo-contratado__acciones { display: flex; gap: 6px; margin-top: auto; }

@media (max-width: 640px) {
    .mo-contratados { grid-template-columns: 1fr; }
}

/* =====================================================================
   Contrataciones
   ===================================================================== */
/* Ficha de dos columnas: datos a la izquierda, comprobante a la derecha. */
.mo-tabla--ficha th {
    width: 110px; text-align: left; font-weight: 400;
    color: var(--mo-texto-suave); font-size: 12.5px; white-space: nowrap;
}
.mo-tabla--ficha td { font-size: 13.5px; }

.cfg-comprobante {
    border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    overflow: hidden; background: var(--mo-gris); margin-bottom: 8px;
}
/* El comprobante puede venir en cualquier proporcion: se acota el alto. */
.cfg-comprobante img { width: 100%; max-height: 420px; object-fit: contain; display: block; }

.mo-aviso--alerta {
    background: rgba(201, 130, 10, .10);
    border: 1px solid rgba(201, 130, 10, .25);
    color: #8a5c07;
}

/* =====================================================================
   Aliados estrategicos :: el mural del cliente
   ===================================================================== */
.mo-mural {
    display: grid; gap: 16px; margin-bottom: 18px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.mo-aliado {
    background: #fff; border: 1px solid var(--mo-borde); border-radius: var(--mo-radio);
    overflow: hidden; box-shadow: var(--mo-sombra);
    display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mo-aliado:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(44,21,53,.14); }
/* El destacado se nota sin gritar: un filo magenta arriba. */
.mo-aliado.destacado { border-top: 3px solid var(--mo-magenta); }

.mo-aliado__foto {
    position: relative; height: 170px;
    background-size: cover; background-position: center;
    display: grid; place-items: center;
}
.mo-aliado__foto > i { font-size: 44px; color: rgba(255,255,255,.35); }
.mo-aliado__categoria {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 11px; border-radius: 20px;
    color: #fff; font-size: 11px; white-space: nowrap;
}
.mo-aliado__sello {
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(255,255,255,.94); color: #1d7a56; font-size: 11px;
}

.mo-aliado__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.mo-aliado__cuerpo h3 {
    font-family: "Inria Serif", Georgia, serif; font-size: 17px;
    color: var(--mo-morado); margin: 0;
}
.mo-aliado__lema { margin: 0; font-size: 12.5px; color: var(--mo-texto-suave); font-style: italic; }
.mo-aliado__lugar { margin: 0; font-size: 12px; color: var(--mo-texto-suave); }
.mo-aliado__lugar i { color: var(--mo-magenta); }

.mo-aliado__servicios { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.mo-aliado__servicios li {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12.5px; padding-bottom: 5px;
    border-bottom: 1px dashed var(--mo-borde);
}
.mo-aliado__servicios li span { color: var(--mo-texto); }
.mo-aliado__servicios li strong { margin-left: auto; color: var(--mo-morado); white-space: nowrap; }
.mo-aliado__servicios li strong small { font-weight: 400; color: var(--mo-texto-suave); font-size: 10.5px; }
.mo-aliado__servicios li > small { margin-left: auto; color: var(--mo-texto-suave); }
.mo-aliado__mas { border-bottom: 0 !important; color: var(--mo-texto-suave); font-style: italic; }

.mo-aliado__descuento {
    background: var(--mo-magenta-soft); color: var(--mo-magenta);
    border-radius: 8px; padding: 7px 11px; font-size: 12px;
}
.mo-aliado__pie {
    margin-top: auto; padding-top: 10px;
    display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
}
.mo-aliado__desde small { display: block; font-size: 10.5px; color: var(--mo-texto-suave); }
.mo-aliado__desde strong { font-size: 17px; color: var(--mo-morado); }
.mo-aliado__acciones { margin-left: auto; display: flex; gap: 6px; }

.mo-buscador { display: flex; gap: 6px; }
.mo-buscador input {
    padding: 7px 12px; border: 1px solid var(--mo-borde); border-radius: 20px;
    font: inherit; font-size: 13px; min-width: 200px;
}
.mo-buscador input:focus { outline: none; border-color: var(--mo-magenta); }

@media (max-width: 640px) {
    .mo-mural { grid-template-columns: 1fr; }
    .mo-buscador input { min-width: 0; width: 100%; }
}

/* =====================================================================
   SweetAlert2 con los colores de Momentiu
   ===================================================================== */
.mo-swal { border-radius: 16px !important; padding: 26px 24px 22px !important; }
.mo-swal__titulo {
    font-family: "Inria Serif", Georgia, serif !important;
    color: var(--mo-morado) !important; font-size: 22px !important;
}
.mo-swal__texto { color: var(--mo-texto-suave) !important; font-size: 14.5px !important; }

/* Los botones se pintan aqui: Swal viene con su propio estilo azul. */
.mo-swal__ok, .mo-swal__no {
    border: 0; border-radius: 10px; cursor: pointer;
    font-family: "Jost", system-ui, sans-serif; font-size: 14.5px; font-weight: 500;
    padding: 11px 24px; margin: 0 5px;
}
.mo-swal__ok { background: var(--mo-magenta); color: #fff; }
.mo-swal__ok--peligro { background: var(--mo-error); }
.mo-swal__no { background: var(--mo-gris); color: var(--mo-texto); border: 1px solid var(--mo-borde); }
.mo-swal__no:hover { background: #efecf1; }

/* El icono de Swal toma el color de la marca en vez del amarillo de fabrica. */
.mo-swal .swal2-icon.swal2-warning { border-color: var(--mo-magenta); color: var(--mo-magenta); }
.mo-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--mo-ok); }
.mo-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(29, 154, 108, .3); }

/* Toast de SweetAlert2: mismo aire que el resto del panel. */
.mo-swal-toast { border-radius: 12px !important; font-family: "Jost", system-ui, sans-serif !important; }
.mo-swal-toast .swal2-title { font-size: 14px !important; font-weight: 400 !important; color: var(--mo-texto) !important; }

/* --------------------------------------------- Cupo de la contratacion
   Lo que le queda al cliente de cada producto. Va a la par del titulo de
   la pantalla para que lo vea antes de ponerse a armar algo. */
.mo-cupo {
    display: inline-flex;
    align-items: baseline;
    /* El contenedor de acciones es flex y estira a sus hijos: sin esto la
       pastilla queda mas alta que los botones de al lado. */
    align-self: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}
.mo-cupo strong { font-size: 16px; font-weight: 600; }
.mo-cupo em { font-style: normal; opacity: .75; font-size: 12px; }
.mo-cupo--ok     { background: rgba(29, 154, 108, .12); color: var(--mo-ok); }
.mo-cupo--alerta { background: rgba(201, 130, 10, .14); color: var(--mo-alerta); }
.mo-cupo--error  { background: rgba(192, 57, 43, .12); color: var(--mo-error); }

@media (max-width: 640px) {
    .mo-cupo { white-space: normal; }
}

/* --------------------------------------------- Recuerdo para redes
   El cliente elige la medida viendo las dos, no adivinando por el nombre. */
.mo-recuerdo__nota { margin: 0 0 16px; font-size: 14px; color: var(--mo-texto-suave); }
.mo-recuerdo__opciones { display: flex; gap: 16px; justify-content: center; }
.mo-recuerdo__op {
    flex: 1 1 0; max-width: 240px; display: block; padding: 12px;
    border: 1px solid var(--mo-borde); border-radius: 12px;
    text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.mo-recuerdo__op:hover { border-color: var(--mo-magenta); transform: translateY(-2px); text-decoration: none; }
.mo-recuerdo__op img {
    width: 100%; border-radius: 8px; display: block; margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(44, 21, 53, .12);
}
.mo-recuerdo__op strong { display: block; font-size: 14.5px; color: var(--mo-morado); }
.mo-recuerdo__op small { display: block; font-size: 12px; color: var(--mo-texto-suave); margin-top: 2px; }

@media (max-width: 560px) {
    .mo-recuerdo__opciones { flex-direction: column; align-items: center; }
    .mo-recuerdo__op { max-width: 100%; width: 100%; }
}