/*
 * Rediseño de cards/inputs/Select2 para los formularios del admin
 * (add/change), aplicado a TODO el proyecto vía templates/admin/base.html.
 *
 * Nació en el form de PurchaseCreditNote (apps/purchases/admin.py) y se
 * generalizó acá porque el usuario pidió llevarlo a todo el admin, no solo
 * a esa pantalla. Todo queda bajo #content-main: ese id solo existe en las
 * páginas add/change (templates/admin/change_form.html), así que no toca
 * changelists ni el dashboard.
 *
 * Desde el sistema de diseño, este archivo NO inventa valores: todos los
 * tamaños, radios, sombras y espacios salen de design-tokens.css. Si hace
 * falta uno nuevo, se agrega como token allá.
 *
 * OJO con estos dos hallazgos, si se toca algo de acá:
 *   1. El theme real de Select2 para AutocompleteSelect es
 *      "admin-autocomplete" (static/admin/css/autocomplete.css, del propio
 *      Django), NO "default". Cualquier regla nueva de Select2 tiene que
 *      apuntar a --admin-autocomplete.
 *   2. related_widget_wrapper.html (templates/admin/widgets/): el <select>
 *      (que Select2 reemplaza) se imprime ANTES de <div
 *      class="related-widget-wrapper">, como HERMANO -- no es su hijo. Los
 *      íconos de agregar/editar/eliminar/ver viven adentro de ese wrapper,
 *      en su propio <span class="input-group-text">.
 */

/* Cards: bordes suaves + jerarquía por sombra en vez de bordes duros
   (superficies más importantes leen más elevadas). SIN overflow:hidden a
   propósito: el desplegable de Select2 de un campo FK cerca del borde de
   la card se recortaba si el contenedor lo tenía. El radio del header se
   resuelve redondeándolo directo (regla de abajo), no recortando la card. */
#content-main .card {
  /* Mismo tratamiento que .sol-panel: en la referencia las cards se separan
     del fondo por un hairline y el radio, no por una sombra marcada. Es más
     sobrio y envejece mejor -- la sombra fuerte siempre termina delatando la
     época en que se diseñó la pantalla. */
  border: 1px solid var(--sol-border);
  border-radius: var(--sol-radius-lg);
  box-shadow: var(--sol-shadow-1);
  transition: box-shadow var(--sol-motion-base) var(--sol-motion-ease);
  margin-bottom: var(--sol-space-4);
}

/* Header aligerado: nada de barra sólida de color -- pesa mucho con varias
   cards apiladas. Fondo casi transparente, texto chico en mayúsculas con
   tracking positivo (correcto para texto pequeño). No se saca del todo:
   sigue respondiendo "¿qué card es esta?" (fieldset.html es global y
   .bg-primary/.text-white vienen con !important -- hay que pisarlos). */
#content-main .card-header.bg-primary {
  /* Referencia Stripe: el título de una card es TEXTO, no una barra de color.
     Fondo igual al de la card, texto oscuro normal, y la separación la hace
     un hairline. La versión anterior (fondo primario al 6% + versalitas
     azules) todavía arrastraba la barra de color del tema; con varias cards
     apiladas, ese azul repetido es lo que hacía que la pantalla se viera
     recargada. */
  background-color: transparent !important;
  color: var(--sol-ink) !important;
  border: none;
  border-bottom: 1px solid var(--sol-border);
  border-top-left-radius: var(--sol-radius-lg);
  border-top-right-radius: var(--sol-radius-lg);
  font-size: var(--sol-text-md);
  font-weight: var(--sol-weight-semibold);
  letter-spacing: var(--sol-tracking-tight);
  padding: var(--sol-space-3) var(--sol-space-4);
}
#content-main .card-body {
  padding: var(--sol-space-4);
}

/* Inputs: el label (.input-group-text) y el campo se tratan como una sola
   pieza -- al enfocar cualquiera de los dos, el grupo entero se resalta
   (halo suave), no solo el input. */
/*#content-main .input-group {*/
/*  border-radius: 10px;*/
/*  !* El theme trae flex-wrap:wrap por default en .input-group (pensado para*/
/*     que el feedback de validación baje a otra línea). Con texto largo en*/
/*     un select2 -- p.ej. el nombre de un proveedor -- esa fila entera*/
/*     "envolvía" y los íconos de agregar/editar/eliminar/ver quedaban en la*/
/*     línea de abajo. Acá SIEMPRE es una sola fila. *!*/
/*  flex-wrap: nowrap;*/
/*  !* SIN overflow:hidden a propósito, mismo motivo que en .card. *!*/
/*  transition: box-shadow 150ms ease-out;*/
/*}*/
/*#content-main .input-group:focus-within {*/
/*  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.18);*/
/*}*/
/*#content-main .input-group-text {*/
/*  font-weight: 500;*/
/*  !* Theme trae .375rem .75rem (padding estándar de Bootstrap) -- se achica*/
/*     un poco: en un form de varios campos ese padding default pesa. *!*/
/*  !*padding: 0.375rem 0.75rem;*!*/
/*  line-height: 1.1;*/
/*  transition: background-color 150ms ease-out, color 150ms ease-out;*/
/*}*/
/*#content-main .input-group:focus-within .input-group-text {*/
/*  color: var(--primary-color, #0d6efd);*/
/*}*/
/*#content-main .form-control,*/
/*#content-main .form-select {*/
/*  padding: 0.3rem 0.6rem;*/
/*  line-height: 1.2;*/
/*  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;*/
/*}*/
/*#content-main .form-select {*/
/*  padding-right: 2.1rem;*/
/*}*/

/* Campos FK con autocomplete: Django los renderiza con Select2, NO como un
   <select class="form-select"> común -- nada de lo de arriba les llega
   solo. Se les da el mismo alto/padding/radio que al resto para que no se
   vean como un campo aparte. */
/*#content-main .input-group > .select2-container {*/
/*  flex: 1 1 auto;*/
/*  width: auto !important;*/
/*  min-width: 0;*/
/*}*/
/* ".selection" es un <span> sin CSS propia (display:inline por default) y
   no le pasa el ancho solo a ".select2-selection--single" -- se fuerza el
   100% en los dos niveles, no alcanza con uno. */
/*#content-main .input-group > .select2-container .selection,*/
/*#content-main .input-group > .select2-container .select2-selection--single {*/
/*  display: block;*/
/*  width: 100%;*/
/*}*/
/* Los íconos de agregar/editar/eliminar/ver NO compiten por espacio con el
   select2 -- ancho fijo (el de su contenido), siempre al final de la fila. */
/*#content-main .related-widget-wrapper {*/
/*  flex: 0 0 auto;*/
/*}*/
/*#content-main .related-widget-wrapper .input-group-text {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 0.3rem;*/
/*  padding: 0.3rem 0.5rem;*/
/*  !* Mismo alto que la caja de Select2 de al lado (min/max-height: 36px,*/
/*     regla de abajo) -- sin esto el span de los íconos queda más bajo/alto*/
/*     que el input y se nota el desnivel en la fila. *!*/
/*  min-height: 36px;*/
/*  max-height: 36px;*/
/*  box-sizing: border-box;*/
/*}*/
/*#content-main .related-widget-wrapper-link {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*}*/

/* Select2 -- border ya viene 1px solid #e9ecef !important de Django (mismo
   valor que .form-control en reposo, no hace falta pisarlo). Acá solo el
   radio (Django trae 4px parejo; se iguala al 2px de .form-control, que es
   :last-child del .input-group) y el alto fijo (min Y max a la vez, sin
   pelear con padding/height propios -- eso es lo que terminó funcionando). */
/*#content-main .select2-container--admin-autocomplete .select2-selection--single,*/
/*#content-main .select2-container--admin-autocomplete .select2-selection--multiple {*/
/*  border-top-left-radius: 0;*/
/*  border-bottom-left-radius: 0;*/
/*  border-top-right-radius: 2px;*/
/*  border-bottom-right-radius: 2px;*/
/*  min-height: 36px !important;*/
/*  max-height: 36px !important;*/
/*  transition: box-shadow 150ms ease-out;*/
/*}*/
/* !important: Django pisa esto con su propio admin-autocomplete.css
   (padding:0 y line-height:40px en .select2-selection__rendered) con más
   especificidad de la que gana #content-main sola. Mismo 1.2 que
   .form-control/.input-group-text de arriba -- no 28px (line-height nativo
   del theme, pensado para el tamaño de campo grande por defecto). */
/*#content-main .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {*/
/*  padding: 0 1rem 0 0 !important;*/
/*  line-height: 1.2 !important;*/
/*  color: inherit;*/
/*}*/
/*#content-main .select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {*/
/*  height: 100%;*/
/*  top: 0;*/
/*  right: 0.4rem;*/
/*}*/
/*#content-main .input-group:focus-within .select2-container--admin-autocomplete .select2-selection--single {*/
/*  box-shadow: none; !* el halo ya lo pone .input-group:focus-within en el grupo entero *!*/
/*}*/

@media (prefers-reduced-motion: reduce) {
  #content-main .card,
  #content-main .input-group,
  #content-main .input-group-text,
  #content-main .form-control,
  #content-main .form-select,
  #content-main .select2-container--admin-autocomplete .select2-selection--single {
    transition: none !important;
  }
}


/* ---------------------------------------------------------------------------
 * Select2 de AUTOCOMPLETADO: mismo borde que los demás select2.
 *
 * En un mismo formulario conviven dos temas de Select2 y cada uno trae su
 * borde:
 *
 *     select2 del tema (Plan, Modo de la ONT)  rgba(120,130,140,.13)
 *     select2 de Django (Caja NAP, autocomplete)  #e9ecef   <- el raro
 *
 * El segundo es el mismo gris de `.form-control`, así que no es "oscuro" por
 * error: es que los select2 del tema van MÁS claros, y al lado de ellos el de
 * autocompletado se lee como una caja marcada mientras el resto no tiene
 * ninguna. Se iguala al del tema, que es lo que se ve en el resto del sistema.
 *
 * Hace falta `!important` y el id: Django lo fija con
 * `border: 1px solid #e9ecef !important` en su propio autocomplete.css, y sin
 * ganarle en especificidad la regla no aplica.
 * ------------------------------------------------------------------------ */
#content-main .select2-container--admin-autocomplete .select2-selection--single,
#content-main .select2-container--admin-autocomplete .select2-selection--multiple {
  border-color: rgba(120, 130, 140, 0.13) !important;
}