/* Formularios genéricos */
.form-row .field-error { color: var(--color-danger); font-size:var(--font-size-xs); margin-top:.25rem; }
.form-row input:invalid, .form-row select:invalid, .form-row textarea:invalid { outline-color: var(--color-danger); }

/* Form actions: right-aligned row of action buttons at the bottom of a form.
   Optional .form-meta sits on the left (created_at/updated_at/audit info).
   Replaces the duplicated definitions that used to live in
   pages/content_asset_form.css and pages/commercial_campaign_form.css. */
.form-actions {
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  margin-top:1.25rem;
}
.form-actions-btns { display:inline-flex; gap:.5rem; }
.form-meta {
  display:flex;
  flex-direction:row;
  gap:.6rem;
  color:var(--color-muted);
  margin-right:auto;
  font-size:var(--font-size-sm);
  align-items:center;
}
.form-meta strong { color:var(--color-text); font-weight:600; }

/* Inline help text under a form control */
.form-inline-help {
  font-size:var(--font-size-sm);
  color:var(--color-muted);
  line-height:1.3;
  max-width:280px;
  margin-top:.25rem;
}

/* Compact alert stack used at the top of forms (form-level error summary) */
.alert-stack { margin-bottom:1rem; display:flex; flex-direction:column; gap:.5rem; }

@media (max-width:720px) {
  .form-actions { flex-direction:column-reverse; gap:.6rem; }
  .form-meta { flex-direction:row; gap:.75rem; margin-right:0; justify-content:space-between; }
  .form-actions-btns { width:100%; justify-content:space-between; }
}
@media (max-width:480px) {
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
  /* Stack the action buttons vertically so they don't overflow horizontally
     when each .btn becomes 100% wide. Without this, two full-width buttons
     in .form-actions-btns stay side-by-side and cause horizontal scroll. */
  .form-actions-btns {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

/* Rounded warning chip */
.warning-rounded { display:flex; align-items:center; gap:.5rem; color: var(--clr-dark-a0); background: var(--clr-warning-a20); border-left:4px solid var(--clr-warning-a10); border-radius: 999px; padding:.4rem .75rem; font-size:var(--font-size-sm); }
.warning-rounded .icon { color: var(--clr-warning-a0); }

/* Reglas de inputs y selects avanzadas movidas a `components/input.css` */
/* Mantén las reglas core de formularios aquí; la implementación de inputs/autofill/is-chrome/time-split/select.ui-list se centraliza en input.css */

/* ==================================================
	 Shared rules for channel multi-select + "pills"
	 These are used by both Campaign and Spot forms and
	 replace duplicated definitions in page-specific CSS.
	 Keep generic selectors so they apply within any form.
	 ================================================== */
.form-channels { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.form-channels .form-channels-help { font-size:var(--font-size-sm); color:var(--color-muted); max-width:280px; line-height:1.3; }
.form-channels .selected-channels { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:.35rem; }
.form-channels .selected-channel-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .5rem; font-size:.82rem; border-radius:999px; background: color-mix(in srgb, var(--ui-card-featured-bg) 85%, var(--color-bg) 15%); border:1px solid var(--border-color); color:var(--color-text); }
.form-channels .selected-channel-pill .remove { cursor:pointer; opacity:.8; padding-left:.25rem; font-size:.85rem; }
.form-channels > select[multiple] { flex: 0 0 240px; width:240px; box-sizing:border-box; order:1; }
.form-channels .form-channels-help { order:2; flex:1 1 auto; align-self:flex-start; margin-top:0.2rem; }
.form-channels .selected-channels { order:3; width:100%; margin-top:.5rem; display:flex; gap:.4rem; flex-wrap:wrap; }
@media (max-width:720px) {
	.form-channels { flex-direction:column; }
	.form-channels > select[multiple] { width:100%; flex:unset; min-width:unset; }
	.form-channels .selected-channels { width:100%; flex:unset; }
}

/* Estilo consistente para opciones seleccionadas (en ambos temas)
   - Texto en color primario (mejor contraste en modo claro)
   - Fondo con mezcla suave para evitar el azul nativo del sistema
*/
.form-channels > select[multiple] option:checked,
.form-channels > select[multiple]:focus option:checked,
.form-channels > select[multiple]:active option:checked,
.form-channels > select[multiple]:focus-visible option:checked {
	color: var(--color-primary) !important;
	background: color-mix(in srgb, var(--color-primary) 14%, var(--ui-combo-bg)) !important;
}

/* Opciones deshabilitadas */
.form-channels > select[multiple] option:checked:disabled {
	color: var(--color-muted) !important;
	background: color-mix(in srgb, var(--color-muted) 12%, var(--ui-combo-bg)) !important;
}

/* Inline field layout: label and control on same row */
.field.inline {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.field.inline label { flex:0 0 160px; text-align:right; margin:0; }
.field.inline .control { flex:1; }
.field.inline .control .ui-input, .field.inline .control input[type='time'] { width:100%; }
.field.inline .control textarea { width:100%; }

/* Non-interactive switch styling inside tables/lists */
.ui-switch[aria-hidden='true'] { cursor:default; opacity:0.95; }