* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #f4f5f7;
  color: #1c1e21;
  margin: 0;
}
.topnav {
  background: #ffffff;
  border-bottom: 1px solid #e1e4e8;
  padding: 12px 24px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.topnav .brand { font-weight: 700; margin-right: auto; }
.topnav a { color: #1c1e21; text-decoration: none; }
.topnav a:hover { color: #4361ee; }

main { max-width: 1800px; margin: 24px auto; padding: 0 32px; }

.card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 1.4rem; font-weight: 700; color: #111; }
h1 { font-size: 1.8rem; font-weight: 700; }

form label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #555;
}
form input[type=text], form input[type=url], form input[type=file],
form textarea, form input[type=datetime-local] {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
}

.platforms { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #ccc; border-radius: 20px;
  padding: 6px 14px; cursor: pointer; font-size: 0.85rem;
  text-transform: capitalize;
}
.chip input { margin: 0; }
.group-chip {
  background: #fff; color: #333; font-weight: 600; text-transform: none;
}
.group-chip.active { background: #4361ee; color: #fff; border-color: #4361ee; }

.thumb-choices { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.thumb-choices img.thumb-choice {
  width: 90px; height: 90px; object-fit: cover; border-radius: 6px;
  border: 3px solid transparent; cursor: pointer;
}
.thumb-choices img.thumb-choice.selected { border-color: #4361ee; }

button {
  background: #4361ee; color: #fff; border: none;
  border-radius: 6px; padding: 9px 18px; cursor: pointer; font-size: 0.9rem;
}
button:hover { background: #3651d4; }

/* OJO: aqui NO va "display: block". El id pesa mas que la clase, y si se
   fuerza display aqui, el aviso de error (#form-msg) queda SIEMPRE visible
   como un cuadro vacio debajo del boton Programar -- que ademas parece una
   barra de progreso que nunca se llena. Debe mandar .form-error (oculto) y
   .form-error.show (visible). */
#form-msg { margin-top: 8px; font-size: 0.85rem; }

.mini-picker { display: flex; gap: 14px; margin: -6px 0 12px; border: 1px solid #eee; border-radius: 8px; padding: 8px 10px; background: #fafafa; }
.mini-picker-cal { flex: 1.3; min-width: 0; }
.mini-picker-hours { flex: 1; min-width: 0; border-left: 1px solid #e5e5e5; padding-left: 12px; display: flex; flex-direction: column; }
.mini-picker-hours .hint { margin: 0 0 4px; }
.mini-hour-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mini-hour-preset { background: #eee; color: #333; padding: 5px 12px; font-size: 0.85rem; font-weight: 600; border-radius: 12px; }
.mini-hour-preset:hover { background: #dbe4ff; color: #34399a; }
.mini-picker-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; font-size: 0.85rem; }
.mini-picker-header button { background: #eee; color: #333; padding: 3px 10px; font-size: 0.8rem; }
.mini-picker-header span { text-transform: capitalize; font-weight: 700; }
.mini-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.mini-dow { text-align: center; font-size: 0.68rem; color: #999; }
.mini-day {
  background: #fff; border: 1px solid #ddd; color: #1c1e21;
  padding: 5px 3px; border-radius: 4px; font-size: 0.9rem; font-weight: 600;
  line-height: 1.05; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mini-day-num { font-size: 0.98rem; color: #1c1e21; }
.mini-day:hover:not(:disabled) { background: #f2f5ff; }
.mini-day.today { border-color: #4361ee; font-weight: 700; }
/* IMPORTANTE: .selected va DESPUES de .busy a proposito.
   Antes .busy pisaba el fondo y dejaba el numero blanco sobre blanco:
   por eso "desaparecia" el numero del dia. */
.mini-day.busy { border-color: #a9d8a9; background: #fff; }
.mini-day.selected { background: #eef1ff; border-color: #4361ee; color: #1c1e21; }
/* con 4 o mas publicaciones el numero ya no cabe: manda el horario */
.mini-day.many .mini-day-num { display: none; }
.mini-day-times { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 0 2px; }
.mini-time-chip {
  display: block; font-size: 0.62rem; font-weight: 700; line-height: 1.35;
  color: #1a7a4c; background: #d3f2e0; border-radius: 3px; padding: 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-time-chip.more { background: #e6e6e6; color: #555; }
/* dia ya pasado: marca de agua y no seleccionable */
.mini-day.past {
  color: #c9c9c9; background: #f6f6f6; border-color: #ececec;
  cursor: not-allowed; position: relative; overflow: hidden;
}
.mini-day.past .mini-day-num { text-decoration: line-through; opacity: 0.6; }
.mini-day.past::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(120,120,120,0.10) 0 5px, transparent 5px 10px);
}
[data-theme="dark"] .mini-day.busy { background: #1c1f26; border-color: #35503a; }
[data-theme="dark"] .mini-day.selected { background: #232a3d; border-color: #4361ee; }
[data-theme="dark"] .mini-day-num { color: #e8e8ea; }
[data-theme="dark"] .mini-time-chip { background: #26402e; color: #8fe0b0; }
[data-theme="dark"] .mini-time-chip.more { background: #2a2e37; color: #999; }
[data-theme="dark"] .mini-day.past { background: #1a1d23; border-color: #23262d; color: #555; }
/* El campo de "hora exacta": antes no tenia estilo propio y salia diminuto
   (los navegadores lo dibujan con su tamano minimo por defecto). */
#mini-picker-time {
  width: 100%;
  display: block;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  min-height: 48px;
  color: #1c1e21;
  background: #fff;
}
[data-theme="dark"] #mini-picker-time { background: #12141a; border-color: #3a3f4a; color: #e8e8ea; }

.thumb-scrub-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
#thumb-scrub-preview { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; border: 3px solid transparent; }
#thumb-scrub-preview.selected { border-color: #4361ee; }
#thumb-scrub { flex: 1; }

.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
button.btn-lg { font-size: 1.05rem; font-weight: 700; padding: 13px 36px; }

.history-clear { display: flex; align-items: center; gap: 10px; }
#clear-history-form { display: flex; align-items: center; gap: 10px; }
#clear-history-form label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.85rem; }
#clear-history-form input[type=date] {
  padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.85rem;
}

.calendar-header { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 12px; }
.calendar-header button { background: #eee; color: #333; }
.calendar-header h2 { text-transform: capitalize; }

.view-modes { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.view-mode-chip { background: #fff; color: #333; font-weight: 600; }
.view-mode-chip.active { background: #4361ee; color: #fff; border-color: #4361ee; }

.calendar-grid.view-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 0.8rem; color: #888; padding-bottom: 4px; }
.cal-day {
  height: 154px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px;
  padding: 6px; font-size: 0.8rem; background: #fafafa;
}
.cal-day.empty { background: transparent; border: none; }
/* dia ya pasado: marca de agua y no seleccionable */
.cal-day.past { background: #f4f4f4; cursor: not-allowed; position: relative; }
.cal-day.past .num { opacity: 0.45; text-decoration: line-through; }
.cal-day.past::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: repeating-linear-gradient(45deg, rgba(120,120,120,0.09) 0 6px, transparent 6px 12px);
}
[data-theme="dark"] .cal-day.past { background: #1a1d23; }
.cal-day .num { font-weight: 600; color: #666; }
.cal-day .badge {
  display: flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 3px 5px; border-radius: 4px;
  background: #dbe4ff; color: #34399a; font-size: 0.75rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-day .badge.done { background: #d3f2e0; color: #1a7a4c; }
.cal-day .badge.error { background: #fbd7d7; color: #a12727; }
.cal-day .badge.cancelled { background: #eee; color: #999; }
.cal-day .badge.pending { background: #fdf1d6; color: #8a6300; }
.cal-day .group-pill { cursor: pointer; }
.cal-day .group-pill[draggable="true"] { cursor: grab; }
.cal-day.drag-over { background: #e8ecff; outline: 2px dashed #4361ee; }
.pill-thumb {
  width: 36px; height: 36px; object-fit: cover; border-radius: 4px;
  flex-shrink: 0;
}

.cal-hour-scroll { max-height: 640px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; }
.cal-hour-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-hour-table th {
  position: sticky; top: 0; background: #fff; z-index: 1;
  font-size: 0.75rem; color: #666; padding: 6px 4px; border-bottom: 1px solid #eee; text-align: center;
}
.cal-hour-label {
  width: 60px; font-size: 0.7rem; color: #999; text-align: right;
  padding: 2px 8px; vertical-align: top; white-space: nowrap;
}
.cal-hour-cell {
  border: 1px solid #f0f0f0; height: 34px; vertical-align: top; padding: 1px;
}
.cal-hour-cell--day { height: 56px; }
.cal-hour-cell.drag-over { background: #e8ecff; outline: 2px dashed #4361ee; }
.cal-hour-cell .group-pill {
  display: flex; align-items: center; gap: 4px; padding: 2px 4px; margin-bottom: 2px;
  border-radius: 4px; font-size: 0.68rem; background: #dbe4ff; color: #34399a; cursor: pointer;
}
.cal-hour-cell .group-pill.done { background: #d3f2e0; color: #1a7a4c; }
.cal-hour-cell .group-pill.error { background: #fbd7d7; color: #a12727; }
.cal-hour-cell .group-pill.pending { background: #fdf1d6; color: #8a6300; }
.cal-hour-cell .pill-thumb { width: 16px; height: 16px; }
.cal-hour-cell--day .pill-thumb { width: 48px; height: 48px; }

.row-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
  vertical-align: middle; margin-right: 10px;
}

.group-detail-bulk {
  padding: 10px 0; font-size: 0.9rem;
}
.group-detail-bulk strong { display: block; margin-bottom: 6px; }

.group-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 0.9rem;
}
.group-detail-info { flex: 1; }
.group-detail-controls { display: flex; align-items: center; gap: 6px; }
.group-detail-controls input[type=datetime-local] {
  padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.85rem;
}

.list-header { display: flex; justify-content: space-between; align-items: center; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid #eee; font-size: 0.9rem; }

#posts-table { table-layout: fixed; }
#posts-table th:nth-child(1), #posts-table td:nth-child(1) { width: 3%; color: #999; font-size: 0.75rem; text-align: center; }
#posts-table th:nth-child(2), #posts-table td:nth-child(2) { width: 12%; }
#posts-table th:nth-child(3), #posts-table td:nth-child(3) { width: 10%; }
#posts-table th:nth-child(4), #posts-table td:nth-child(4) { width: 12%; }
#posts-table th:nth-child(5), #posts-table td:nth-child(5) { width: 48%; font-size: 1.05rem; white-space: normal; word-break: break-word; }
#posts-table th:nth-child(6), #posts-table td:nth-child(6) { width: 15%; text-align: right; }
.status-pending { color: #b8860b; }
.status-done { color: #1a7a4c; }
.status-error { color: #a12727; }
.status-cancelled { color: #999; }

.queue-date {
  background: #f4f5f7; font-weight: 600; font-size: 0.8rem; color: #555;
  text-transform: capitalize; padding-top: 10px;
}
.queue-section {
  background: #eef0f5; font-weight: 700; font-size: 0.85rem; color: #333;
  padding-top: 14px; border-top: 2px solid #ccc;
}

.hint { font-size: 0.8rem; color: #777; }
.pw-field { display: flex; align-items: center; gap: 6px; }
.pw-field input { flex: 1; }
.pw-toggle { background: none; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; padding: 2px 8px; }
.flash-banner { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-weight: 600; }
.flash-banner.success { background: #e3f6e8; color: #1a7a4c; border: 1px solid #1a7a4c; }
.flash-banner.error { background: #fbe9e7; color: #a12727; border: 1px solid #a12727; }
.hint a { color: #4361ee; }

.account-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #eee; font-size: 0.9rem;
}
.account-row span { flex: 1; }
.account-row small { color: #888; }
button.danger { background: #c0392b; }
button.danger:hover { background: #a02f22; }
.add-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ddd; }

.rename-form { display: flex; align-items: center; gap: 6px; flex: 1; }
.rename-form input[type=text] {
  padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.85rem; width: 100%;
}
button.secondary { background: #eee; color: #333; }
button.secondary:hover { background: #ddd; }

.nav-user { color: #666; font-size: 0.85rem; }
.tag-chip { background: #fff7e6; color: #8a6300; border-color: #f0d68a; font-weight: 600; }
.tag-chip:hover { background: #fdf1d6; }
[data-theme="dark"] .tag-chip { background: #2e2a1c; color: #f0d68a; border-color: #5a4d2a; }

.auth-page {
  min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
  margin: -24px -32px; padding: 24px 32px;
}
[data-theme="dark"] .auth-page { background: linear-gradient(135deg, #1c1f26 0%, #0d0e12 100%); }
.auth-card {
  max-width: 380px; width: 100%; margin: 0; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25); border-radius: 16px;
}
.auth-logo { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; border: 2px solid #ddd; }
.auth-card form { text-align: left; }
.auth-field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #ccc; border-radius: 8px; padding: 0 12px; margin-bottom: 14px;
}
.auth-field-icon { font-size: 1.1rem; }
.auth-field input {
  border: none !important; padding: 10px 0 !important; margin: 0 !important;
  background: transparent !important; flex: 1;
}
.auth-field input:focus { outline: none; }
.auth-remember { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; font-size: 0.85rem; }
.auth-remember input { margin: 0; }
.totp-qr { display: block; width: 200px; height: 200px; margin: 10px 0; }

.theme-toggle { display: flex; align-items: center; gap: 8px; }

/* --- Modo oscuro ----------------------------------------------------- */
[data-theme="dark"] body { background: #15171c; color: #e8e8ea; }
[data-theme="dark"] .topnav { background: #1c1f26; border-bottom-color: #2a2e37; }
[data-theme="dark"] .topnav a, [data-theme="dark"] .nav-user { color: #e8e8ea; }
[data-theme="dark"] .card { background: #1c1f26; border-color: #2a2e37; }
[data-theme="dark"] form label { color: #aaa; }
[data-theme="dark"] form input[type=text], [data-theme="dark"] form input[type=url],
[data-theme="dark"] form input[type=file], [data-theme="dark"] form input[type=date],
[data-theme="dark"] form input[type=time], [data-theme="dark"] form textarea,
[data-theme="dark"] form input[type=datetime-local] {
  background: #12141a; border-color: #3a3f4a; color: #e8e8ea;
}
[data-theme="dark"] .chip { border-color: #3a3f4a; color: #e8e8ea; }
[data-theme="dark"] .group-chip { background: #1c1f26; color: #ddd; }
[data-theme="dark"] button.secondary { background: #2a2e37; color: #ddd; }
[data-theme="dark"] button.secondary:hover { background: #353a45; }
[data-theme="dark"] .calendar-header button, [data-theme="dark"] .view-mode-chip { background: #2a2e37; color: #ddd; }
[data-theme="dark"] .mini-picker { background: #20242c; border-color: #2a2e37; }
[data-theme="dark"] .mini-picker-hours { border-left-color: #2a2e37; }
[data-theme="dark"] .mini-hour-preset { background: #2a2e37; color: #fff; }
[data-theme="dark"] .mini-day { background: #1c1f26; border-color: #3a3f4a; color: #fff; }
[data-theme="dark"] .mini-picker-header span { color: #fff; }
[data-theme="dark"] .card h2, [data-theme="dark"] h1, [data-theme="dark"] .calendar-header h2 { color: #fff; font-weight: 700; }
[data-theme="dark"] .cal-day { background: #20242c; border-color: #2a2e37; }
[data-theme="dark"] .cal-day .num { color: #ccc; }
[data-theme="dark"] .cal-hour-scroll { border-color: #2a2e37; }
[data-theme="dark"] .cal-hour-table th { background: #1c1f26; color: #ccc; border-bottom-color: #2a2e37; }
[data-theme="dark"] .cal-hour-cell { border-color: #262a33; }
[data-theme="dark"] table, [data-theme="dark"] th, [data-theme="dark"] td { border-color: #2a2e37; }
[data-theme="dark"] .queue-date { background: #20242c; color: #bbb; }
[data-theme="dark"] .queue-section { background: #262a33; color: #ddd; border-top-color: #3a3f4a; }
[data-theme="dark"] .hint { color: #999; }
[data-theme="dark"] .account-row { border-bottom-color: #2a2e37; }
[data-theme="dark"] .add-form { border-top-color: #3a3f4a; }
[data-theme="dark"] #clear-history-form input[type=date] { background: #12141a; border-color: #3a3f4a; color: #e8e8ea; }

/* --- Login (estilo oscuro, flotante, como la referencia) ------------- */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  margin: -24px -32px;
  padding: 48px 20px;
  background: radial-gradient(ellipse 120% 95% at 50% 28%, #4d4d4d 0%, #333333 22%, #1c1c1c 48%, #0b0b0b 72%, #000000 100%);
}
.login-box { width: 100%; max-width: 430px; }
.login-avatar {
  width: 158px; height: 158px; margin: 0 auto 34px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.55);
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.login-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.72); }

.login-form { display: flex; flex-direction: column; }
.login-field {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #ffffff;
  background: #ffffff;
  padding: 0 14px; height: 54px;
  margin: 0 0 16px;
  color: #333333; font-size: 0.85rem;
}
.login-field-icon { display: flex; flex: 0 0 auto; }
.login-field-icon svg { width: 20px; height: 20px; display: block; color: #6b7280; }
.login-field input[type=text], .login-field input[type=password] {
  flex: 1; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #1c1e21; font-size: 0.95rem; display: block;
}
.login-field input:focus { outline: none; }
.login-field input::placeholder { color: #8b909a; }

.login-remember {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 20px 2px; font-size: 0.85rem; color: rgba(255,255,255,0.8);
}
.login-remember input { margin: 0; }

.login-submit {
  width: 100%; padding: 15px;
  background: transparent; border: 1px solid rgba(255,255,255,0.5); border-radius: 0;
  color: #fff; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.login-submit:hover { background: rgba(255,255,255,0.12); }

.login-error { color: #ffb3b3; font-size: 0.85rem; text-align: center; margin: 0 0 14px; }
.login-hint { color: rgba(255,255,255,0.65); font-size: 0.82rem; text-align: center; margin: 0 0 18px; }

/* --- Nueva publicacion: formulario a la izquierda, vista previa a la derecha --- */
.post-layout { display: flex; gap: 26px; align-items: flex-start; }
.post-main { flex: 1 1 auto; min-width: 0; }
.post-side { flex: 0 0 330px; position: sticky; top: 18px; }
.side-title { margin: 0 0 10px; font-size: 1rem; }
.media-preview {
  border: 1px solid #e1e4e8; border-radius: 8px; padding: 10px; background: #fafafa;
  min-height: 200px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
}
.preview-video { width: 100%; max-height: 480px; border-radius: 6px; background: #000; display: block; }
.preview-images { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.preview-images img { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; }

@media (max-width: 1100px) {
  .post-layout { flex-direction: column; }
  .post-side { flex: 1 1 auto; width: 100%; position: static; }
}

[data-theme="dark"] .media-preview { background: #20242c; border-color: #2a2e37; }

/* --- Formato de la publicacion: Reel o Historia ---------------------- */
.placement-choices { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 4px; }
.placement-choice {
  flex: 0 1 auto; min-width: 250px; display: flex; align-items: flex-start; gap: 8px;
  border: 2px solid #e1e4e8; border-radius: 8px; padding: 6px 12px;
  cursor: pointer; margin: 0; background: #fff;
}
.placement-choice:hover { border-color: #b9c4ee; }
.placement-choice input { margin: 2px 0 0; }
.placement-choice-title { display: block; font-weight: 700; font-size: 0.82rem; color: #1c1e21; }
.placement-choice-desc { display: block; font-size: 0.7rem; color: #777; margin-top: 1px; line-height: 1.3; }
.placement-choice:has(input:checked) { border-color: #4361ee; background: #f4f6ff; }
[data-theme="dark"] .placement-choice { background: #1c1f26; border-color: #2a2e37; }
[data-theme="dark"] .placement-choice-title { color: #fff; }
[data-theme="dark"] .placement-choice-desc { color: #999; }
[data-theme="dark"] .placement-choice:has(input:checked) { border-color: #4361ee; background: #20242c; }


/* --- Aviso flotante (toast) con estilo propio ------------------------ */
.toast {
  position: fixed; right: 26px; bottom: 26px; z-index: 9999;
  display: flex; align-items: center; gap: 14px;
  min-width: 330px; max-width: 450px; padding: 16px 18px 16px 22px;
  border-radius: 16px; color: #fff; overflow: hidden;
  font-size: 0.92rem; font-weight: 500;
  box-shadow: 0 18px 46px rgba(18,20,45,0.34);
  opacity: 0; transform: translateY(26px) scale(0.96); pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.2,0.8,0.2,1), transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.toast::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: rgba(255,255,255,0.5);
}
.toast-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 800;
  background: rgba(255,255,255,0.22);
}
.toast-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toast-body strong { font-size: 0.97rem; font-weight: 800; letter-spacing: 0.01em; }
.toast-body span { opacity: 0.94; line-height: 1.35; }
.toast-close {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.16); border: 0; color: #fff;
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.toast-close:hover { background: rgba(255,255,255,0.32); }
.toast-ok    { background: linear-gradient(135deg, #12b76a 0%, #0891b2 100%); }
.toast-error { background: linear-gradient(135deg, #f04438 0%, #b42318 100%); }
.toast-info  { background: linear-gradient(135deg, #4361ee 0%, #7b3fe4 100%); }

/* --- Ventana de confirmacion propia (en vez del aviso del navegador) --- */
.modal-back {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(16,18,30,0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; transition: opacity 0.22s ease;
}
.modal-back.show { opacity: 1; }
.modal-box {
  width: 100%; max-width: 430px;
  background: #fff; border-radius: 20px; padding: 30px 28px 24px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(15,18,40,0.4);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.24s cubic-bezier(0.2,0.8,0.2,1);
}
.modal-back.show .modal-box { transform: translateY(0) scale(1); }
.modal-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem; color: #fff;
  background: linear-gradient(135deg, #4361ee 0%, #7b3fe4 100%);
  box-shadow: 0 12px 28px rgba(67,97,238,0.42);
}
.modal-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; color: #1c1e21; }
.modal-text { margin: 0 0 24px; font-size: 0.93rem; color: #5b6270; line-height: 1.55; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.modal-actions button { padding: 12px 24px; font-weight: 700; border-radius: 11px; }
.modal-yes { background: linear-gradient(135deg, #4361ee 0%, #7b3fe4 100%); }
.modal-yes:hover { filter: brightness(1.1); }
[data-theme="dark"] .modal-box { background: #1c1f26; }
[data-theme="dark"] .modal-title { color: #fff; }
[data-theme="dark"] .modal-text { color: #aab0bb; }

/* --- Error del formulario: justo debajo de Programar / Publicar ahora - */
.form-error {
  display: none; margin-top: 16px; padding: 13px 16px;
  background: #fff1f0; border: 1px solid #ffcdc7; border-left: 5px solid #f04438;
  border-radius: 11px;
  color: #a4231a; font-size: 0.9rem; font-weight: 600; line-height: 1.45;
}
.form-error.show { display: block; animation: errorIn 0.3s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes errorIn {
  from { transform: translateY(-7px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
[data-theme="dark"] .form-error { background: #2b1a19; border-color: #5e2b26; color: #ffb4ab; }

/* --- Mas color: fondo, tarjetas, botones y chips por red -------------- */
body { background: linear-gradient(180deg, #f6f7fc 0%, #edf0f9 100%); }
.topnav { background: linear-gradient(90deg, #ffffff 0%, #f6f8ff 100%); }
.topnav .brand {
  background: linear-gradient(135deg, #4361ee 0%, #7b3fe4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; font-size: 1.15rem;
}
.topnav a:hover { color: #4361ee; }

.card {
  position: relative; border-radius: 14px; border-color: #e6e9f3;
  box-shadow: 0 3px 14px rgba(25,30,60,0.06);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(90deg, #4361ee 0%, #7b3fe4 55%, #06b6d4 100%);
  opacity: 0.85;
}
.card > h2::after {
  content: ""; display: block; width: 48px; height: 3px; margin-top: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4361ee, #7b3fe4);
}

button { background: linear-gradient(135deg, #4361ee 0%, #6b3fe0 100%); border-radius: 9px; }
button:hover { filter: brightness(1.09); }
button.secondary { background: #edf0f8; color: #3a3f47; }
button.secondary:hover { background: #e1e6f4; filter: none; }
button.danger { background: linear-gradient(135deg, #ef4444 0%, #b42318 100%); }
button.danger:hover { filter: brightness(1.09); }

/* chips de cuenta con el color de cada red */
label.chip:has(input[data-platform="youtube"])   { border-color: #ffcac4; background: #fff5f4; }
label.chip:has(input[data-platform="facebook"])  { border-color: #c6d8fb; background: #f3f7ff; }
label.chip:has(input[data-platform="instagram"]) { border-color: #f5c9e1; background: #fff5fa; }
label.chip:has(input[data-platform="tiktok"])    { border-color: #ccd2dc; background: #f6f8fb; }
label.chip:has(input:checked) { box-shadow: 0 0 0 2px rgba(67,97,238,0.3); font-weight: 700; }

[data-theme="dark"] body { background: linear-gradient(180deg, #15171c 0%, #12141a 100%); }
[data-theme="dark"] .card { box-shadow: 0 3px 14px rgba(0,0,0,0.3); }
[data-theme="dark"] label.chip:has(input[data-platform="youtube"])   { background: #2a1a19; border-color: #5e2b26; }
[data-theme="dark"] label.chip:has(input[data-platform="facebook"])  { background: #182236; border-color: #2b3f63; }
[data-theme="dark"] label.chip:has(input[data-platform="instagram"]) { background: #2a1a24; border-color: #5e2b47; }
[data-theme="dark"] label.chip:has(input[data-platform="tiktok"])    { background: #1e222b; border-color: #333a47; }


/* =====================================================================
   CELULAR Y TABLET PEQUENA
   Antes en el celular la letra salia muy pequena, el menu de arriba se
   salia de la pantalla y los botones/casillas eran dificiles de tocar.
   Reglas: nada por debajo de 16px en los campos (si no, el navegador del
   celular hace zoom solo), areas de toque de 44px y todo en una columna.
   ===================================================================== */
@media (max-width: 760px) {
  main { padding: 0 12px; margin: 14px auto; }

  /* el menu ahora si baja de renglon en vez de salirse */
  .topnav {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 12px;
    font-size: 1rem;
  }
  .topnav .brand { font-size: 1.15rem; margin-right: 0; width: 100%; }
  .topnav a { padding: 6px 2px; }
  .topnav button { min-height: 0; padding: 7px 14px; font-size: 0.9rem; }

  .card { padding: 14px; border-radius: 12px; margin-bottom: 14px; }
  .card h2 { font-size: 1.3rem; }
  h1 { font-size: 1.55rem; }

  form label { font-size: 0.98rem; margin-bottom: 14px; }
  /* 16px exactos: con menos, el navegador del celular amplia solo al tocar el campo */
  form input[type=text], form input[type=url], form input[type=file],
  form textarea, form input[type=datetime-local], form input[type=number],
  form input[type=password], select {
    font-size: 16px;
    padding: 12px;
    min-height: 48px;
  }
  form textarea { min-height: 84px; }

  button { min-height: 44px; padding: 12px 18px; font-size: 1rem; }
  .btn-lg { width: 100%; font-size: 1.05rem; padding: 14px 18px; }

  /* casillas y grupos: mas grandes para el dedo */
  .chip {
    padding: 11px 16px;
    font-size: 0.98rem;
    min-height: 46px;
    border-radius: 23px;
  }
  .platforms { gap: 9px; }

  /* Reel / Historia: uno debajo del otro y a todo el ancho */
  .placement-choices { flex-direction: column; gap: 8px; }
  .placement-choice { min-width: 0; width: 100%; padding: 12px; }
  .placement-choice-title { font-size: 1rem; }
  .placement-choice-desc { font-size: 0.84rem; }
  .placement-choice input { width: 20px; height: 20px; }

  /* el calendario y las horas se apilan en vez de apretarse al lado */
  .mini-picker { flex-direction: column; gap: 12px; padding: 10px; }
  .mini-picker-cal, .mini-picker-hours { flex: 1 1 auto; width: 100%; }
  .mini-picker-hours { border-left: 0; border-top: 1px solid #e5e5e5; padding-left: 0; padding-top: 10px; }
  .mini-picker-header { font-size: 1rem; }
  .mini-picker-header button { min-height: 40px; padding: 6px 14px; font-size: 1rem; }
  .mini-picker-grid { gap: 4px; }
  .mini-day { min-height: 62px; padding: 6px 3px; }
  .mini-day-num { font-size: 1.2rem; }
  .mini-day-times { font-size: 0.68rem; }
  .mini-dow { font-size: 0.78rem; }
  .mini-hour-preset { min-height: 44px; padding: 10px 16px; font-size: 0.98rem; }
  #mini-picker-time { font-size: 16px; min-height: 56px; padding: 13px 12px; }

  .hint { font-size: 0.88rem; line-height: 1.4; }

  .post-side { width: 100%; }
  .preview-video { max-height: 320px; }

  /* el aviso flotante ocupa el ancho de la pantalla */
  .toast {
    left: 10px; right: 10px; bottom: 10px;
    min-width: 0; max-width: none; padding: 14px;
  }

  /* las tablas se pueden deslizar de lado en vez de apretarse */
  .table-scroll, main > .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 0.92rem; }
  th, td { padding: 10px 6px; white-space: nowrap; }
  #posts-table th:nth-child(5), #posts-table td:nth-child(5) { white-space: normal; min-width: 150px; }

  .calendar-grid.view-month { gap: 3px; }
  .mini-day, .cal-cell { font-size: 0.95rem; }
}

@media (max-width: 380px) {
  main { padding: 0 8px; }
  .topnav { gap: 8px 10px; font-size: 0.95rem; }
  .chip { font-size: 0.92rem; padding: 10px 13px; }
  .mini-day-num { font-size: 1.05rem; }
}


/* --- Login en celular: campos grandes para que no haga zoom solo ------ */
@media (max-width: 760px) {
  .auth-page { margin: -14px -12px; padding: 34px 16px; }
  .login-box { max-width: 100%; }
  .login-avatar { width: 132px; height: 132px; margin-bottom: 26px; }
  .login-field { height: 58px; margin-bottom: 14px; padding: 0 16px; }
  /* 16px: por debajo de esto el navegador del celular amplia solo al tocar el campo */
  .login-field input[type=text], .login-field input[type=password] { font-size: 16px; }
  .login-remember { font-size: 0.95rem; margin-bottom: 22px; }
  .login-submit { font-size: 1rem; padding: 17px; min-height: 56px; }
  .login-hint, .login-error { font-size: 0.9rem; }
  .auth-card { max-width: 100%; }
}


/* =====================================================================
   Barrita de progreso al programar publicaciones.
   Empieza roja, va subiendo (naranja, azul) y termina verde cuando el
   servidor ya guardo la programacion. Sin esto, en el celular el envio de
   un video grande no daba ninguna senal y parecia que "no pasaba nada".
   ===================================================================== */
.upload-progress { margin-top: 14px; }
.upload-progress-track {
  height: 12px; border-radius: 999px; background: #e6e8ee; overflow: hidden;
}
.upload-progress-bar {
  height: 100%; width: 0%; background: #f04438; border-radius: 999px;
  transition: width 0.25s ease, background 0.4s ease;
}
.upload-progress-bar.medio { background: #f79009; }
.upload-progress-bar.casi  { background: #2e90fa; }
.upload-progress-bar.listo { background: #12b76a; }
.upload-progress-text {
  margin: 7px 0 0; font-size: 0.85rem; color: #555; font-weight: 600;
}
[data-theme="dark"] .upload-progress-track { background: #2a2e37; }
[data-theme="dark"] .upload-progress-text { color: #bbb; }

@media (max-width: 760px) {
  .upload-progress { margin-top: 16px; }
  .upload-progress-track { height: 16px; }
  .upload-progress-text { font-size: 0.95rem; }
}


/* =====================================================================
   Caratula / miniatura dentro de la VISTA PREVIA (columna derecha).
   Antes vivia en el formulario, en una seccion aparte; se movio aqui para
   elegir el cuadro mirando el video. Los campos ocultos que guardan la
   eleccion siguen dentro del formulario.
   ===================================================================== */
.thumb-panel { margin-top: 16px; }
.thumb-panel .side-title { margin: 0 0 8px; }
.thumb-scrub-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.thumb-scrub-datos .hint { margin: 0; line-height: 1.35; }
#thumb-scrub { width: 100%; margin: 10px 0 12px; height: 26px; }
#thumb-scrub-preview { width: 86px; height: 86px; flex: 0 0 auto; object-fit: cover; }
.post-side .thumb-choices { margin: 0; gap: 6px; }
.post-side .thumb-choices img.thumb-choice { width: 58px; height: 58px; }
.thumb-scrub-row { display: flex; align-items: center; gap: 12px; margin: 4px 0; }


/* --- Boton de miniatura y campo de subir (columna derecha) ------------- */
.usar-cuadro {
  width: 100%; margin: 10px 0 12px;
  font-weight: 700; font-size: 0.95rem; min-height: 44px;
}
.enlace-miniatura {
  display: inline-block; margin-top: 12px;
  color: #4361ee; font-weight: 600; font-size: 0.9rem;
  text-decoration: underline; cursor: pointer;
}
.enlace-miniatura:hover { color: #2b46c9; }
[data-theme="dark"] .enlace-miniatura { color: #8fa8ff; }

/* Campo de archivo real: vive oculto DENTRO del formulario para que el archivo
   viaje con la publicacion; se abre desde el enlace del panel. No usar
   display:none -- algunos navegadores no abren el dialogo desde una etiqueta
   que apunta a un campo que no se dibuja. */
.solo-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* --- Aviso de que se esta editando una publicacion ---------------------- */
.edit-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  background: #fff7e6; border: 1px solid #f0d68a; border-left: 5px solid #f79009;
  border-radius: 8px; padding: 12px 14px; margin-bottom: 18px;
  font-size: 0.92rem; color: #7a4d00; font-weight: 600;
}
.edit-banner button { flex: 0 0 auto; }
[data-theme="dark"] .edit-banner { background: #2e2a1c; border-color: #5a4d2a; color: #f0d68a; }
@media (max-width: 760px) {
  .edit-banner { flex-direction: column; align-items: stretch; }
  .edit-banner button { width: 100%; }
}


/* =====================================================================
   REDISENO VISUAL  (2026-10-03)
   ---------------------------------------------------------------------
   Esta capa va AL FINAL a proposito: repinta botones, colores y
   tipografia encima de lo que ya existia, aprovechando que a igual
   especificidad gana la ultima regla. Asi NO se pierde ninguna regla
   anterior (auth-page, pw-field, totp-qr, etc. siguen intactas).

   REGLA DE ORO: aqui solo se cambia el ASPECTO. Nunca el significado de
   las clases que el JavaScript marca o lee: active, busy, drag-over,
   many, past, selected, show, today. Si se cambia su comportamiento,
   el calendario y los grupos dejan de funcionar.
   ===================================================================== */

:root {
  --ui-accent: #4f46e5;
  --ui-accent-2: #7c3aed;
  --ui-accent-soft: #eef1ff;
  --ui-ink: #15171e;
  --ui-ink-soft: #5a6273;
  --ui-ink-faint: #8b93a4;
  --ui-line: #e6e8f1;
  --ui-line-soft: #eef0f7;
  --ui-surface: #ffffff;
  --ui-page: #f4f5fb;
  --ui-shadow-sm: 0 1px 2px rgba(23, 25, 60, 0.06);
  --ui-shadow: 0 5px 18px rgba(23, 25, 60, 0.08);
  --ui-shadow-lg: 0 18px 44px rgba(23, 25, 60, 0.14);
  --ui-ring: 0 0 0 4px rgba(79, 70, 229, 0.16);
  --ui-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --ui-r: 12px;
}
[data-theme="dark"] {
  --ui-accent: #8b93ff;
  --ui-accent-2: #b39dff;
  --ui-accent-soft: #221f3f;
  --ui-ink: #eef1f8;
  --ui-ink-soft: #9aa3b6;
  --ui-ink-faint: #6b7488;
  --ui-line: #262b39;
  --ui-line-soft: #1e222d;
  --ui-surface: #171b24;
  --ui-page: #0d0f16;
  --ui-shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --ui-shadow: 0 5px 18px rgba(0,0,0,0.45);
  --ui-shadow-lg: 0 18px 44px rgba(0,0,0,0.6);
  --ui-ring: 0 0 0 4px rgba(139, 147, 255, 0.25);
  --ui-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* --- Fondo de la pagina: un halo de color muy suave arriba ------------ */
body {
  color: var(--ui-ink);
  background:
    radial-gradient(1100px 520px at 12% -12%, #eaeeff 0%, rgba(234,238,255,0) 62%),
    radial-gradient(900px 480px at 92% 4%, #f6ecff 0%, rgba(246,236,255,0) 58%),
    var(--ui-page);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 12% -12%, #1b1e36 0%, rgba(27,30,54,0) 62%),
    radial-gradient(900px 480px at 92% 4%, #241d38 0%, rgba(36,29,56,0) 58%),
    var(--ui-page);
}

::selection { background: rgba(124, 58, 237, 0.22); }

/* --- Barra de arriba: flotante y translucida -------------------------- */
.topnav {
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--ui-line);
  padding: 14px 30px;
  gap: 6px;
  box-shadow: 0 1px 0 rgba(23,25,60,0.03), 0 8px 24px rgba(23,25,60,0.05);
}
.topnav .brand {
  font-size: 1.24rem;
  letter-spacing: -0.025em;
  background: var(--ui-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topnav a {
  color: var(--ui-ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .18s ease, background .18s ease;
}
.topnav a:hover { color: var(--ui-accent); background: var(--ui-accent-soft); }
.nav-user { color: var(--ui-ink-soft); font-size: 0.85rem; font-weight: 600; }
[data-theme="dark"] .topnav { background: rgba(23,27,36,0.85); }

/* --- Tarjetas: mas aire, esquinas suaves y una linea de color arriba -- */
.card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: var(--ui-shadow);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card::before {
  height: 3px;
  background: var(--ui-grad);
  opacity: 1;
  border-radius: 18px 18px 0 0;
}
.card:hover { box-shadow: var(--ui-shadow-lg); transform: translateY(-2px); }
.card h2 { font-size: 1.22rem; letter-spacing: -0.01em; color: var(--ui-ink); }
.card h2::after { height: 4px; width: 42px; border-radius: 999px; background: var(--ui-grad); }
h1 { letter-spacing: -0.025em; color: var(--ui-ink); }

/* --- Formularios: campos mas comodos y con anillo al enfocar ---------- */
form label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-ink-soft);
  margin-bottom: 16px;
}
form input[type=text], form input[type=url], form input[type=file],
form textarea, form input[type=datetime-local], form input[type=time],
form input[type=number], form input[type=password], select {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r);
  padding: 12px 14px;
  font-size: 0.98rem;
  color: var(--ui-ink);
  background: var(--ui-surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
form input:focus, form textarea:focus, select:focus,
#mini-picker-time:focus, .login-field:focus-within {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-ring);
  outline: none;
}
form input::placeholder, form textarea::placeholder { color: var(--ui-ink-faint); }
.hint { color: var(--ui-ink-faint); font-size: 0.82rem; line-height: 1.5; }
.hint a { color: var(--ui-accent); font-weight: 600; }

/* --- Botones: degradado, elevacion al pasar y anillo al enfocar ------- */
button {
  background: var(--ui-grad);
  border-radius: var(--ui-r);
  padding: 11px 22px;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 12px rgba(79, 70, 229, 0.28);
  transition: transform .16s ease, box-shadow .2s ease, filter .16s ease, background .2s ease;
}
button:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(79, 70, 229, 0.34); filter: none; }
button:active { transform: translateY(0) scale(.985); }
button:focus-visible { outline: none; box-shadow: var(--ui-ring), 0 8px 22px rgba(79,70,229,0.3); }
button:disabled { opacity: .45; transform: none; box-shadow: none; }

button.secondary {
  background: var(--ui-surface);
  color: var(--ui-ink-soft);
  border: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow-sm);
}
button.secondary:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow);
  transform: translateY(-2px);
}
button.danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.3);
}
button.danger:hover { box-shadow: 0 10px 26px rgba(220, 38, 38, 0.38); }
.btn-lg {
  font-size: 1.04rem;
  padding: 14px 34px;
  border-radius: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.34);
}
[data-theme="dark"] button.secondary { background: #1e2230; color: var(--ui-ink); border-color: var(--ui-line); }

/* --- Casillas de red: pastilla con el color de cada red --------------- */
.platforms { gap: 9px; }
.chip {
  border-width: 2px;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow); }
label.chip:has(input:checked) {
  box-shadow: 0 0 0 3px var(--ui-ring), var(--ui-shadow-sm);
  transform: translateY(-1px);
}
.group-chip { border-color: var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); }
.group-chip.active {
  background: var(--ui-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.36);
}
.tag-chip { background: #fffaf0; border-color: #f4d9a0; color: #9a6206; }
.tag-chip:hover { background: #fdf3df; border-color: #e8bf72; }
[data-theme="dark"] .tag-chip { background: #2e2718; border-color: #4d3f22; color: #f0c56a; }

/* --- Reel / Historia -------------------------------------------------- */
.placement-choice {
  border-radius: 14px;
  padding: 12px 16px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.placement-choice:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow); }
.placement-choice:has(input:checked) {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  box-shadow: var(--ui-ring);
}
.placement-choice-title { color: var(--ui-ink); }

/* --- Calendario pequeno ------------------------------------------------ */
.mini-picker {
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
  padding: 16px;
}
.mini-day {
  border-radius: 10px;
  border-color: var(--ui-line);
  background: var(--ui-surface);
  transition: transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mini-day:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--ui-shadow-sm); }
.mini-day.selected { background: var(--ui-accent-soft); border-color: var(--ui-accent); box-shadow: var(--ui-ring); }
.mini-day.today { border-color: var(--ui-accent); }
.mini-day.busy { border-color: #8fd8b0; background: #f2fdf7; }
.mini-day-num { color: var(--ui-ink); }
.mini-time-chip { background: #dcf7e8; color: #12805a; border-radius: 4px; }
[data-theme="dark"] .mini-day.busy { background: #12241c; border-color: #2f6b4c; }
[data-theme="dark"] .mini-time-chip { background: #16352a; color: #74dfa9; }
.mini-hour-preset {
  border-radius: 999px;
  font-weight: 700;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  color: var(--ui-ink-soft);
}
.mini-hour-preset:hover { background: var(--ui-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(79,70,229,0.3); }
.mini-picker-header span { color: var(--ui-ink); font-weight: 800; }
.mini-picker-header button { border-radius: 10px; font-weight: 800; }
#mini-picker-time { border-radius: var(--ui-r); font-weight: 700; }

/* --- Calendario grande ------------------------------------------------- */
.cal-day {
  border-radius: 14px;
  border-color: var(--ui-line);
  background: var(--ui-surface);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cal-day:hover:not(.empty):not(.past) { border-color: var(--ui-accent); box-shadow: var(--ui-shadow); }
.cal-day .num { color: var(--ui-ink-faint); font-weight: 800; }
.cal-day.today { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent) inset; }
.cal-day .badge { border-radius: 999px; padding: 5px 10px; font-weight: 700; }
.cal-day .badge.done { background: #dcf7e8; color: #12805a; }
.cal-day .badge.error { background: #fde4e4; color: #b42318; }
.cal-day .badge.pending { background: #fdf0d6; color: #96610b; }
.cal-day .badge.cancelled { background: #eef0f5; color: var(--ui-ink-faint); }
.cal-day .badge { background: var(--ui-accent-soft); color: var(--ui-accent); }
.pill-thumb { border-radius: 8px; }
[data-theme="dark"] .cal-day .badge.done { background: #143227; color: #7fe0b2; }
[data-theme="dark"] .cal-day .badge.pending { background: #362b13; color: #f5c169; }
[data-theme="dark"] .cal-day .badge.error { background: #3a1a1a; color: #f8a5a5; }
.cal-hour-scroll { border-radius: 14px; }
.cal-hour-cell { border-color: var(--ui-line-soft); }
.cal-hour-cell .group-pill { border-radius: 8px; font-weight: 700; }

/* --- Vista previa y caratula ------------------------------------------ */
.media-preview {
  border: 2px dashed var(--ui-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfbff 0%, var(--ui-page) 100%);
  transition: border-color .2s ease, background .2s ease;
}
.media-preview:hover { border-color: var(--ui-accent); }

/* El reproductor toma la FORMA REAL del video.
   Antes forzaba width:100%: como los videos del dueno son verticales
   (1080x1920), el reproductor quedaba mas ancho que el video y aparecian
   franjas negras a los lados y se veia chico. Con width/height auto +
   max-width/max-height, el elemento sale justo con la proporcion del video
   y NO queda ninguna franja. Ojo: esta regla va despues de la de celular,
   asi que tambien manda ahi. */
.preview-video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70vh, 620px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
  box-shadow: var(--ui-shadow);
}
.preview-images img, #thumb-scrub-preview, .thumb-choices img.thumb-choice { border-radius: 12px; }
.thumb-choices img.thumb-choice:hover { transform: translateY(-2px) scale(1.02); }
[data-theme="dark"] .media-preview { background: #141821; }
#thumb-scrub-tiempo { color: var(--ui-accent); font-weight: 700; }

/* --- Tabla de la cola -------------------------------------------------- */
th { color: var(--ui-ink-faint); font-weight: 800; letter-spacing: 0.07em; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
td { border-bottom: 1px solid var(--ui-line-soft); }
tbody tr { transition: background .15s ease; }
tbody tr:hover td { background: var(--ui-accent-soft); }
.row-thumb { border-radius: 10px; box-shadow: var(--ui-shadow-sm); }
.queue-date { background: var(--ui-surface); color: var(--ui-ink-faint); font-weight: 800; }
.queue-section { background: var(--ui-surface); color: var(--ui-ink); border-top: 1px solid var(--ui-line); }
.status-pending { color: #b45309; }
.status-done { color: #047857; }
.status-error { color: #b42318; }
[data-theme="dark"] .status-pending { color: #f5c169; }
[data-theme="dark"] .status-done { color: #6ee7b7; }
[data-theme="dark"] .status-error { color: #fca5a5; }

/* --- Aviso flotante y ventana de confirmacion ------------------------- */
.toast { border-radius: 16px; box-shadow: var(--ui-shadow-lg); }
.toast-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); }
.toast-ok    { background: linear-gradient(135deg, #059669 0%, #0d9488 100%); }
.toast-error { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.toast-info  { background: var(--ui-grad); }
.modal-box { border-radius: 22px; box-shadow: var(--ui-shadow-lg); }
.modal-icon { background: var(--ui-grad); box-shadow: 0 16px 40px rgba(79,70,229,0.4); }
.modal-title { color: var(--ui-ink); letter-spacing: -0.01em; }
.modal-text { color: var(--ui-ink-soft); }

/* --- Avisos (banner de edicion, error del formulario, flash) ---------- */
.edit-banner {
  border-radius: 14px;
  background: #fffaf0;
  border: 1px solid #f4d9a0;
  border-left: 5px solid #f59e0b;
  color: #8a5306;
}
.edit-banner button { border-radius: 10px; }
[data-theme="dark"] .edit-banner { background: #2c2416; border-color: #4d3f22; border-left-color: #f59e0b; color: #f3cd8a; }
.form-error { border-radius: 14px; }
.flash-banner { border-radius: 14px; box-shadow: var(--ui-shadow-sm); }

/* --- Cuentas y demas pantallas ---------------------------------------- */
.account-row { border-bottom: 1px solid var(--ui-line-soft); padding: 14px 0; }
.account-row:hover { background: var(--ui-accent-soft); }
.rename-form input[type=text] { border-radius: 10px; border-color: var(--ui-line); }
.add-form { border-top: 1px dashed var(--ui-line); }

/* --- Login: fondo profundo, campos de cristal ------------------------- */
.login-page, .auth-page {
  background:
    radial-gradient(760px 460px at 50% 12%, rgba(124,58,237,0.30) 0%, rgba(124,58,237,0) 62%),
    radial-gradient(700px 500px at 80% 90%, rgba(37,99,235,0.26) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(160deg, #171331 0%, #0b0916 55%, #050409 100%);
}
.login-avatar {
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 8px rgba(255,255,255,0.04);
}
.login-field {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  border-radius: 14px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-field:hover { border-color: rgba(255,255,255,0.26); background: rgba(255,255,255,0.1); }
.login-field:focus-within {
  border-color: rgba(167,139,250,0.9);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.28);
}
.login-submit {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  background: linear-gradient(135deg, rgba(124,58,237,0.85) 0%, rgba(37,99,235,0.85) 100%);
  font-weight: 800;
  letter-spacing: 0.14em;
  box-shadow: 0 14px 34px rgba(76,29,149,0.5);
}
.login-submit:hover { transform: translateY(-2px); filter: brightness(1.08); background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); }
.auth-card { border-radius: 22px; }

/* --- Barrita de progreso --------------------------------------------- */
.upload-progress-track { height: 12px; border-radius: 999px; background: var(--ui-line); }
.upload-progress-bar { border-radius: 999px; }
.upload-progress-text { color: var(--ui-ink-soft); font-weight: 700; }

/* --- Ajustes finos en celular (despues de todo, para que mande) ------- */
@media (max-width: 760px) {
  .topnav { padding: 12px 16px; }
  .card { padding: 20px; border-radius: 16px; }
  .card:hover { transform: none; }
  button { min-height: 48px; }
  .chip { min-height: 48px; }
  .mini-day { min-height: 62px; }
  .edit-banner { border-radius: 12px; }
  .toast { border-radius: 14px; }
  .modal-box { border-radius: 18px; }

  /* 16px EXACTOS en los campos. Esta capa va despues de la regla de celular
     de mas arriba, asi que sin esto la pisa (quedaba en 15,68px y el navegador
     del celular amplia solo al tocar el campo). */
  form input[type=text], form input[type=url], form input[type=file],
  form textarea, form input[type=datetime-local], form input[type=time],
  form input[type=number], form input[type=password], select,
  #mini-picker-time, .login-field input[type=text], .login-field input[type=password] {
    font-size: 16px;
  }

  /* Dedo en celular: los enlaces y botones de la barra y las flechas del
     calendario quedaban por debajo de 44px (se falla el toque). */
  .topnav button, .topnav a { min-height: 44px; display: inline-flex; align-items: center; }
  .mini-picker-header button, .calendar-header button { min-width: 44px; min-height: 44px; }
}

/* ===================================================================== */
/* LOGIN: el texto se ve y va mas grande (2026-10-05)                    */
/* ===================================================================== */
/* El rediseno volvio oscuros los campos, pero el color de lo que uno    */
/* escribe siguio siendo el oscuro original (#1c1e21) -- al escribir no  */
/* se veia nada. Aqui se fija el color claro. Y como la pantalla tiene   */
/* buen espacio de sobra, la letra sube de tamano.                       */
.login-field input[type=text],
.login-field input[type=password] {
  color: #ffffff;
  font-size: 1.15rem;
  caret-color: #a78bfa;
}
.login-field input::placeholder {
  color: rgba(255,255,255,0.55);
  font-size: 1.15rem;
}
/* Al autocompletar, Chrome pinta el campo de claro por su cuenta y el texto
   claro quedaria invisible: hay que devolverle el fondo oscuro. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 100px #2a2547 inset;
  caret-color: #ffffff;
}
.login-field { height: 60px; }
.login-field-icon svg { width: 22px; height: 22px; }
.login-remember { font-size: 1rem; }
.login-submit { font-size: 1.05rem; padding: 17px; }
.login-error { font-size: 0.98rem; }
.login-hint { font-size: 0.95rem; }

/* Las pantallas del codigo 2FA: mismo tamano de letra. El color se deja
   heredado a proposito (ahi la tarjeta es blanca y el texto oscuro). */
.auth-field input { color: inherit; font-size: 1.15rem; }
.auth-remember { font-size: 1rem; }

/* --- Cuadritos plegables "Configuracion de <red>" (estilo Metricool) --- */
.platform-config {
  border: 1px solid var(--ui-line);
  border-left: 4px solid var(--ui-line);
  border-radius: 14px;
  margin: 0 0 14px;
  background: var(--ui-accent-soft);
  overflow: hidden;
}
.platform-config-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.98rem;
  list-style: none;
}
.platform-config-head::-webkit-details-marker { display: none; }
.platform-config-head::after {
  content: "▾";
  margin-left: auto;
  color: var(--ui-ink-faint);
  transition: transform 0.15s;
}
.platform-config[open] .platform-config-head::after { transform: rotate(180deg); }
.platform-config-icon { width: 18px; height: 18px; display: block; }
.platform-config-body { padding: 0 16px 14px; }
.chip-logo { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.platform-logo { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
#ig-options { border-left-color: #f5c9e1; }
#fb-options { border-left-color: #c6d8fb; }
#tiktok-box { border-left-color: #ccd2dc; }

/* --- TikTok: bloque de opciones que exige su revision (2026-10-05) ----- */
.tiktok-box .chip { margin: 0 6px 8px 0; }
.tiktok-box .chip.apagado { opacity: 0.45; }
.tiktok-box select { margin-top: 6px; width: 100%; }
.tiktok-box #tt-commercial-options { margin-top: 8px; }