/* Admin · Recordatorio y Auspiciantes. Colores del tema (theme.css). */

.organizer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px;
  align-items: start;
}

.organizer-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.organizer-reminders { max-width: 980px; }

/* Encabezado compacto: título, «X de Y» y filtros en una línea que entra en el celular. */
.organizer-reminders-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-block: 14px !important;
}

.organizer-head-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.organizer-head-line h2 { margin: 0; font-size: 1.15rem; }

.organizer-count {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, .08);
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
}

.organizer-count.is-complete { color: #11120f; background: var(--primary); }

.organizer-filters {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.organizer-filters button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font-size: .8rem;
}

.organizer-filters button.active {
  color: #11120f;
  background: var(--primary);
}

.organizer-reminders-head .organizer-status { flex-basis: 100%; margin: 0; }

/* Agregar en una sola línea: campo y botón chico, también en el celular. */
.organizer-add-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.organizer-add-line input,
.organizer-add-line select { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.organizer-add-line button { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
.organizer-add-card .organizer-copy { margin-top: 12px; }

.organizer-status:empty { display: none; }
.organizer-status { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }
.organizer-status[data-type="error"] { color: #ff9a8a; }
.organizer-status[data-type="success"] { color: var(--primary); }

.organizer-copy { margin-top: 14px; }
.organizer-copy summary { color: var(--muted); font-size: .88rem; font-weight: 700; cursor: pointer; }
.organizer-copy .inline-form { margin-top: 10px; }

.organizer-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.organizer-group-head h3 { margin: 0; overflow-wrap: anywhere; }
.organizer-group-head .organizer-line-tools { margin-left: auto; }
.organizer-group-head .organizer-inline-edit { flex: 1; }

.organizer-notes,
.organizer-subnotes {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.organizer-notes { margin-top: 10px; }
.organizer-note { padding: 10px 0; border-top: 1px solid var(--line); }

.organizer-subnotes {
  gap: 2px;
  margin: 8px 0 0 30px;
  padding-left: 12px;
  border-left: 2px solid rgba(152, 217, 0, .45);
}

.organizer-note-line,
.organizer-subnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.organizer-subnote { min-height: 40px; }

.organizer-check-line {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.organizer-check-line span { overflow-wrap: anywhere; }
.organizer-subnote .organizer-check-line { font-weight: 500; font-size: .92rem; }

.organizer-check-line input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.organizer-note.is-done > .organizer-note-line .organizer-check-line span,
.organizer-subnote.is-done .organizer-check-line span {
  color: var(--muted);
  text-decoration: line-through;
}

.organizer-pending-subnotes {
  display: inline-flex;
  margin-left: 30px;
  max-width: calc(100% - 30px);
  color: var(--text);
  text-decoration: none;
  white-space: normal;
}

.organizer-line-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.organizer-line-tools .organizer-icon-button {
  min-width: 36px;
  min-height: 36px;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}

.organizer-line-tools .organizer-icon-button:hover:not(:disabled) { color: var(--text); }

/* En PC las herramientas de cada línea aparecen al pasar o enfocar. */
@media (hover: hover) and (min-width: 641px) {
  .organizer-note-line .organizer-line-tools,
  .organizer-subnote .organizer-line-tools { opacity: .35; transition: opacity .15s ease; }
  .organizer-note-line:hover .organizer-line-tools,
  .organizer-note-line:focus-within .organizer-line-tools,
  .organizer-subnote:hover .organizer-line-tools,
  .organizer-subnote:focus-within .organizer-line-tools { opacity: 1; }
}

.organizer-inline-edit {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.organizer-inline-edit input { flex: 1 1 220px; min-width: 0; }
.organizer-note-add { margin-top: 10px; }

.organizer-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  padding: 0 8px;
}

.organizer-invitation .admin-invitation-card { margin: 12px 0 0; }

.organizer-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.organizer-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }

.organizer-form .button-row,
.organizer-edit .button-row { margin-top: 4px; }

.organizer-inline { margin: 0; }

.organizer-edit {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .18);
}

.organizer-sponsor-list { display: grid; }

.organizer-sponsor {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.organizer-sponsor.is-editing { display: block; }

.organizer-sponsor-info { display: grid; gap: 4px; min-width: 0; }
.organizer-sponsor-name { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.organizer-sponsor-info .hint { margin: 0; overflow-wrap: anywhere; }

.organizer-sponsor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.organizer-arrows { display: flex; gap: 4px; }

.organizer-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f3f5ee;
  color: #11120f;
  font-weight: 800;
  text-align: center;
}

.organizer-logo { width: 96px; height: 56px; }

.organizer-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.organizer-logo.is-name {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  font-size: .8rem;
}

.organizer-logo.is-name { border-style: dashed; color: var(--muted); font-weight: 600; }

.organizer-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
}

.organizer-switch-track {
  display: flex;
  width: 44px;
  height: 26px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}

.organizer-switch-track::after {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ecefe6;
  content: "";
}

.organizer-switch.is-on { color: var(--primary); }
.organizer-switch.is-on .organizer-switch-track { justify-content: flex-end; background: var(--primary); box-shadow: 0 0 14px rgba(152, 217, 0, .45); }
.organizer-switch.is-on .organizer-switch-track::after { background: #11120f; }

/* Inicio público */
.public-sponsors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.public-sponsors-list a,
.public-sponsors-list span {
  display: grid;
  place-items: center;
  min-width: 130px;
  height: 64px;
  padding: 0 16px;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
}

.public-sponsors-list .has-logo { background: #f3f5ee; }
.public-sponsors-list .has-logo img { max-width: 160px; max-height: 52px; object-fit: contain; }
.public-sponsors-list .is-name { color: var(--text); border: 1px solid var(--line-strong); font-weight: 700; }

@media (max-width: 900px) {
  .organizer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .organizer-sponsor { grid-template-columns: 72px minmax(0, 1fr); }
  .organizer-logo { width: 72px; }
  .organizer-sponsor-actions { grid-column: 1 / -1; justify-content: space-between; }
  .organizer-subnotes { margin-left: 10px; }
}

@media print {
  .organizer-grid { display: none; }
}

/* .card define display: el atributo hidden tiene que ganar. */
#publicSponsorsCard[hidden],
.organizer-invitation[hidden] { display: none !important; }