/* ==========================================================================
   MediaFirme · tema de color
   --------------------------------------------------------------------------
   Traduccion de la paleta daisyUI "light" (slate + primary negro + accent teal)
   a las custom properties de MediaCMS.

   COMO FUNCIONA
   MediaCMS tematiza todo con CSS custom properties declaradas en
   static/css/_commons.css sobre `body` (claro) y `body.dark_theme` (oscuro).
   Este archivo se carga DESPUES via EXTRA_CSS_PATHS (cms/settings.py), asi que
   gana por orden de cascada sin tocar una sola linea del CSS original.

   No requiere recompilar el frontend React ni editar _commons.css.

   COMO REVERTIR
   Vaciar EXTRA_CSS_PATHS en cms/settings.py y reiniciar el contenedor web.

   NOTA DE ESPECIFICIDAD
   `body.dark_theme` pesa mas que `body`. Por eso cada variable se declara en
   AMBOS bloques: si una solo se pusiera en `body`, el modo oscuro seguiria
   usando el valor original de MediaCMS.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS · modo claro
   ========================================================================== */

body {
  /* --- paleta daisyUI, literal ------------------------------------------ */
  --mf-base-100: oklch(98% 0.003 247.858);   /* superficies elevadas */
  --mf-base-200: oklch(96% 0.007 247.896);   /* fondo de pagina, sidebar */
  --mf-base-300: oklch(92% 0.013 255.508);   /* bordes, hovers, placeholders */
  --mf-base-content: oklch(20% 0.042 265.755);

  --mf-primary: oklch(0% 0 0);
  --mf-primary-content: oklch(100% 0 0);

  --mf-secondary: oklch(87% 0 0);
  --mf-secondary-content: oklch(14% 0 0);

  --mf-accent: oklch(85% 0.138 181.071);
  --mf-accent-content: oklch(27% 0.046 192.524);

  --mf-neutral: oklch(12% 0.042 264.695);
  --mf-neutral-content: oklch(98% 0.003 247.858);

  --mf-info: oklch(71% 0.143 215.221);
  --mf-success: oklch(72% 0.219 149.579);
  --mf-warning: oklch(70% 0.213 47.604);
  --mf-error: oklch(64% 0.246 16.439);

  /* --- niveles de texto derivados de base-content ----------------------- */
  --mf-c-88: oklch(20% 0.042 265.755 / 0.88);
  --mf-c-74: oklch(20% 0.042 265.755 / 0.74);
  --mf-c-60: oklch(20% 0.042 265.755 / 0.60);
  --mf-c-50: oklch(20% 0.042 265.755 / 0.50);
  --mf-c-40: oklch(20% 0.042 265.755 / 0.40);
  --mf-c-32: oklch(20% 0.042 265.755 / 0.32);

  /* --- velos translucidos sobre el fondo -------------------------------- */
  --mf-ov-04: oklch(20% 0.042 265.755 / 0.04);
  --mf-ov-07: oklch(20% 0.042 265.755 / 0.07);
  --mf-ov-10: oklch(20% 0.042 265.755 / 0.10);
  --mf-ov-14: oklch(20% 0.042 265.755 / 0.14);

  /* --- tintes suaves para estados (los usa la pagina de subida) --------- */
  --mf-theme-soft: var(--mf-ov-07);
  --mf-success-soft: oklch(72% 0.219 149.579 / 0.12);
  --mf-warning-soft: oklch(70% 0.213 47.604 / 0.12);
  --mf-error-soft: oklch(64% 0.246 16.439 / 0.12);

  /* ----------------------------------------------------------------------
     EL UNICO INTERRUPTOR QUE SUELE QUERERSE MOVER
     --mf-theme  → color de marca: rellenos de boton, iconos activos, barras
                   de progreso, "me gusta". La paleta dice primary = negro.
                   Cambiar a var(--mf-accent-content) para un portal teal.
     --mf-link   → enlaces dentro de texto corrido. Se separa a proposito:
                   con negro puro un enlace es indistinguible del parrafo,
                   asi que usa el teal oscuro de la paleta (contraste ~11:1).
     ---------------------------------------------------------------------- */
  --mf-theme: var(--mf-primary);
  --mf-link: var(--mf-accent-content);
}


/* ==========================================================================
   2. TOKENS · modo oscuro
   --------------------------------------------------------------------------
   La paleta que se pidio solo define "light". Este bloque es la contraparte
   derivada: mismo tono slate (hue ~265), primary invertido a blanco para que
   los rellenos sigan contrastando, y el accent teal claro para enlaces.
   ========================================================================== */

body.dark_theme {
  --mf-base-100: oklch(21% 0.028 265.755);   /* superficies elevadas */
  --mf-base-150: oklch(18.5% 0.028 265.755); /* sidebar */
  --mf-base-200: oklch(16% 0.026 265.755);   /* fondo de pagina */
  --mf-base-300: oklch(28% 0.032 265.755);   /* bordes, hovers */
  --mf-base-content: oklch(96% 0.005 247.858);

  --mf-primary: oklch(100% 0 0);
  --mf-primary-content: oklch(0% 0 0);

  --mf-secondary: oklch(32% 0.02 265.755);
  --mf-secondary-content: oklch(96% 0.005 247.858);

  --mf-accent: oklch(85% 0.138 181.071);
  --mf-accent-content: oklch(27% 0.046 192.524);

  --mf-neutral: oklch(12% 0.042 264.695);
  --mf-neutral-content: oklch(98% 0.003 247.858);

  --mf-info: oklch(71% 0.143 215.221);
  --mf-success: oklch(72% 0.219 149.579);
  --mf-warning: oklch(70% 0.213 47.604);
  --mf-error: oklch(64% 0.246 16.439);

  --mf-c-88: oklch(96% 0.005 247.858 / 0.88);
  --mf-c-74: oklch(96% 0.005 247.858 / 0.74);
  --mf-c-60: oklch(96% 0.005 247.858 / 0.60);
  --mf-c-50: oklch(96% 0.005 247.858 / 0.50);
  --mf-c-40: oklch(96% 0.005 247.858 / 0.40);
  --mf-c-32: oklch(96% 0.005 247.858 / 0.32);

  --mf-ov-04: oklch(100% 0 0 / 0.05);
  --mf-ov-07: oklch(100% 0 0 / 0.08);
  --mf-ov-10: oklch(100% 0 0 / 0.12);
  --mf-ov-14: oklch(100% 0 0 / 0.16);

  --mf-theme-soft: var(--mf-ov-07);
  --mf-success-soft: oklch(72% 0.219 149.579 / 0.18);
  --mf-warning-soft: oklch(70% 0.213 47.604 / 0.18);
  --mf-error-soft: oklch(64% 0.246 16.439 / 0.18);

  --mf-theme: var(--mf-primary);
  --mf-link: var(--mf-accent);
}

/* En claro no hay superficie intermedia: sidebar = fondo de pagina. */
body { --mf-base-150: var(--mf-base-200); }


/* ==========================================================================
   3. MAPEO A LAS VARIABLES DE MEDIACMS
   --------------------------------------------------------------------------
   Mismo orden que frontend/src/static/css/config/_light_theme.scss para que
   se pueda auditar en paralelo. Los dos bloques (claro / oscuro) declaran el
   mismo conjunto de variables; solo cambian los tokens que resuelven.
   ========================================================================== */

body,
body.dark_theme {

  /* --- marca y estados semanticos --------------------------------------- */
  --default-theme-color: var(--mf-theme);
  --default-brand-color: var(--mf-theme);
  --theme-color: var(--mf-theme);
  --brand-color: var(--mf-theme);
  --links-color: var(--mf-link);

  --success-color: var(--mf-success);
  --warning-color: var(--mf-warning);
  --danger-color: var(--mf-error);

  /* --- base ------------------------------------------------------------- */
  --body-text-color: var(--mf-base-content);
  --body-bg-color: var(--mf-base-200);

  --hr-color: var(--mf-base-300);

  --dotted-outline-color: var(--mf-c-40);

  /* --- campos de formulario --------------------------------------------- */
  --input-color: var(--mf-base-content);
  --input-bg-color: var(--mf-base-100);
  --input-border-color: var(--mf-base-300);
  --input-disabled-bg-color: var(--mf-ov-04);

  /* --- header ----------------------------------------------------------- */
  --header-bg-color: var(--mf-base-100);

  --header-circle-button-color: var(--mf-c-60);

  --header-popup-menu-color: var(--mf-base-content);
  --header-popup-menu-icon-color: var(--mf-c-50);

  /* --- sidebar ---------------------------------------------------------- */
  --sidebar-bg-color: var(--mf-base-150);

  --sidebar-nav-border-color: var(--mf-base-300);

  --sidebar-nav-item-text-color: var(--mf-base-content);
  --sidebar-nav-item-icon-color: var(--mf-c-50);

  --sidebar-bottom-link-color: var(--mf-c-88);

  /* --- spinner ---------------------------------------------------------- */
  --spinner-loader-color: var(--mf-c-74);

  /* --- menus de navegacion --------------------------------------------- */
  --nav-menu-active-item-bg-color: var(--mf-ov-10);
  --nav-menu-item-hover-bg-color: var(--mf-ov-04);
  --in-popup-nav-menu-item-hover-bg-color: var(--mf-ov-07);

  /* --- buscador --------------------------------------------------------- */
  --search-field-input-text-color: var(--mf-base-content);
  --search-field-input-bg-color: var(--mf-base-100);
  --search-field-input-border-color: var(--mf-base-300);

  --search-field-submit-text-color: var(--mf-c-74);

  --search-field-submit-bg-color: var(--mf-base-200);
  --search-field-submit-border-color: var(--mf-base-300);

  --search-field-submit-hover-bg-color: var(--mf-base-300);
  --search-field-submit-hover-border-color: var(--mf-base-300);

  --search-results-item-content-link-title-text-color: var(--mf-base-content);

  /* --- avatar del usuario ---------------------------------------------- */
  --logged-in-user-thumb-bg-color: var(--mf-ov-07);

  /* --- popups ----------------------------------------------------------- */
  --popup-bg-color: var(--mf-base-100);

  --popup-hr-bg-color: var(--mf-base-300);

  --popup-top-text-color: var(--mf-base-content);
  --popup-top-bg-color: var(--mf-base-200);

  --popup-msg-title-text-color: var(--mf-base-content);
  --popup-msg-main-text-color: var(--mf-c-74);

  /* --- comentarios ------------------------------------------------------ */
  --comments-textarea-wrapper-border-color: var(--mf-base-300);
  --comments-textarea-wrapper-after-bg-color: var(--mf-base-content);

  --comments-textarea-text-color: var(--mf-base-content);
  --comments-textarea-text-placeholder-color: var(--mf-c-50);

  --comments-list-inner-border-color: var(--mf-base-300);

  --comment-author-text-color: var(--mf-base-content);

  --comment-date-text-color: var(--mf-c-60);
  --comment-date-hover-text-color: var(--mf-base-content);

  --comment-text-color: var(--mf-base-content);
  --comment-text-mentions-background-color-highlight: var(--mf-accent);

  --comment-actions-material-icon-text-color: var(--mf-c-74);

  --comment-actions-likes-num-text-color: var(--mf-c-60);

  --comment-actions-reply-button-text-color: var(--mf-c-60);
  --comment-actions-reply-button-hover-text-color: var(--mf-base-content);

  --comment-actions-cancel-removal-button-text-color: var(--mf-c-60);
  --comment-actions-cancel-removal-button-hover-text-color: var(--mf-base-content);

  /* --- tarjetas de medios ---------------------------------------------- */
  --item-bg-color: var(--mf-base-200);

  --item-title-text-color: var(--mf-base-content);

  --item-thumb-bg-color: var(--mf-base-300);

  --item-meta-text-color: var(--mf-c-60);
  --item-meta-link-text-color: var(--mf-c-60);
  --item-meta-link-hover-text-color: var(--mf-c-88);

  --profile-page-item-content-title-bg-color: var(--mf-base-100);

  --playlist-item-main-view-full-link-text-color: var(--mf-c-60);
  --playlist-item-main-view-full-link-hover-text-color: var(--mf-base-content);

  --item-list-load-more-text-color: var(--mf-c-60);
  --item-list-load-more-hover-text-color: var(--mf-c-88);

  /* --- listados en tabla ----------------------------------------------- */
  --media-list-row-border-color: var(--mf-base-300);
  --media-list-header-title-link-text-color: var(--mf-c-60);

  /* --- formularios de playlist ----------------------------------------- */
  --playlist-form-title-focused-bg-color: var(--mf-base-content);

  --playlist-privacy-border-color: var(--mf-c-50);

  --playlist-form-cancel-button-text-color: var(--mf-c-60);
  --playlist-form-cancel-button-hover-text-color: var(--mf-base-content);

  --playlist-form-field-text-color: var(--mf-base-content);
  --playlist-form-field-border-color: var(--mf-base-300);

  --playlist-save-popup-text-color: var(--mf-base-content);
  --playlist-save-popup-border-color: var(--mf-base-300);

  --playlist-save-popup-create-icon-text-color: var(--mf-c-50);
  --playlist-save-popup-create-focus-bg-color: var(--mf-ov-14);

  /* --- vista de playlist ----------------------------------------------- */
  --playlist-view-header-bg-color: var(--mf-base-100);

  --playlist-view-header-toggle-text-color: var(--mf-c-74);
  --playlist-view-header-toggle-bg-color: var(--mf-base-100);

  --playlist-view-title-link-text-color: var(--mf-base-content);

  --playlist-view-meta-text-color: var(--mf-c-60);
  --playlist-view-meta-link-color: var(--mf-c-60);
  --playlist-view-meta-link-hover-text-color: var(--mf-base-content);

  --playlist-view-status-text-color: var(--mf-c-60);
  --playlist-view-status-bg-color: var(--mf-ov-07);

  --playlist-view-status-icon-text-color: var(--mf-c-40);

  --playlist-view-actions-bg-color: var(--mf-base-100);

  --playlist-view-media-bg-color: var(--mf-base-150);

  --playlist-view-media-order-number-color: var(--mf-c-50);

  --playlist-view-item-title-text-color: var(--mf-base-content);
  --playlist-view-item-author-text-color: var(--mf-base-content);
  --playlist-view-item-author-bg-color: var(--mf-base-150);

  /* --- perfil ----------------------------------------------------------- */
  --profile-page-bg-color: var(--mf-base-100);

  --profile-page-header-bg-color: var(--mf-base-200);

  --profile-page-info-videos-number-text-color: var(--mf-c-60);

  --profile-page-nav-link-text-color: var(--mf-c-60);
  --profile-page-nav-link-hover-text-color: var(--mf-base-content);

  --profile-page-nav-link-active-text-color: var(--mf-base-content);
  --profile-page-nav-link-active-after-bg-color: var(--mf-theme);

  /* --- subidor nativo -------------------------------------------------- */
  --add-media-page-tmplt-dialog-bg-color: var(--mf-base-100);
  --add-media-page-tmplt-uploader-bg-color: var(--mf-base-100);
  --add-media-page-tmplt-dropzone-bg-color: var(--mf-ov-04);
  --add-media-page-tmplt-drag-drop-inner-text-color: var(--mf-c-40);
  --add-media-page-tmplt-upload-item-spiner-text-color: var(--mf-c-32);
  --add-media-page-tmplt-upload-item-actions-text-color: var(--mf-c-40);

  --add-media-page-qq-gallery-upload-button-text-color: var(--mf-c-60);
  --add-media-page-qq-gallery-upload-button-icon-text-color: var(--mf-c-60);
  --add-media-page-qq-gallery-upload-button-hover-text-color: var(--mf-base-content);
  --add-media-page-qq-gallery-upload-button-hover-icon-text-color: var(--mf-base-content);
  --add-media-page-qq-gallery-upload-button-focus-text-color: var(--mf-c-40);

  /* --- pagina de playlist ---------------------------------------------- */
  --playlist-page-bg-color: var(--mf-base-200);
  --playlist-page-details-text-color: var(--mf-c-60);
  --playlist-page-thumb-bg-color: var(--mf-ov-07);
  --playlist-page-title-link-text-color: var(--mf-base-content);

  --playlist-page-actions-circle-icon-text-color: var(--mf-c-50);
  --playlist-page-actions-circle-icon-bg-color: var(--mf-base-200);

  --playlist-page-actions-nav-item-button-text-color: var(--mf-base-content);

  --playlist-page-actions-popup-message-bottom-cancel-button-text-color: var(--mf-c-60);
  --playlist-page-actions-popup-message-bottom-cancel-button-hover-text-color: var(--mf-base-content);
  --playlist-page-actions-popup-message-bottom-cancel-button-icon-hover-text-color: var(--mf-base-content);

  --playlist-page-status-text-color: var(--mf-c-60);
  --playlist-page-status-bg-color: var(--mf-ov-10);
  --playlist-page-status-icon-text-color: var(--mf-c-40);

  --playlist-page-author-border-top-color: var(--mf-base-300);
  --playlist-page-author-name-link-color: var(--mf-base-content);

  --playlist-page-author-edit-playlist-icon-button-text-color: var(--mf-c-60);
  --playlist-page-author-edit-playlist-icon-button-bg-color: var(--mf-base-100);
  --playlist-page-author-edit-playlist-icon-button-active-text-color: var(--mf-base-content);

  --playlist-page-author-edit-playlist-form-wrap-text-color: var(--mf-base-content);
  --playlist-page-author-edit-playlist-form-wrap-bg-color: var(--mf-base-100);
  --playlist-page-author-edit-playlist-form-wrap-border-color: var(--mf-base-300);
  --playlist-page-author-edit-playlist-form-wrap-title-circle-icon-hover-text-color: var(--mf-base-content);

  --playlist-page-author-edit-playlist-author-thumb-text-color: var(--mf-c-74);
  --playlist-page-author-edit-playlist-author-thumb-bg-color: var(--mf-ov-07);

  --playlist-page-details-bg-color: var(--mf-base-100);

  --playlist-page-video-list-bg-color: var(--mf-base-150);
  --playlist-page-video-list-item-title-bg-color: var(--mf-base-150);
  --playlist-page-video-list-item-hover-bg-color: var(--mf-base-300);
  --playlist-page-video-list-item-title-hover-bg-color: var(--mf-base-300);
  --playlist-page-video-list-item-after-bg-color: var(--mf-ov-10);
  --playlist-page-video-list-item-order-text-color: var(--mf-c-60);
  --playlist-page-video-list-item-options-icon-hover-color: var(--mf-base-content);
  --playlist-page-video-list-item-options-popup-cancel-removal-button-text-color: var(--mf-c-60);
  --playlist-page-video-list-item-options-popup-cancel-removal-button-hover-text-color: var(--mf-base-content);
  --playlist-page-video-list-item-options-popup-cancel-removal-button-hover-icon-text-color: var(--mf-base-content);

  /* --- pagina de medio -------------------------------------------------- */
  --media-author-actions-popup-bottom-cancel-removal-button-text-color: var(--mf-c-60);
  --media-author-actions-popup-bottom-cancel-removal-button-hover-text-color: var(--mf-base-content);
  --media-author-actions-popup-bottom-cancel-removal-button-hover-icon-text-color: var(--mf-base-content);

  --profile-banner-wrap-popup-bottom-cancel-removal-button-text-color: var(--mf-c-60);
  --profile-banner-wrap-popup-bottom-cancel-removal-button-hover-text-color: var(--mf-base-content);
  --profile-banner-wrap-popup-bottom-cancel-removal-button-hover-icon-text-color: var(--mf-base-content);

  --media-title-banner-border-color: var(--mf-base-300);
  --media-title-labels-area-text-color: var(--mf-c-60);
  --media-title-labels-area-bg-color: var(--mf-ov-07);
  --media-title-views-text-color: var(--mf-c-60);

  --media-actions-not-popup-circle-icon-focus-bg-color: var(--mf-ov-04);
  --media-actions-not-popup-circle-icon-active-bg-color: var(--mf-ov-07);
  --media-actions-like-before-border-color: var(--mf-c-40);
  --media-actions-share-title-text-color: var(--mf-base-content);
  --media-actions-share-options-nav-button-text-color: var(--mf-c-40);
  --media-actions-share-options-link-text-color: var(--mf-base-content);
  --media-actions-share-copy-field-border-color: var(--mf-base-300);
  --media-actions-share-copy-field-bg-color: var(--mf-base-200);
  --media-actions-share-copy-field-input-text-color: var(--mf-base-content);
  --media-actions-more-options-popup-bg-color: var(--mf-base-100);
  --media-actions-more-options-popup-nav-link-text-color: var(--mf-base-content);
  --media-actions-share-fullscreen-popup-main-bg-color: var(--mf-base-100);

  --report-form-title-text-color: var(--mf-base-content);
  --report-form-field-label-text-color: var(--mf-c-60);
  --report-form-field-input-text-color: var(--mf-base-content);
  --report-form-field-input-border-color: var(--mf-base-300);
  --report-form-field-input-bg-color: var(--mf-base-200);
  --report-form-help-text-color: var(--mf-c-60);

  --form-actions-bottom-border-top-color: var(--mf-base-300);

  --media-author-banner-name-text-color: var(--mf-base-content);
  --media-author-banner-date-text-color: var(--mf-c-60);

  --media-content-banner-border-color: var(--mf-base-300);

  --share-embed-inner-on-right-border-color: var(--mf-base-300);
  --share-embed-inner-on-right-ttl-text-color: var(--mf-base-content);
  --share-embed-inner-on-right-icon-text-color: var(--mf-c-40);
  --share-embed-inner-textarea-text-color: var(--mf-c-74);
  --share-embed-inner-textarea-border-color: var(--mf-base-300);
  --share-embed-inner-textarea-bg-color: var(--mf-base-200);
  --share-embed-inner-embed-wrap-iconn-text-color: var(--mf-c-40);

  --media-status-info-item-text-color: var(--mf-base-content);

  --viewer-sidebar-auto-play-border-bottom-color: var(--mf-base-300);
  --viewer-sidebar-auto-play-next-label-text-color: var(--mf-base-content);
  --viewer-sidebar-auto-play-option-text-color: var(--mf-c-60);

  /* --- login / registro ------------------------------------------------- */
  --user-action-form-inner-bg-color: var(--mf-base-100);
  --user-action-form-inner-title-border-bottom-color: var(--mf-base-300);

  --user-action-form-inner-input-border-color: var(--mf-base-300);
  --user-action-form-inner-input-text-color: var(--mf-base-content);
  --user-action-form-inner-input-bg-color: var(--mf-base-100);
}


/* ==========================================================================
   4. CONTRASTE EN RELLENOS  ·  NO QUITAR
   --------------------------------------------------------------------------
   MediaCMS aplica --theme-color como `background-color` en estos botones pero
   NUNCA declara su color de texto: hereda el del body. Con el verde original
   quedaba #111 sobre #009933 (contraste ~3.4:1, ya flojo); con primary negro
   el texto seria negro sobre negro, o sea invisible.

   Aqui se cierra el par primary / primary-content de la paleta, que es
   exactamente para lo que existe primary-content.
   ========================================================================== */

.comments-form-inner .form .form-buttons a,
.comments-form-inner .form .form-buttons button,
.comment-actions .remove-comment > button,
.media-author-actions > a,
.media-author-actions > button,
.media-drag-drop-content-inner .browse-files-btn-wrap span,
.media-upload-item-bottom-actions > *:hover,
.profile-banner-wrap .popup-message-bottom > a,
.profile-banner-wrap .popup-message-bottom > button,
.profile-page-header a.edit-channel,
.profile-page-header a.edit-profile,
.profile-page-header button.delete-profile,
.retry-media-upload-item:hover,
.user-action-form-inner button,
.user-action-form-inner *[type='button'],
.user-action-form-inner *[type='submit'] {
  color: var(--mf-primary-content);
}

/* Los iconos material dentro de esos botones tampoco heredan solos. */
.comment-actions .remove-comment > button *,
.media-author-actions > a *,
.media-author-actions > button *,
.media-drag-drop-content-inner .browse-files-btn-wrap span *,
.media-upload-item-bottom-actions > *:hover *,
.profile-page-header a.edit-channel *,
.profile-page-header a.edit-profile *,
.profile-page-header button.delete-profile * {
  color: var(--mf-primary-content);
}


/* ==========================================================================
   5. AFORDANCIA DE ENLACES
   --------------------------------------------------------------------------
   Estos enlaces viven dentro de texto corrido y MediaCMS los pinta con
   --theme-color. Con primary negro serian identicos al parrafo, asi que
   reciben el teal de la paleta (accent-content en claro, accent en oscuro).

   El subrayado NO es decorativo. Medido en el navegador, el teal contrasta
   13.2:1 contra el fondo pero solo 1.22:1 contra el parrafo: se distingue por
   tono, no por luminosidad. WCAG 1.4.1 pide 3:1 contra el texto de alrededor
   O una pista no cromatica. El subrayado es esa pista.

   Si se prefiere que el enlace resalte por color y no por subrayado, hay que
   subir --mf-link a una luminosidad intermedia (~oklch(45% 0.07 192.5)), que
   es la unica franja que cumple 3:1 contra el parrafo sin bajar de 4.5:1
   contra el fondo.
   ========================================================================== */

.comment-text a,
.media-content-field-content a {
  color: var(--mf-link);
  text-decoration: underline;
}

.user-action-form-inner a {
  color: var(--mf-link);
}


/* ==========================================================================
   6. VERDES QUEMADOS EN EL CSS ORIGINAL
   --------------------------------------------------------------------------
   Estas reglas de MediaCMS no pasan por ninguna variable: llevan el verde
   Bootstrap #28a745 escrito a mano. Sin este bloque el boton de editar canal
   se quedaria verde y chocaria con el resto del tema.
   ========================================================================== */

.profile-page-header a.edit-channel-icon,
.dark_theme .profile-page-header a.edit-channel-icon,
.profile-page-header a.edit-channel-icon:hover {
  /* !important porque profile-shared-by-me.css y profile-shared-with-me.css
     repiten esta regla con rgba(0,153,51,.9) y se cargan en {% block
     topimports %}, o sea DESPUES de EXTRA_CSS_PATHS. Con misma
     especificidad ganaria el verde. */
  background-color: var(--mf-theme) !important;
  color: var(--mf-primary-content) !important;
}

/* media.css, cargado tambien despues, en templates/cms/media.html:126 */
.media-author-actions .edit-media-icon {
  background-color: var(--mf-theme) !important;
  color: var(--mf-primary-content) !important;
}

/* category_modal.css llega como Media del widget (files/widgets.py:13), que
   Django inyecta despues de la cabecera. */
.category-item .add-btn {
  color: var(--mf-link) !important;
}

.category-item .add-btn:hover {
  background: var(--mf-ov-07) !important;
}


/* ==========================================================================
   7. RADIOS  ·  --radius-field: 0  /  --radius-box: 0  /  --radius-selector: .5rem
   --------------------------------------------------------------------------
   MediaCMS no tiene variable de radio: los 20 border-radius estan quemados en
   _commons.css. Este bloque cuadra los rectangulares y DEJA INTACTOS los que
   deben seguir redondos: avatares y botones circulares (50%), sliders de
   rango (9999em), radios (99em), el interruptor de tema (24px) y los
   indicadores de progreso (9999px).

   Es puramente cosmetico: no afecta layout. Borrar el bloque devuelve los
   redondeos originales.
   ========================================================================== */

/* --radius-box: 0 — tarjetas, popups, dialogos, contenedores */
.item.with-selection.selected .item-content,
.item.with-selection.has-any-selection:not(.selected):hover .item-content,
.item.with-selection.has-any-selection:not(.selected):hover .item-thumb,
.notification-item,
.user-action-form-inner,
.bulk-actions-dropdown .bulk-actions-menu,
.rpv-core__modal-body,
.rpv-core__popover-body,
.rpv-core__tooltip-body,
.rpv-core__asking-password,
.rpv-core__doc-error-text {
  border-radius: 0;
}

/* --radius-field: 0 — inputs, botones, chips */
.item-duration > *,
.item-type-icon > *,
a.item-edit-link,
.item-edit-icon,
.item-view-icon,
input,
select,
textarea,
.search-field-wrap input[type='text'],
.search-field-wrap button[type='submit'],
.user-action-form-inner button,
.user-action-form-inner *[type='submit'],
.user-action-form-inner *[type='button'],
.empty-media .button-link,
.bulk-actions-dropdown .bulk-actions-trigger,
.rpv-core__button,
.rpv-core__minimal-button,
.rpv-core__primary-button,
.rpv-core__textbox {
  border-radius: 0;
}

.tooltip {
  border-radius: 0 !important;
}

/* --radius-selector: .5rem — casillas de seleccion */
.item.with-selection .item-selection-checkbox,
.item.with-selection .item-selection-checkbox input[type='checkbox'] {
  border-radius: 0.5rem;
}