/*
 * 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.
 *
 * 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 {
  border: none;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: box-shadow 200ms ease-out;
  margin-bottom: 1rem;
}

/* 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 {
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06) !important;
  color: var(--primary-color, #0d6efd) !important;
  border: none;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7rem 1rem;
}
#content-main .card-body {
  padding: 1.1rem;
}

/* 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;
  }
}