/* ==========================================================================
   Tarjetas de seccion para las ventanas winInfo
   (Inventarios/Productos, Contactos/Clientes, Contactos/Proveedores).

   `wi-card` es la definicion UNICA del estilo de tarjeta: recuadro gris claro
   levantado sobre el fondo, con el titulo de la seccion como encabezado. Es
   agnostica del modulo a proposito — define el recuadro y nada mas, nunca la
   maquetacion interna, que cada pestania resuelve con sus propias clases
   (`prd-grid`, `fiscal-grid`, `colms-container`...).

   Toda seccion nueva de cualquier pestania de winInfo debe llevarla; no se
   vuelve a declarar el aspecto por modulo.

   Se carga DESPUES de global.css en `core/ui/header.tpl`: varias reglas de
   ahi (`.container-card-contact .lbl-section`, `.line-bottom`) tienen la
   misma especificidad, y es el orden el que decide.
   ========================================================================== */

.wi-card {
    /* Ancla de `.wi-card-actions`. */
    position: relative;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: solid 1px var(--color_neutro1);
    border-radius: 6px;
    background: var(--color_neutro2);
    /* Dos capas: una corta y cerrada que asienta la tarjeta sobre el fondo y
       otra amplia y difusa que le da el efecto de estar levantada. El tono es
       --color_primario2 en rgba, para que la sombra sea de la misma familia
       que el resto de la paleta y no un gris neutro. */
    box-shadow: 0 1px 2px rgba(19, 45, 78, .10),
                0 6px 14px rgba(19, 45, 78, .16);
    box-sizing: border-box;
}

.wi-card:last-child {
    margin-bottom: 0;
}

/* El titulo encabeza la tarjeta: se separa del contenido con una linea tenue
   que llega a los bordes del recuadro. Solo aplica al titulo que cuelga
   directamente de la tarjeta; los que van anidados (por ejemplo dentro de
   `.cols2`, en las pestanias de direcciones y contactos) conservan el suyo. */
.wi-card > .lbl-section {
    display: block;
    width: 100%;
    /* `.colms-container` es una rejilla de dos columnas: sin esto el titulo
       ocuparia solo la primera y empujaria el contenido a la segunda. */
    grid-column: 1 / -1;
    margin: 0 0 12px 0;
    padding: 0 0 8px 0;
    border-bottom: solid 1px var(--color_neutro1);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
    text-transform: none;
    color: var(--color_primario2);
}

/* Las tarjetas de aviso ("Guarde primero los datos generales del producto.")
   solo llevan el titulo: sin contenido debajo, la linea del encabezado no
   separa nada y deja un espacio muerto al pie de la tarjeta. */
.wi-card > .lbl-section:only-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* `.boxPrincipal` trae relleno inferior propio para separarse del bloque
   siguiente; dentro de una tarjeta esa separacion ya la da el recuadro. */
.wi-card > .boxPrincipal {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Margen de la pestania

   Margen uniforme de 20px a los lados y al pie en todas las pestanias de
   winInfo. Arriba el relleno es mayor porque los botones Guardar / Limpiar
   (.actionButtonsRight) van absolutos en la esquina superior derecha, sobre
   el flujo del contenido: reserva su alto (29px) para que no se encimen con
   el primer bloque.

   Sustituye el `8px 10px` de `.container-tab` (global.css, misma
   especificidad: decide el orden de carga). El margen de Kendo en el panel se
   anula en el `<style>` de cada `winInfo.tpl`, para que estos 20px sean el
   unico origen de la separacion.
   -------------------------------------------------------------------------- */

.wi-tab {
    /* `.container-tab` es una rejilla con `align-content: center`: con
       `min-height: 100%` eso centra las tarjetas verticalmente y abre un
       hueco arriba cuando el contenido no llena el panel. Las tarjetas se
       apilan desde arriba. */
    align-content: start;
    /* Margen igual por los cuatro lados. Arriba no hace falta reservar el
       alto de los botones de accion: al quedar fijos (ver mas abajo) flotan
       por encima de la primera tarjeta, no dentro del flujo. */
    padding: 10px;
    /* La plantilla trae `height: 100%` en linea: fija la pestania al alto del
       panel, asi que cuando el contenido es mas alto sobra un hueco muerto
       entre la ultima tarjeta y el final del desplazamiento (el relleno de
       20px queda arriba de ese hueco, no al pie). Con `min-height` la
       pestania sigue llenando el panel cuando el contenido es corto, pero
       crece con el y los 20px quedan pegados a la ultima tarjeta. */
    height: auto !important;
    min-height: 100%;
    box-sizing: border-box;
}

/* Los botones de accion de la pestania (Guardar / Limpiar, Agregar, Descargar)
   quedan fijos: se ven siempre, tambien con el contenido desplazado.

   El truco es el bloque contenedor. `.container-tab` trae `position: relative`
   y con el los botones, aunque absolutos, se desplazan con el contenido. Al
   dejar la pestania en `static`, su bloque contenedor pasa a ser el tabstrip
   (`position: relative` en el `<style>` de cada `winInfo.tpl`), que esta por
   ENCIMA del panel con `overflow: auto`: por eso ni se desplazan con el ni los
   recorta. `top`/`right` se miden entonces desde el marco del tabstrip, y dan
   la misma posicion de siempre — alineados con el borde derecho de las
   tarjetas. */
.wi-tab {
    position: static;
}

.wi-tab .actionButtonsRight {
    position: absolute;
    top: 10px;
    right: 10px;
    /* Por encima de las tarjetas, que pasan por debajo al desplazar. */
    z-index: 5;
}

/* --------------------------------------------------------------------------
   Botones de accion de la tarjeta

   Editar / Borrar de un registro repetido (una direccion, un contacto) van en
   la esquina inferior derecha de su tarjeta. Absolutos para que no compitan
   por el ancho con el titulo ni con la rejilla de dos columnas de
   `.colms-container`: `top`/`right` igualan el relleno de la tarjeta, de modo
   que quedan alineados con su borde interior.
   -------------------------------------------------------------------------- */

.wi-card-actions {
    position: absolute;
    /* Abajo y no arriba: el boton fijo de Agregar vive en la esquina superior
       derecha de la pestania y se encimaria con el de la primera tarjeta. */
    bottom: 14px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Huecos sobrantes en la pestania
   -------------------------------------------------------------------------- */

/* `.container-tab` es una rejilla con `gap: 17px`, que se sumaba al margen
   inferior que ya trae cada tarjeta: la separacion la pone la tarjeta y solo
   ella. */
.wi-tab {
    gap: 0;
}

/* Los contenedores que rellena el JS al dar de alta un registro (por ejemplo
   la forma de nueva direccion) llegan vacios: sin esto siguen ocupando alto y
   empujan la primera tarjeta hacia abajo, dejando un hueco bajo los botones.
   Al llenarlos, `:empty` deja de aplicar y vuelven a mostrarse solos. */
.wi-tab .cols2:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Ventanas de edicion (winEditAddress, winEditContact)

   No son pestanias, pero muestran las mismas tarjetas: comparten el margen de
   10px para que el contenido no cambie de sitio al pasar de la ventana de
   detalle a la de edicion.
   -------------------------------------------------------------------------- */

.wi-win {
    padding: 10px;
    box-sizing: border-box;
}

/* Los botones de accion quedan fijos, igual que en las pestanias, y por el
   mismo motivo: el bloque contenedor tiene que estar por encima del elemento
   que se desplaza. Aqui ese elemento es `.k-window-content`, al que Kendo le
   pone `position: relative`; el `<script>` de cada plantilla le agrega
   `wi-win-host` para poder anularlo (CSS no puede seleccionar al padre). El
   papel pasa entonces a `.k-window`, cuyo relleno superior de 38px es la
   barra de titulo: de ahi el `calc()`, que deja los botones 10px por debajo
   de ella, alineados con las tarjetas. */
.wi-win-host {
    position: static;
}

.wi-win .actionButtonsRight {
    position: absolute;
    top: calc(38px + 10px);
    right: 10px;
    z-index: 5;
}

/* Notas es la unica pestania cuya tarjeta empieza con controles y no con
   texto: la barra del editor queda debajo de los botones fijos de Guardar /
   Limpiar, que taparian sus controles. Aqui la tarjeta va COMPLETA por debajo
   de los botones, no detras de ellos.

   La cuenta: los botones arrancan a 10px del borde de la pestania y miden
   ~29.4px de alto, asi que terminan cerca de los 39.4px; 50px dejan la
   tarjeta unos 10px mas abajo, la misma separacion que el resto de los
   margenes. */
.wi-tab-top-gap {
    padding-top: 50px;
}