/*
 * CSS específico de alguna ruta de guaritay.com . Código que
 * generalmente no sería reutilizable en otras páginas similares.
 */

/*
 * NAVBAR
 */

nav h1 {
    color: var(--color-green);
}


/*
 * LOGIN (/usuario/login)
 */
section.login {
    justify-items: center;
    align-content: center;
}

.login-title {
    text-align: center;
}

/*
 * SELECCIÓN DE CAJA (/seleccionar-caja)
 */

#seleccionar-caja {
    justify-items: center;
}

/*
 * INICIO (/)
 */


/* Para que la lupita se vea linda :] */
.buscar-contenedor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;

    * {
        grid-row: 1;
        grid-column: 1;
    }

    .fa-magnifying-glass {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
    }

    .busqueda {
        padding-left: 2rem;
    }
}

#resultados {
    max-height: 30svh;
    overflow-y: auto;
}

/* Ventas parciales */

.header-venta-parcial {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.rotar-venta {
    background-color: var(--color-secondary);
}

/*Medios de pago en venta parcial*/
.medios-pago {
    display: grid;
    gap: 0.5rem;
}

.medio-pago-container {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;

    button {
        padding-block: inherit;
    }
}

.unico-medio-pago {
    grid-column: span 3;
}

@media screen and (max-width: 500px) {
    .medio-pago-container {
        grid-template-columns: none;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 1rem;

        border: 1px solid var(--color-bg-secondary);
        border-radius: var(--border-radius);

        button,
        select,
        input {
            width: auto;
        }
    }
}

@media screen and (max-width: 600px) {
    #agregar-linea-vacia {
        display: block;
        padding: 1rem;

        td {
            display: none;
        }

        &::after {
            content: "Doble clic aquí para agregar línea vacía"
        }
    }
}

@media screen and (min-width: 800px) {
    /* Estructura en pc de dos columnas */
    #inicio {
        grid-template-columns: 1fr 2fr;
    }

    /* Que los resultados tenga un tamaño limitado más grande que en celu */
    #resultados {
        max-height: 70svh;
        overflow-y: auto;
    }

    #inicio .table-container {
        max-height: 300px;
        overflow-y: auto;
    }
}

/*
 * RESUMEN DE VENTAS (/resumen-ventas)
 */

#resumen-ventas #filtros-ventas .filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1rem;
}

#ventas,
#ventas-borradas,
#ingresos,
#retiros {
    display: grid;
    gap: 0.5rem;
}

#ventas-borradas th,
#ventas-borradas tfoot td {
    background: var(--color-red);
}

#ingresos th,
#ingresos tfoot td {
    background: var(--color-blue);
}

#retiros th,
#retiros tfoot td {
    background: var(--color-secondary);
}

/*
 * VENTAS DE UN TURNO (/turno/ventas)
 */

/* Selector de edición de medios de pago */
.medios-pago-cell {
    /* En este caso, flexbox tiene sentido */
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;

    div {
        text-align: left;
    }
}

/* Edición de medios de pago */
.agregar-medio-pago-form {
    display: grid;
    gap: 0.5rem;
}

/*
 * RESUMEN DEL TURNO (/turno/resumen)
 */

main > #aclaraciones-section {
    justify-self: center;
    grid-template-rows: auto 1fr auto;
}

/*
 * CIERRE DE CAJA (/turno/cerrar)
 */

#cierre #aclaraciones-section {
    width: auto;
}

/*
 * CREACIÓN DE PRODUCTOS (/producto/nuevo)
 */

#producto-nuevo {
    justify-items: center;
}

/*
 * ACTUALIZACIÓN DE PRECIOS EN MASA (/producto/actualizar-precios)
 */

#barra-cambios-precio {
    display: grid;
    gap: 1rem;

}

@media screen and (min-width: 600px) {
    #barra-cambios-precio {
        grid-template-columns: 2fr 1fr auto;

        button {
            padding-block: 0;
        }
    }
}

/*
 * ÚLTIMOS CAMBIOS DE PRECIOS (/productos/cambios)
 */

#ultimos-cambios .table-wrapper {
    max-height: 60svh;
    overflow-y: auto;
}

/*
 * INGRESOS Y COBROS (/ingresos-cobros)
 */

#ingresos-cobros {
    justify-items: center;
}

/*
 * RETIROS DE EFECTIVO/DINERO (/retirar-efectivo)
 */

#retirar-efectivo {
    justify-items: center;
}

/*
 * BÚSQUEDA DE VENTAS (/venta/buscar)
 */

#seleccionar-productos #resultados-productos {
    max-height: 30svh;
    overflow-y: auto;
}

#filtros-fechas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1rem;
}

@media screen and (min-width: 800px) {
    #buscar-ventas {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "buscar filtros"
            "buscar resultados";
    }

    #buscar-ventas #seleccionar-productos {
        grid-area: buscar;
    }

    #buscar-ventas #filtros-ventas {
        grid-area: filtros;
    }

    #buscar-ventas #resultados-ventas {
        grid-area: resultados;
    }

    #seleccionar-productos #resultados-productos {
        max-height: 60svh;
        overflow-y: auto;
    }
}

/*
 * SIEMBRA (/siembra/ver)
 */

#siembra {
    justify-items: center;
}

/*
 * ADMIN (/admin/*)
 */

@media screen and (min-width: 900px) {
    #section-admin {
        grid-template-rows: auto 1fr;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "titulo titulo"
            "crear lista";
        align-items: start;
    }

    #section-admin h2 {
        grid-area: titulo;
    }

    #admin-create {
        grid-area: crear
    }

    #lista-mod {
        grid-area: lista
    }
}