/*******************************************************************************
*                                      [*]                                     *
*******************************************************************************/
@font-face {
   font-family: 'Alata';
   src: url('/assets/fonts/Alata-Regular.ttf') format('truetype');
}

:root {
   --azul-fuerte: #007bbe;
   --azul-medio: #1d98d3;
   --azul-suave: #a7c8e9;
   --rojo: #c70039;
   --gris: #066da5;
   --verde: rgb(0, 170, 0);
   --letra: 'Alata', Arial, Helvetica, sans-serif;

   /* Tema claro (por defecto) */
   --fondo: rgb(252, 252, 252);
   --fondo-tarjeta: whitesmoke;
   --fondo-elevado: #fff;
   --texto: #333;
   --texto-suave: #484848;
   --texto-invertido: #fff;
   --borde: #aaa;
   --borde-suave: #ccc;
   --sombra: rgba(0, 0, 0, 0.1);
   --sombra-fuerte: rgba(0, 0, 0, 0.2);
   --noti-fondo: #fff8ed;
   --noti-color: #3f2c01;
   --overlay: rgb(0 0 0 / .3);
   color-scheme: light;
}

#btn-tema {
   position: fixed;
   top: .5rem;
   left: .5rem;
   z-index: 60;
   background: none;
   border: none;
   cursor: pointer;
   fill: var(--texto-suave);
   padding: .5rem;
   border-radius: 50%;
   transition: .3s;
   line-height: 0;
}

#btn-tema:hover {
   background-color: var(--fondo-tarjeta);
   fill: var(--azul-fuerte);
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   font-family: var(--letra);
   margin: 0;
   width: 100%;
   background-color: var(--fondo);
   color: var(--texto);
   overflow-x: hidden;
   transition: background-color .3s, color .3s;
}

::placeholder {
   color: #6c757d !important;
   opacity: 1 !important;
}

::-webkit-input-placeholder {
   color: #6c757d !important;
   opacity: 1 !important;
}

abbr {
   cursor: help;
}

hr {
   width: 100%;
}

/*******************************************************************************
 *                                [Clases Flex]                                *
 *******************************************************************************/
.flex {
   display: flex;
}

.anchocompleto {
   width: 100%;
}

.caja {
   width: 80%;
   padding: 1rem;
}

.row {
   flex-direction: row;
}

.column {
   flex-direction: column;
}

.textocentrado {
   text-align: center;
}

.centrado {
   justify-content: center;
}

.between {
   justify-content: space-between;
}

.alinear {
   align-items: center;
}

.supercentrado {
   align-items: center;
   justify-content: center;
}

.alturacompleta {
   height: 100%;
}

.pa01 {
   padding: .1rem;
}

.pa02 {
   padding: .2rem;
}

.pa03 {
   padding: .3rem;
}

.pa04 {
   padding: .4rem;
}

.pa05 {
   padding: .5rem;
}

.pa06 {
   padding: .6rem;
}

.pa07 {
   padding: .7rem;
}

.pa08 {
   padding: .8rem;
}

.pa09 {
   padding: .9rem;
}

.pa1 {
   padding: 1rem;
}

.pa2 {
   padding: 2rem;
}

.pa3 {
   padding: 3rem;
}

.pa4 {
   padding: 4rem;
}

.pa5 {
   padding: 5rem;
}

.gap01 {
   gap: .1rem;
}

.gap02 {
   gap: .2rem;
}

.gap03 {
   gap: .3rem;
}

.gap04 {
   gap: .4rem;
}

.gap05 {
   gap: .5rem;
}

.gap1 {
   gap: 1rem;
}

.gap2 {
   gap: 2rem;
}

.gap3 {
   gap: 3rem;
}

.gap4 {
   gap: 4rem;
}

.gap5 {
   gap: 5rem;
}

.gap6 {
   gap: 6rem;
}

.gap7 {
   gap: 7rem;
}

.gap8 {
   gap: 8rem;
}

.wrap {
   flex-wrap: wrap;
}

.no-wrap {
   flex-wrap: nowrap;
}

.rojo {
   color: var(--rojo) !important;
   fill: var(--rojo) !important;
}

.resaltado {
   color: var(--azul-fuerte);
}

.morado {
   color: rebeccapurple;
   fill: rebeccapurple !important;
}

svg:not(.bi) {
   width: 1.2em;
   height: 1.2em;
}

.linea {
   display: flex;
   flex-direction: row;
   width: 100%;
}

/*******************************************************************************
 *                          [Encabezados y párrafos]                           *
 *******************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
}

h1 {
   font-size: 3rem;
   text-transform: capitalize;
}

h2 {
   font-size: 1.8rem;
}

h3 {
   font-size: 1.3rem;
}

label {
   font-size: 1.2rem;
   font-weight: 500;
   cursor: pointer;
}

/*******************************************************************************
 *                                 [Encabezado]                                *
 *******************************************************************************/


/*******************************************************************************
 *                                [Notificación]                               *
 *******************************************************************************/
#notificacion {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-start;
   position: fixed;
   top: -5rem;
   left: .5rem;
   opacity: 0;
   background-color: var(--noti-fondo);
   color: var(--noti-color);
   border-left: 5px solid gold;
   border-radius: .3rem;
   gap: .5rem;
   padding: .2rem .5rem;
   font-size: 1rem;
   max-width: 90%;
   animation: 8s notificacion 1 ease-in;
   z-index: 100;
}

@keyframes notificacion {
   0% {}

   10%,
   85% {
      opacity: 1;
      top: 5rem;
   }

   20%,
   80% {
      box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
   }

   100% {}
}

#noti-ico svg {
   width: 1.2rem;
   height: 1.2rem;
   border-radius: 50%;
   padding: .1rem;
}

#noti-ico {
   line-height: 1px;
}

.noti-correcto {
   fill: seagreen;
}

.noti-advertencia {
   fill: goldenrod;
}

.noti-error {
   fill: #c70039;
}

/*******************************************************************************
 *                                 [Formularios]                                *
 *******************************************************************************/
/* Legacy input styles - scoped to pages that use old styling */
.legacy-input input,
#login input {
   box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 0%, 0.08);
}

.legacy-input input,
.legacy-input select,
#login input,
#login select {
   font-size: 1.4rem;
}

.legacy-input :is(input, select) {
   transition: .3s;
   outline: none;
}

.legacy-input textarea:where(:hover, :focus) {
   background-color: var(--fondo-tarjeta);
   border: 1px solid #4D5656 !important;
}

.legacy-input input:where(:hover, :focus) {
   background-color: var(--fondo-tarjeta);
}

#formlogin button,
.legacy-input input:not(.pc-input):not(.form-control),
.legacy-input input:valid:not(.pc-input):not(.form-control),
.legacy-input select:not(.form-select),
#login input:not(.form-control),
#login select:not(.form-select) {
   font-family: var(--letra);
   font-size: 1.2rem;
   border: none;
   outline: none;
   background-color: var(--gris);
   color: white;
   padding: .5rem;
   border-bottom: 2px solid var(--azul-suave);
   transition: .6s;
}

.legacy-input select:not(.form-select) {
   background-color: var(--azul-medio);
}

.legacy-input input:invalid:not(.form-control) {
   background-color: var(--rojo) !important;
   border-bottom: 2px solid var(--gris);
   animation: invalido 0.5s ease;
}

.legacy-input input::placeholder {
   color: rgb(255 255 255 /.8);
   font-style: italic;
   font-weight: 100;
}

.legacy-input :is(input, select):focus:not(.form-control):not(.form-select) {
   background-color: var(--azul-fuerte);
}

.disabled,
.legacy-input input:disabled {
   background-color: #888 !important;
   border-bottom: 2px solid var(--gris);
   cursor: not-allowed !important;
}

@keyframes invalido {
   0% {
      transform: translateX(0);
   }

   20% {
      transform: translateX(-5px);
   }

   40% {
      transform: translateX(5px);
   }

   60% {
      transform: translateX(-5px);
   }

   80% {
      transform: translateX(5px);
   }

   100% {
      transform: translateX(0);
   }
}

#login input {
   width: 100%;
   border-radius: .3rem;
   box-sizing: border-box;
}

#login #contraseña {
   width: calc(100% - 3rem);
   border-radius: .3rem 0 0 .3rem;
}

#mostrarcontra {
   width: 3rem;
   border: none;
   background-color: var(--azul-fuerte);
   border-radius: 0 .3rem .3rem 0;
   cursor: pointer;
}

#mostrarcontra svg {
   fill: white;
   width: 1rem;
   height: 1rem;
}

.nomostrar {
   border-bottom: 2px solid var(--azul-fuerte) !important;
   background-color: var(--rojo) !important;
}

input[type="search"]::-webkit-search-cancel-button {
   filter: invert(24%) sepia(91%) saturate(3551%) hue-rotate(336deg) brightness(91%) contrast(100%);
   width: 1.4rem;
   height: 1.4rem;
}

/* ── Modern Inputs & Selects ── */
.form-control,
.form-select {
   border-radius: 0.6rem;
   border: 1px solid var(--borde-suave);
   padding: 0.55rem 0.85rem;
   font-size: 0.95rem;
   transition: all 0.2s ease-in-out;
   background-color: var(--bs-body-bg);
   box-shadow: none;
}

.form-control:focus,
.form-select:focus {
   border-color: var(--azul-medio);
   box-shadow: 0 0 0 0.25rem rgba(29, 152, 211, 0.15);
   background-color: var(--bs-body-bg);
}

.form-control-sm,
.form-select-sm,
.input-group-sm>.form-control,
.input-group-sm>.form-select,
.input-group-sm>.input-group-text,
.input-group-sm>.btn {
   padding: 0.25rem 0.65rem !important;
   font-size: 0.82rem !important;
   border-radius: 0.45rem !important;
   min-height: 0 !important;
}

/* Date Input Specifics */
input[type="date"].form-control {
   cursor: pointer;
   min-height: 2.4rem;
}

input[type="date"].form-control-sm,
.input-group-sm>input[type="date"].form-control {
   min-height: 0 !important;
   height: auto !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
   cursor: pointer;
   filter: opacity(0.6);
   transition: filter 0.2s;
   padding: 0.2rem;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
   filter: opacity(1) sepia(100%) saturate(1000%) hue-rotate(180deg);
}

/* Fix for Select arrows in some browsers */
.form-select {
   background-position: right 0.75rem center;
   background-size: 16px 12px;
}


/*******************************************************************************
 *                                   [Cuerpo]                                  *
*******************************************************************************/
main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
}

#login {
   margin: 15dvh auto 0;
   width: 100%;
   max-width: 25rem;
   padding: 2rem 0;
   background-color: var(--fondo-tarjeta);
   box-shadow: 0 2px 6px 0 var(--sombra-fuerte);
   border-radius: .5rem;
}

#login header {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: .5rem;
   padding-bottom: 1rem;
   margin-left: 1rem;
}

#login img {
   width: 3rem;
   height: 3rem;
   margin-bottom: .5rem;
}

#login h1 {
   text-align: center;
   padding-bottom: 1rem;
}

#login form {
   padding: 0 1.5rem;
}

#login footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

#iniciar-sesion {
   margin-top: .5rem;
   width: 100%;
   box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
   cursor: pointer;
   transition: .3s;
   border-radius: .3rem;
   background-color: var(--azul-fuerte);
}

#iniciar-sesion:where(:focus, :hover) {
   box-shadow: none;
}

/*Botones*/
.btn-p,
.btn-s,
.btn-t,
.btn-d {
   border: none;
   font-size: 1.4rem;
   text-decoration: none;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: .5rem 1rem;
   min-width: 8rem;
}

.btn-p {
   background-color: var(--azul-fuerte);
   color: white;
   border-radius: .3rem;
   box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.btn-s {
   background-color: transparent;
   color: var(--azul-fuerte);
   outline: 1px solid #a7c8e9d0;
   border-radius: .3rem;
}

.btn-t {
   background-color: transparent;
   color: var(--texto-suave);
   font-size: 1.1rem;
   font-weight: bold;
}

.btn-d {
   color: white;
   background-color: #f05a5a;
   border-radius: .3rem;
}

.btn-modificar svg {
   width: 1.5rem;
   height: 1.5rem;
}

#btn-inicio {
   left: 1rem;
   right: auto;
}

#btn-asignar {
   display: none;
}

.btn-crear-flotante,
.btn-crear-flotante-superior {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-sizing: content-box;
   width: 1.4rem;
   height: 1.4rem;
   position: fixed;
   bottom: 5.5rem;
   right: 1rem;
   background-color: var(--azul-fuerte);
   fill: white;
   padding: 1rem;
   margin: 0;
   border: none;
   border-radius: 50%;
   /*box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);*/
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.btn-crear-flotante-superior,
#btn-asignar {
   bottom: 10rem;
   background-color: rgb(235, 180, 41);
}

#btn-asignar,
.guardar {
   background-color: rgb(35, 187, 30);
}

#agregar-partida-de-compra {
   fill: rgb(137, 30, 187);
}

#desde0 {
   /* 0 */
   position: relative;
   top: -.75rem;
   right: -.75rem;
   margin-bottom: -1.2rem;
}

#desde0 svg {
   width: .8em;
   height: .8em;
}

#crear-desde0 {
   /* + */
   width: 1.2em;
   height: 1.2em;
}

.modificar {
   border: none;
   background-color: transparent;
   fill: var(--azul-fuerte);
}

#asig-peso {
   position: fixed;
   bottom: 6.8rem;
   right: 5.5rem;
   width: 5rem;
   display: none;
}

/*Líneas de encargos*/
.e-linea,
.com-linea {
   background-color: var(--fondo-tarjeta);
   align-items: center;
   border-radius: .3rem;
   gap: 1rem;
   padding: .2rem .5rem;
   box-shadow: var(--sombra) 0px 1px 3px 0px, var(--sombra) 0px 1px 2px 0px;
}

.e-pescado,
.e-kg,
.e-precio,
.e-cliente {
   width: 20%;
}

.e-modificar {
   width: 10%;
}

.eliminar {
   background-color: transparent;
   border: none;
   fill: var(--rojo);
}

.com-linea {
   align-items: start;
   gap: 0;
}

.com-modificar {
   display: flex;
   flex-direction: row;
   justify-content: end;
}

.seleccionado {
   background-color: gold;
   transition: background-color 0.5s ease;
}

.deseleccionado {
   background-color: var(--fondo-tarjeta);
   transition: background-color 0.5s ease;
}

/*Dialogs*/
#showdialog {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: var(--overlay);
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
   padding: 0;
   margin: 0;
   overflow: hidden;
   display: none;
   opacity: 1;
   animation: .2s aparecer 1 ease-in-out;
}

.desaparecer {
   opacity: 1;
   animation: .3s desaparecer 1 ease-in-out;
}

/*Animación aparecer*/
@keyframes aparecer {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/*Animación desaparecer*/
@keyframes desaparecer {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

dialog {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   width: fit-content;
   padding: 1rem 1.2rem;
   border: none;
   border-radius: .3rem;
   background-color: var(--fondo-elevado);
   color: var(--texto);
   box-shadow: var(--sombra-fuerte) 0px 20px 30px;
   gap: 0;
   opacity: 1;
   animation: .2s aparecer-arriba 1 ease-in-out;
   max-height: 90%;
}

.desaparecer-abajo {
   opacity: 1;
   margin-top: 0;
   animation: .3s desaparecer-abajo 1 ease-in-out;
}

/*Animación aparecer arriba*/
@keyframes aparecer-arriba {
   from {
      opacity: 0;
      margin-top: 5rem;
   }

   to {
      opacity: 1;
      margin-top: 0;
   }
}

/*Animación desaparecer abajo*/
@keyframes desaparecer-abajo {
   from {
      opacity: 1;
      margin-top: 0;
   }

   to {
      opacity: 0;
      margin-top: 5rem;
   }
}

dialog header {
   align-items: flex-end;
   justify-content: flex-end;
   margin-bottom: -2.5rem;
}

dialog b {
   color: var(--rojo);
}



#dialog form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding-bottom: 1rem;
}

#cancelar.cerrar {
   background-color: var(--fondo-elevado);
   border: none;
   fill: var(--gris);
   width: 2rem;
   height: 2rem;
   position: relative;
   top: -1.2dvh;
   right: -.8dvw;
}

dialog header {
   align-items: flex-end;
   justify-content: flex-end;
   margin-bottom: -2.5rem;
}

dialog b {
   color: var(--rojo);
}

#dialog form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding-bottom: 1rem;
}

#cancelar.cerrar {
   background-color: var(--fondo-elevado);
   border: none;
   fill: var(--gris);
   width: 2rem;
   height: 2rem;
   position: relative;
   top: -1.2dvh;
   right: -.8dvw;
}

.pescado {
   font-weight: bold;
   text-shadow: 1px 1px 1px #ccc;
   font-size: 1.2rem;
   line-height: 1.2rem;
}

.cofradia {
   text-decoration: underline;
}

/*Partidas compras*/
#compras-partida {
   /*max-height: 15rem;*/
   overflow-y: auto;
   overflow-x: hidden;
}

#compras-partida label {
   font-size: 1rem;
}

.cajas-y-calibre {
   display: none;
}

.cajas-y-calibre label {
   width: 40%;
}

.linea-compra {
   margin-left: 1rem;
}

.linea-compra-seccion {
   border: 1px dashed var(--borde-suave);
   border-radius: .3rem;
   padding: .2rem;
   width: 16.5rem;
}

.linea-compra-seccion .cofradia {
   margin-left: 0;
}

.compras-seleccionable .seleccionado,
.partidas-seleccionable.seleccionado {
   border-radius: .3rem 0 0 .3rem;
   background-color: #cbe7f8;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.partidas-seleccionable.seleccionado {
   border-radius: .3rem;
}

.compras-opciones {
   width: 0;
   opacity: 0;
   height: 9.5dvh;
   overflow: hidden;
   margin-right: -1rem;
   /*padding: .1rem .4rem .2rem .2rem;*/
}

.compras-opciones button {
   overflow: hidden;
}

.aparecer-opciones {
   opacity: 1;
   animation: .3s aparecer-opciones 1 ease-in;
}

@keyframes aparecer-opciones {
   from {
      width: 0;
   }

   to {
      width: 30%;
      opacity: 1;
   }
}

.desaparecer-opciones {
   opacity: 0;
   animation: .3s desaparecer-opciones 1 ease-in;
}

@keyframes desaparecer-opciones {
   from {
      opacity: 1;
      width: 30%;
   }

   to {
      width: 0;
   }
}

.btn-compras-nueva,
.btn-compras-existente {
   background-color: #30b96a;
   border: none;
   color: white;
   padding: .2rem;
   border-radius: 0 .3rem .3rem 0;
   padding: .4rem;
   height: 100%;
}

.btn-compras-existente {
   background-color: #8d30b9;
}

/* Acordeones */
details {
   border: 1px solid var(--borde);
   border-radius: 4px;
   overflow: hidden;
   transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
   /*max-height: 2.5em;*/
   padding: 0.5em 0.5em 0;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

summary:where(:hover, :focus) {
   cursor: pointer;
}

details article {
   margin-top: .5rem;
   margin-bottom: .5rem;
   margin-left: -.5rem;
   width: 100%;
}

summary {
   font-weight: bold;
   margin: -0.5em -0.5em 0;
   padding: 0.5em;
   text-align: left;
   background-color: var(--gris);
   color: white;
   transition: .5s;
}

summary::marker {
   fill: var(--azul);
   color: white;
}

details[open] {
   max-height: 9999rem;
   padding: 0.5em;
   background-color: var(--fondo-tarjeta);
   animation: .3s desplegando 1 ease-in;
}

details[open] summary {
   border-bottom: 1px solid var(--borde);
   background-color: var(--rojo);
}

@keyframes desplegando {
   from {
      max-height: 3rem;
   }

   to {
      max-height: 50rem;
   }
}

.encabezado-acordeon {
   width: 100%;
   padding: 0 1rem;
   margin-top: -1.3rem;
}

.contable {
   margin-right: 1.5rem;
   background-color: var(--rojo);
   width: 1.6rem;
   min-width: 1.6rem;
   height: 1.6rem;
   text-align: center;
   border-radius: 50%;
   transition: .3s;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

details[open] .contable {
   background-color: var(--gris);
}


.no-hay {
   outline: thick double #282828;
   border-radius: .4rem;
   padding: .2rem;
   width: 95%;
   display: flex;
   font-style: italic;
   margin: 1rem;
}

/*******************************************************************************
 *                                [Pie de página]                               *
 *******************************************************************************/
#version {
   display: flex;
   width: 100%;
   justify-content: center;
   position: fixed;
   bottom: 0;
   color: var(--texto-suave);
   padding: .5rem;
   font-style: italic;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: .3s;
   z-index: 30;
}

/*******************************************************************************
 *                              [Puertos - Inicio]                             *
 *******************************************************************************/
#buscador-puertos {
   width: 100%;
   box-sizing: border-box;
   border-radius: .3rem;
}

.puertos-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
   gap: .8rem;
   width: 100%;
}

.puerto-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: 1rem .5rem;
   background-color: var(--fondo-tarjeta);
   border-radius: .5rem;
   box-shadow: var(--sombra) 0px 1px 3px 0px, var(--sombra) 0px 1px 2px 0px;
   text-decoration: none;
   color: var(--texto);
   font-weight: 500;
   font-size: 1rem;
   transition: .3s;
   text-align: center;
   word-break: break-word;
}

.puerto-card svg {
   width: 2rem;
   height: 2rem;
   fill: var(--azul-fuerte);
   transition: .3s;
}

.puerto-card:where(:hover, :focus) {
   background-color: var(--azul-fuerte);
   color: white;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
   transform: translateY(-2px);
}

.puerto-card:where(:hover, :focus) svg {
   fill: white;
}

/* Encabezado de contexto del puerto en compras */
.puerto-contexto {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: .5rem;
   background-color: var(--azul-fuerte);
   color: white;
   fill: white;
   padding: .5rem 1rem;
   border-radius: .3rem;
   font-size: 1.2rem;
   font-weight: 500;
}

.puerto-contexto svg {
   width: 1.5rem;
   height: 1.5rem;
   fill: white;
}

/*******************************************************************************
 *                            [Menú inferior móvil]                             *
 *******************************************************************************/
/* Menu inferior now uses Bootstrap navbar - see functions.php */
#menu-inferior {
   z-index: 1030;
}

.cargando-spinner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: 2rem;
   width: 100%;
   margin: 0 auto;
   color: var(--texto-suave);
   font-size: .85rem;
}

/* ============================================
   VENTAS VIEW
   ============================================ */

.ventas-grid {
   display: flex;
   flex-direction: row;
   gap: 1rem;
   overflow-x: auto;
   padding-bottom: 1rem;
   -webkit-overflow-scrolling: touch;
   min-height: 3rem;
   align-items: flex-start;
}

.ventas-grid>.no-hay {
   width: 100%;
   padding: 1rem;
   text-align: center;
}

.ventas-partida {
   min-width: 14rem;
   max-width: 16rem;
   flex-shrink: 0;
   border: 1px solid var(--borde);
   border-radius: .5rem;
   background: var(--fondo-tarjeta);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.vp-header {
   display: flex;
   flex-direction: column;
   gap: .15rem;
   padding: .6rem .7rem;
   background: var(--azul-fuerte);
   color: white;
}

.vp-partida-num {
   font-weight: 700;
   font-size: .75rem;
   opacity: .8;
   text-transform: uppercase;
   letter-spacing: .03em;
}

.vp-especie {
   font-weight: 700;
   font-size: 1rem;
}

.vp-detalle {
   font-size: .78rem;
   opacity: .9;
}

.vp-puerto {
   font-size: .78rem;
   opacity: .85;
   font-style: italic;
}

.vp-totales {
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid var(--borde);
}

.vp-total-item {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: .4rem .2rem;
   gap: .1rem;
}

.vp-total-label {
   font-size: .65rem;
   font-weight: 600;
   text-transform: uppercase;
   color: var(--texto-suave);
}

.vp-total-valor {
   font-size: .95rem;
   font-weight: 700;
}

.saldo-positivo {
   background: rgba(35, 187, 30, 0.12);
}

.saldo-positivo .vp-total-valor {
   color: #23bb1e;
}

.saldo-negativo {
   background: rgba(199, 0, 57, 0.12);
}

.saldo-negativo .vp-total-valor {
   color: var(--rojo);
}

.saldo-cero {
   background: rgba(128, 128, 128, 0.08);
}

.vp-clientes {
   display: flex;
   flex-direction: column;
   gap: 1px;
   padding: .3rem;
   flex: 1;
}

.vp-cliente {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: .3rem;
   padding: .35rem .5rem;
   border-radius: .3rem;
   font-size: .82rem;
}

.vp-cliente-nombre {
   flex: 1;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.vp-cliente-cajas {
   font-weight: 700;
   min-width: 2rem;
   text-align: right;
}

.vp-cliente-precio {
   font-size: .75rem;
   opacity: .8;
   min-width: 3.5rem;
   text-align: right;
}

.btn-fecha {
   background: var(--azul-fuerte);
   color: white;
   border: none;
   border-radius: .3rem;
   padding: .4rem .8rem;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
   transition: .2s;
}

.btn-fecha:hover {
   opacity: .85;
}

/* ── Editable inputs in ventas ── */

.vp-edit {
   background: transparent;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, .25);
   color: inherit;
   font-family: inherit;
   font-size: .85rem;
   padding: .15rem .2rem;
   width: 100%;
   outline: none;
   transition: border-color .2s;
}

.vp-edit:focus {
   border-bottom-color: rgba(255, 255, 255, .7);
}

.vp-edit-header::placeholder {
   color: rgba(255, 255, 255, .5);
}

.vp-edit-sm {
   font-size: .8rem;
}

.vp-tabla-head {
   display: flex;
   flex-direction: row;
   gap: .2rem;
   padding: .3rem .5rem;
   font-size: .65rem;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--texto-suave);
   border-bottom: 1px solid var(--borde);
}

.vp-fila {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: .15rem;
   padding: .15rem .3rem;
   border-bottom: 1px solid var(--borde);
   min-height: 1.8rem;
}

.vp-edit-venta {
   background: transparent;
   border: none;
   font-family: inherit;
   font-size: .8rem;
   color: inherit;
   padding: .2rem .15rem;
   outline: none;
   min-width: 0;
}

.vp-edit-venta:focus {
   background: rgba(0, 0, 0, .05);
   border-radius: .2rem;
}

.vp-edit-num {
   -moz-appearance: textfield;
   appearance: textfield;
}

.vp-edit-num::-webkit-inner-spin-button,
.vp-edit-num::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.vp-sel-etiqueta {
   font-size: .75rem;
   padding: 0;
}

.vp-add-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding: .3rem;
   border: none;
   border-top: 1px dashed var(--borde);
   background: transparent;
   cursor: pointer;
   fill: var(--azul-fuerte);
   transition: background .2s;
}

.vp-add-btn:hover {
   background: rgba(0, 0, 0, .04);
}

.vp-del-btn {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--rojo);
   font-size: .7rem;
   padding: .1rem .2rem;
   opacity: .4;
   transition: opacity .2s;
   line-height: 1;
}

.vp-del-btn:hover {
   opacity: 1;
}

/* ── Partida cards (Excel-like, compact) ── */

.partidas-excel-grid {
   display: flex;
   flex-direction: row;
   gap: 0;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   padding: 0 1rem;
}

.partidas-excel-grid>.no-hay {
   width: 100%;
   padding: 1rem;
   text-align: center;
}

.partida-card {
   border: 1px solid #999;
   border-radius: 0;
   background: var(--fondo-tarjeta);
   width: var(--pc-width, 14rem);
   min-width: var(--pc-width, 14rem);
   max-width: var(--pc-width, 14rem);
   height: fit-content;
   box-shadow: none;
   transition: background .2s, color .2s;
   font-size: var(--pc-font, .8rem);
   margin-right: -1px;
   /* collapse borders like Excel */
}

.pc-row {
   display: flex;
   flex-direction: row;
   align-items: center;
   border-bottom: 1px solid #bbb;
}

.pc-row:last-child {
   border-bottom: none;
}

.pc-header {
   background: #e8e8e8;
   font-size: .9em;
   font-weight: 700;
   text-transform: uppercase;
   color: #555;
}

.pc-header .pc-label {
   flex: 1;
   padding: .1rem .15rem;
   text-align: center;
}

.pc-partida-row {
   align-items: center;
   gap: .15rem;
   padding: .1rem .2rem;
}

.pc-partida-label {
   font-weight: 700;
   font-size: 1.05em;
   flex: 1;
}

/* Data row (editable fields) */
.pc-data-row {
   gap: 0;
   padding: .05rem .1rem;
}

.pc-input {
   background: transparent;
   border: none;
   border-right: 1px solid #ccc;
   font-family: inherit;
   font-size: 1em;
   color: inherit;
   padding: .15rem .2rem;
   outline: none;
   min-width: 0;
   flex: 1;
   transition: background .15s ease;
   line-height: 1.2;
}

.pc-input:last-child {
   border-right: none;
}

.pc-input:focus,
.pc-input:focus-visible {
   background: rgba(0, 120, 215, .08) !important;
   box-shadow: inset 0 0 0 1px #0078d7 !important;
   outline: none !important;
   border-color: #0078d7 !important;
}

.pc-input::placeholder {
   color: #aaa;
   font-style: normal;
   font-size: .95em;
}

.pc-input-wide {
   width: 40%;
   flex: 0 0 40%;
}

.pc-input-sm {
   flex: 1;
   text-align: right;
}

.pc-input[type="number"]::-webkit-inner-spin-button,
.pc-input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.pc-input[type="number"] {
   -moz-appearance: textfield;
   appearance: textfield;
}

/* Custom color picker */
.pc-color-wrap {
   position: relative;
}

.pc-color-dot {
   width: .7rem;
   height: .7rem;
   border-radius: 50%;
   border: 1px solid #999;
   cursor: pointer;
   padding: 0;
   transition: transform .15s;
}

.pc-color-dot:hover {
   transform: scale(1.2);
}

.pc-color-picker {
   display: none;
   position: fixed;
   background: var(--fondo-tarjeta);
   border: 1px solid var(--borde);
   border-radius: .4rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
   padding: .3rem;
   gap: .25rem;
   flex-wrap: wrap;
   z-index: 100;
   min-width: 6rem;
}

.pc-color-picker.abierto {
   display: flex;
}

.pc-color-opt {
   width: 1.6rem;
   height: 1.6rem;
   border-radius: .25rem;
   border: 1px solid var(--borde);
   cursor: pointer;
   font-size: .6rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   transition: transform .1s;
}

.pc-color-opt:hover {
   transform: scale(1.15);
}

.pc-color-ninguno {
   background: var(--fondo-tarjeta);
   color: var(--texto-suave);
   font-size: .7rem;
}

/* ── Excel-like table layout ── */

.excel-scroll {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 1rem;
}

.excel-table {
   border-collapse: collapse;
   font-size: .78rem;
   white-space: nowrap;
}

.excel-table td {
   border: 1px solid var(--borde);
   padding: .25rem .4rem;
   vertical-align: middle;
}

.excel-loading {
   text-align: center;
   padding: 2rem !important;
   font-style: italic;
   color: var(--texto-suave);
}

/* Partida header row */
.excel-row-partida td {
   background: var(--azul-fuerte);
   color: white;
   font-weight: 700;
   text-align: center;
   font-size: .85rem;
}

.excel-label {
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .05em;
}

.excel-partida-num {
   font-size: 1rem;
}

/* Info rows */
.excel-row-info td {
   background: var(--fondo-tarjeta);
}

.excel-puerto {
   font-weight: 600;
   color: var(--azul-fuerte);
}

/* Separator row */
.excel-row-sep td {
   border: none;
   height: .4rem;
   padding: 0;
   background: transparent;
}

/* Totales header */
.excel-row-totales-head td {
   background: var(--fondo-barra);
   font-weight: 700;
   text-align: center;
   font-size: .7rem;
   text-transform: uppercase;
   color: var(--texto-suave);
}

/* Totales values */
.excel-row-totales td {
   text-align: center;
   font-weight: 700;
   font-size: .85rem;
}

.excel-total {
   background: var(--fondo-tarjeta);
}

/* Ventas header */
.excel-row-ventas-head td {
   background: var(--fondo-barra);
   font-weight: 600;
   font-size: .7rem;
   text-transform: uppercase;
   color: var(--texto-suave);
   text-align: center;
}

/* Ventas rows */
.excel-venta-cell {
   position: relative;
}

/* Inputs inline in Excel cells */
.ex-inp,
.ex-venta {
   background: transparent;
   border: none;
   font-family: inherit;
   font-size: .78rem;
   color: inherit;
   padding: .15rem .1rem;
   width: 100%;
   outline: none;
   box-sizing: border-box;
}

.ex-inp:focus,
.ex-venta:focus {
   background: rgba(0, 0, 0, .06);
}

.ex-inp-sm {
   width: 4rem;
   text-align: right;
}

.ex-venta-num {
   text-align: right;
   width: 3.5rem;
   appearance: textfield;
   -moz-appearance: textfield;
}

.ex-venta-num::-webkit-inner-spin-button,
.ex-venta-num::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Etiqueta select in cell */
.ex-etiqueta {
   position: absolute;
   right: 1.2rem;
   top: 50%;
   transform: translateY(-50%);
   width: 1.3rem;
   border: none;
   background: transparent;
   cursor: pointer;
   font-size: .65rem;
   padding: 0;
   opacity: .5;
}

.ex-etiqueta:hover {
   opacity: 1;
}

/* Delete button in cell */
.ex-del {
   position: absolute;
   right: .1rem;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   cursor: pointer;
   color: var(--rojo);
   font-size: .6rem;
   opacity: .3;
   padding: .1rem;
   line-height: 1;
}

.ex-del:hover {
   opacity: 1;
}

/* Add row button */
.excel-add-cell {
   text-align: center;
   padding: 0 !important;
}

.ex-add-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   color: var(--azul-fuerte);
   font-size: .7rem;
   font-weight: 600;
   padding: .3rem;
   width: 100%;
   transition: background .2s;
}

.ex-add-btn:hover {
   background: rgba(0, 0, 0, .04);
}

/* ── Toast notifications ── */
.toast-sisco {
   position: fixed;
   top: 1rem;
   right: 1rem;
   background: #2e7d32;
   color: #fff;
   padding: .5rem 1.2rem;
   border-radius: .4rem;
   font-size: .85rem;
   font-weight: 600;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
   z-index: 9999;
   opacity: 0;
   transform: translateY(-1rem);
   transition: opacity .3s, transform .3s;
   pointer-events: none;
}

.toast-sisco.show {
   opacity: 1;
   transform: translateY(0);
}

/* ── Loading spinner ── */
.cargando-spinner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: 2rem;
   width: 100%;
   margin: 0 auto;
   color: var(--texto-suave);
   font-size: .85rem;
}

.cargando-spinner svg {
   width: 2.5rem;
   height: 2.5rem;
   fill: var(--azul-fuerte);
   animation: girar 1s linear infinite;
}

@keyframes girar {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}