:root{--ink:#211f1c;--muted:#706b65;--paper:#fffaf4;--paper2:#f7eee5;--white:#fff;--wine:#8f2348;--wine2:#671530;--coral:#ec765e;--line:rgba(33,31,28,.12);--shadow:0 22px 60px rgba(71,41,30,.12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px max(22px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);background:rgba(255,250,244,.92);backdrop-filter:blur(14px)}.brand{color:var(--ink);font:700 1.35rem Georgia,serif;text-decoration:none}.brand span{color:var(--wine)}.top-actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;padding:0 18px;border:1px solid var(--wine);border-radius:999px;background:var(--wine);color:white;font-weight:750;text-decoration:none}.btn:hover{background:var(--wine2)}.btn.secondary{background:white;color:var(--ink);border-color:var(--line)}.btn.danger{border-color:#c83248;background:transparent;color:#a41f34}.btn:disabled{opacity:.55;cursor:wait}.container{width:min(1180px,calc(100% - 36px));margin:auto;padding:46px 0 80px}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 80% 0,rgba(236,118,94,.18),transparent 38%),var(--paper)}.auth-card{width:min(460px,100%);padding:38px;border:1px solid var(--line);border-radius:28px;background:white;box-shadow:var(--shadow)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,serif;font-weight:500;letter-spacing:-.035em}h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1}h2{font-size:2rem}.muted{color:var(--muted)}.form{display:grid;gap:15px}.field{display:grid;gap:6px}.field label{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.field input{width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:white}.status{padding:12px 14px;border-radius:12px;background:var(--paper2);color:var(--wine2);font-size:.9rem}.dashboard-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:35px}.dashboard-head p{margin-bottom:0}.event-layout{display:grid;grid-template-columns:330px 1fr;gap:24px}.panel{padding:25px;border:1px solid var(--line);border-radius:24px;background:white}.event-card h2{margin-bottom:7px}.stat{margin:22px 0}.stat-row{display:flex;justify-content:space-between;gap:15px;font-size:.86rem}.meter{height:10px;margin-top:8px;border-radius:999px;background:var(--paper2);overflow:hidden}.meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),var(--wine));width:0}.share-box{display:grid;gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}.share-url{padding:10px;border-radius:10px;background:var(--paper2);font-size:.78rem;overflow-wrap:anywhere}.qr{width:150px;aspect-ratio:1;margin:auto}.toggle{display:flex;align-items:center;gap:9px;font-size:.88rem}.upload-box{padding:28px;border:2px dashed rgba(143,35,72,.3);border-radius:20px;background:var(--paper);text-align:center}.upload-box.drag{border-color:var(--wine);background:#fff3f2}.upload-box input{display:none}.upload-box p{margin:9px 0 16px}.gallery-head{display:flex;justify-content:space-between;align-items:center;margin:32px 0 15px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.photo{position:relative;aspect-ratio:1;border-radius:16px;background:var(--paper2);overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.photo-info{position:absolute;inset:auto 0 0;padding:28px 11px 9px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:white;font-size:.72rem}.photo button{position:absolute;right:8px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#a41f34;font-weight:900}.empty{grid-column:1/-1;padding:45px 20px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--muted)}
@media(max-width:850px){.event-layout{grid-template-columns:1fr}.dashboard-head{align-items:start;flex-direction:column}.event-card{order:1}.content-panel{order:0}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.topbar{padding:13px 16px}.user-name{display:none}.container{width:min(100% - 24px,600px);padding-top:28px}.panel,.auth-card{padding:20px;border-radius:20px}.gallery{gap:8px}.btn{padding-inline:14px}.top-actions .secondary{display:none}}


.plan-offers {
  margin-top: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
}

.plan-offers-head {
  margin-bottom: 22px;
  text-align: center;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.plan-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.plan-card h3,
.plan-card p {
  margin: 0;
}

.plan-price {
  color: var(--wine);
  font-size: 1.7rem;
  font-weight: 800;
}

.plan-upgrade-button {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 750px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
}

.photo.is-cover {
  box-shadow: 0 0 0 3px var(--wine);
}

.topbar .events-toolbar { margin: 0; }
.config-menu { position: relative; flex: 0 0 auto; }
.config-menu__panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 50; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 90px); padding: 20px; overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 24px 70px rgba(43,27,22,.22); }
.config-menu__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.config-menu__head strong,
.config-menu__head span { display: block; }
.config-menu__head span { margin-top: 3px; font-size: .75rem; }
.config-menu__close { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--paper2); color: var(--ink); font-size: 1.4rem; line-height: 1; }
.config-menu__panel .btn.secondary { display: inline-flex; width: 100%; }
.config-menu__panel .field select { width: 100%; min-height: 48px; padding: 0 38px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); font: inherit; }
.config-menu__footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.config-menu__footer .btn { width: 100%; }

.photo .cover-action {
  left: 8px;
  right: auto;
  width: auto;
  min-width: 34px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--wine);
  font-size: .72rem;
  font-weight: 800;
}

.photo .cover-action.is-active {
  background: var(--wine);
  color: #fff;
  opacity: 1;
  cursor: default;
}

/* =========================================================
   ESTADÍSTICAS DEL EVENTO
   ========================================================= */

.analytics {
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.analytics__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.analytics__head h2,
.analytics__head p {
  margin-bottom: 0;
}

.analytics__head > .muted {
  max-width: 330px;
  font-size: .78rem;
  text-align: right;
}

.analytics__eyebrow {
  margin: 0 0 4px;
  color: var(--wine);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.analytics__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.analytics-card {
  position: relative;
  min-width: 0;
  padding: 15px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, var(--paper));
}

.analytics-card__icon {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--wine);
  font-size: .95rem;
  opacity: .65;
}

.analytics-card strong,
.analytics-card > span:last-child {
  display: block;
}

.analytics-card strong {
  padding-right: 20px;
  color: var(--ink);
  font: 600 1.65rem/1 Georgia, serif;
}

.analytics-card > span:last-child {
  margin-top: 6px;
  color: var(--muted);
  font-size: .72rem;
}

.analytics__detail {
  margin: 10px 2px 0;
  font-size: .72rem;
}

.photo-info {
  display: grid;
  gap: 3px;
}

.photo-info__uploader,
.photo-info__stats {
  display: block;
}

.video-upload-box { margin-top: 18px; }
.video-progress { display: grid; gap: 7px; margin: 16px auto 0; text-align: left; }
.video-progress__labels { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: .78rem; }
.video-progress progress { width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 999px; background: var(--paper2); accent-color: var(--wine); }
.video-progress progress::-webkit-progress-bar { border-radius: 999px; background: var(--paper2); }
.video-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg,var(--coral),var(--wine)); }
.photo-upload-progress { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 12px; margin-top: 16px; padding: 10px; border-radius: 14px; background: white; text-align: left; }
.photo-upload-progress img { width: 72px; height: 72px; border-radius: 10px; background: var(--paper2); object-fit: cover; }
.photo-upload-progress__body { display: grid; min-width: 0; gap: 8px; }
.photo-upload-progress__body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-upload-progress progress { width: 100%; height: 12px; border: 0; border-radius: 999px; accent-color: var(--wine); }
.event-card .toggle + .toggle { margin-top: 10px; }
.video-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.video-card { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); overflow: hidden; }
.video-card video { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 11px; background: #161311; object-fit: contain; }
.video-card__info { display: grid; gap: 4px; padding: 10px 2px 2px; font-size: .82rem; }
.video-card__info span { color: var(--muted); }
.video-card__delete { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #a41f34; font-weight: 900; }
.admin-media-mixed { align-items: start; }
.admin-media-mixed .video-card { width: 100%; }
.photo.is-deleting > :not(.deleting-overlay),
.video-card.is-deleting > :not(.deleting-overlay) { filter: blur(5px); opacity: .42; pointer-events: none; }
.deleting-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; background: rgba(255,250,244,.72); color: var(--wine); text-align: center; backdrop-filter: blur(2px); }
.deleting-spinner { width: 30px; height: 30px; border: 3px solid rgba(103,21,48,.2); border-top-color: var(--wine); border-radius: 50%; animation: deleting-spin .75s linear infinite; }
@keyframes deleting-spin { to { transform: rotate(360deg); } }
@media(max-width:520px){.video-gallery{grid-template-columns:1fr}}

.photo-info__stats {
  font-weight: 750;
  letter-spacing: .01em;
}

@media (max-width: 1050px) {
  .analytics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .analytics {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .analytics__head {
    display: block;
  }

  .analytics__head > .muted {
    margin-top: 5px;
    text-align: left;
  }

  .analytics__grid {
    gap: 8px;
  }

  .analytics-card {
    padding: 13px 12px;
  }

  .analytics-card strong {
    font-size: 1.4rem;
  }
}


/* =========================================================
   SELECTOR Y CREACIÓN DE EVENTOS
   ========================================================= */



/* =========================================================
   SELECTOR DE EVENTO — VERSIÓN COMPACTA
   ========================================================= */

.events-toolbar {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;

  width: auto;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 10px 12px;

  background: #ffffff;
  border: 1px solid #e8e3dc;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(31, 25, 20, 0.05);
}

.events-selector {
  width: 320px;
  max-width: calc(100vw - 230px);
  margin: 0;
}

.events-selector label {
  display: block;
  margin: 0 0 5px;
  color: #625b54;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.events-selector select {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 38px 0 12px;

  color: #2d2824;
  font-family: inherit;
  font-size: 14px;

  background-color: #faf8f5;
  border: 1px solid #dcd5cd;
  border-radius: 9px;
  outline: none;
  cursor: pointer;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.events-selector select:hover {
  background-color: #ffffff;
  border-color: #bca998;
}

.events-selector select:focus {
  background-color: #ffffff;
  border-color: #b56f52;
  box-shadow: 0 0 0 3px rgba(181, 111, 82, 0.12);
}

#new-event-button {
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  min-height: 40px;
  padding: 0 15px;

  font-size: 13px;
  white-space: nowrap;
  border-radius: 9px;
}

#new-event-panel {
  width: min(620px, calc(100% - 32px));
  margin: 48px auto;
  padding: 34px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

#new-event-panel h2 { margin-bottom: 24px; }

#new-event-form { display: grid; gap: 18px; }

#new-event-form .form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

#new-event-form .form-actions .btn { width: 100%; }

body.new-event-mode { min-height: 100vh; background: var(--paper); }

/* Tablet */

@media (max-width: 900px) {
  #new-event-form {
    grid-template-columns: 1fr 1fr;
  }

  #new-event-form .field:first-child {
    grid-column: 1 / -1;
  }
}


/* Select del tipo de evento */

#new-event-type {
  display: block;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 38px 0 14px;

  color: #2d2824;
  font-family: inherit;
  font-size: 15px;
  line-height: normal;

  background-color: #ffffff;
  border: 1px solid #dcd5cd;
  border-radius: 10px;

  cursor: pointer;
  outline: none;
  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

#new-event-type:hover {
  border-color: #bca998;
}

#new-event-type:focus {
  background-color: #ffffff;
  border-color: #b56f52;
  box-shadow: 0 0 0 3px rgba(181, 111, 82, 0.14);
}

@media (max-width: 640px) {
  #new-event-type {
    height: 42px;
    min-height: 42px;
    padding-left: 12px;
    font-size: 14px;
  }
}



/* Móvil */


@media (max-width: 640px) {
  /* Cabecera general */

  .topbar {
    gap: 8px;
    min-height: 58px;
    padding: 9px 12px;
  }

  .dashboard-brand { display: none; }

  .top-actions { width: 100%; }

  .topbar .events-toolbar { flex: 1 1 auto; min-width: 0; margin: 0; }

  #config-menu-button { min-height: 42px; padding-inline: 12px; }

  .config-menu__panel { position: fixed; top: 66px; right: 10px; left: 10px; width: auto; max-height: calc(100dvh - 78px); border-radius: 16px; }

  .brand {
    font-size: 1.15rem;
  }

  .top-actions {
    gap: 6px;
  }

  .top-actions .btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  .user-name {
    display: none;
  }

  /* Contenido inicial */

  .container {
    width: calc(100% - 20px);
    padding-top: 18px;
  }

  .dashboard-head {
    gap: 5px;
    margin-bottom: 14px;
  }

  .dashboard-head h1 {
    margin-bottom: 2px;
    font-size: 1.8rem;
  }

  .dashboard-head p {
    font-size: 13px;
  }

  /* Selector y botón en una sola fila */

  .events-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px;
    border-radius: 14px;
  }

  .events-selector {
    min-width: 0;
    max-width: none;
  }

  /* Ocultar visualmente la etiqueta, manteniendo accesibilidad */

  .events-selector label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .events-selector select {
    height: 42px;
    min-height: 42px;
    padding: 0 32px 0 11px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* En móvil mostramos solamente el símbolo + */

  #new-event-button {
    width: 44px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;
  }

  #new-event-button::before {
    content: "+";
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
  }

  /* Formulario de creación */

  #new-event-panel {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 14px;
  }

  #new-event-panel h2 {
    margin-bottom: 14px;
    font-size: 19px;
  }

  #new-event-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #new-event-form .field:first-child,
  #new-event-form .form-actions,
  #new-event-status {
    grid-column: auto;
  }

  #new-event-form input,
  #new-event-form select {
    min-height: 42px;
    height: 42px;
  }

  #new-event-form .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #new #new-event-form .form-actions .btn {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
  }

  /* Paneles generales */

  .panel {
    padding: 17px;
    border-radius: 17px;
  }

  .event-layout {
    gap: 14px;
  }
}