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

:root {
   --azul-fuerte: #007bbe;
   --azul-oscuro: #003450;
   --azul-medio: #1d98d3;
   --azul-suave: #a7c8e9;
   --rojo: #c70039;
   --rojo-borrar: #d32f2f;
   --negro: #1e1e1e;
   --gris-oscuro: #1d2327;
   --gris-suave-fondo: #ededed;
   --gris-texto: #f0f0f1;
   --verde: rgb(0, 170, 0);
   --amarillo-logo: #f1d478;
   --letra: 'Alata', Arial, Helvetica, sans-serif;
}

html {
   overflow: hidden;
}

body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   font-family: var(--letra);
   margin: 0;
   width: 100%;
   height: 100dvh;
   background-color: rgb(252, 252, 252);
   overflow-x: hidden;
}

abbr {
   cursor: help;
}

hr {
   width: 100%;
   border: 1px solid var(--gris-oscuro);
   margin-top: .2rem;
   margin-bottom: .2rem;
   border-radius: 100%;
}

button {
   font-family: var(--letra);
}

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

.blanco {
   color: var(--gris-texto) !important;
   fill: var(--gris-suave-fondo) !important;
}

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

.resaltado {
   color: var(--negro);
}

.texto-gris {
   color: #4D5656;
}

svg {
   width: 1.2em;
   height: 1.2em;
}

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

img,
video {
   border-radius: .3rem;
}

/*******************************************************************************
 *                                  MARK:[Textos]                              *
 *******************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
   text-wrap: balance;
}

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

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

.anchocompleto {
   width: 100%;
}

.alturacompleta {
   height: 100%;
}

.caja {
   width: 80%;
}

.caja-grande {
   width: 70%;
}

.caja-media {
   width: 50%;
}

.caja-peque {
   width: 45%;
}

.row {
   flex-direction: row;
}

.column {
   flex-direction: column;
}


.textocentrado {
   text-align: center;
}

.justificado {
   justify-content: center;
}

.flex-centrado {
   display: flex;
   justify-content: center;
   align-items: center;
}

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

.alinear {
   align-items: center !important;
}

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

.hover:hover {
   background-color: rgba(124, 124, 124, 0.05);
   /* Fondo un poco más oscuro */
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
   /* Sombra más intensa */
}

.parcela {
   display: flex;
   /* Or block, grid, etc., depending on your layout */
   margin-bottom: 1rem;
   /* Optional: Add spacing */
}

.hidden {
   display: none !important;
}

#listado-parcelas {
   width: 100%;
}

.wrap {
   flex-wrap: wrap;
}

.seccion-titulo {
   color: var(--negro);
}

.margen_inferior {
   margin-bottom: 2em;
}









/* Estilo para los formularios cuando están activos */
#registro-fertilizante.activo,
#registro-fitopatologico.activo,
#registro-residuos.activo,
#registro-semilla.activo,
#registro-postcosecha.activo,
#registro-transporte.activo,
#registro-almacenamiento.activo {
   border: 2px solid #4CAF50 !important;
   /* Borde verde */
   box-shadow: 0 0 10px rgba(0, 128, 0, 0.5) !important;
   /* Sombra verde */
}

/* Estilo para los botones cuando el formulario está activo */
#boton-registro-fertilizante.activo,
#boton-registro-fitopatologico.activo,
#boton-registro-residuos.activo,
#boton-registro-semilla.activo,
#boton-registro-postcosecha.activo,
#boton-registro-transporte.activo,
#boton-registro-almacenamiento.activo {
   background-color: #4CAF50 !important;
   /* Fondo verde */
   color: white !important;
   /* Texto blanco */
}



.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;
}

.toppad {
   padding-top: 2em;
}

.toppad1 {
   padding-top: 1em;
}

.topmar1 {
   margin-top: 1em;
}

.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;
}

.margen01 {
   margin: 1rem;
}

.margen02 {
   margin: 2rem;
}

.margen03 {
   margin: 3rem;
}

.wrap {
   flex-wrap: wrap;
}

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

/*******************************************************************************
 *                              MARK:[Encabezado]                              *
 *******************************************************************************/
#encabezado {
   display: flex;
   flex-direction: row;
   gap: 1rem;
   width: 100%;
   background-color: var(--gris-oscuro);
   padding: .4rem;
   box-shadow: rgb(0 0 0 / 0.1) 0px 4px 6px -1px, rgb(0 0 0 / 0.06) 0px 2px 4px -1px;
}

#enlaces {
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: flex-end;
   gap: 1rem;
   padding-right: .5rem;
}

#enlaces a {
   text-decoration: none;
   color: white;
   font-size: 1.3rem;
   gap: .5rem;
   border-radius: .3rem;
   padding: 1rem .4rem;
   width: 10rem;
   height: 6rem;
}

#encabezado a,
#encabezado a svg {
   transition: .5s;
   color: white;
}

#encabezado a:where(:focus, :hover) {
   background-color: rgba(255, 255, 255, .9);
   color: var(--gris-oscuro);
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

#encabezado a svg {
   font-size: 1.4rem;
   fill: var(--gris-oscuro);
   background-color: white;
   padding: 1rem;
   border-radius: 20px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   width: 2rem;
   height: 2rem;
}

:is(#inicio-logo, #encabezado a):where(:focus, :hover) svg {
   fill: var(--negro);
}

#encabezado a:active {
   border: 3px solid white;
   background-color: #c70039;
}

#inicio-logo:where(:focus, :hover) {
   background-color: white;
}

#inicio-logo,
#inicio-logo-empleado {
   margin-left: 1rem;
   padding: .5rem;
   border-radius: .3rem;
   transition: .3s;
   /*width: 2rem;*/
}

/*Encabezado empleado*/
#encabezado {
   justify-content: space-between;
}

#inicio-logo-empleado img {
   width: 10rem;
}

#btn-lateral {
   border: none;
   background-color: transparent;
   margin-right: .5rem;
   width: 3rem;
   height: 3rem;
   fill: var(--gris-texto);
   z-index: 22;
}

#encabezado-lateral {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 16rem;
   height: 100%;
   background-color: var(--negro);
   position: fixed;
   right: -20rem;
   top: 0;
   box-shadow: rgba(60, 64, 67, 0.3) -2px 1px 2px 0px, rgba(60, 64, 67, 0.15) -3px 1px 3px 1px;
   transition: .5s;
   z-index: 20;
}

#encabezado-lateral section {
   padding-top: 3.8rem;
}

#encabezado-lateral.activo {
   right: 0;
}

#encabezado-lateral a {
   width: 100%;
   height: 3rem;
   gap: .5rem;
   background-color: var(--gris-oscuro);
   color: white;
   fill: white;
   text-decoration: none;
   transition: .4s;
   align-items: center;
   padding-left: 2rem;
}

#encabezado-lateral #cerrar_sesion {
   background-color: var(--gris-suave-fondo);
   /*margin-bottom: 3.8rem;*/
}

#encabezado-lateral section a.activo {
   background-color: var(--gris-suave-fondo);
   color: var(--negro);
   fill: var(--negro);
}

#encabezado-lateral a:where(:hover, :focus) {
   background-color: var(--negro);
}

/*******************************************************************************
 *                             MARK:[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: #fff8ed;
   color: #3f2c01;
   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: 102;
}

@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-error {
   fill: #c70039;
}

/*******************************************************************************
 *                              MARK:[Formularios]                             *
 *******************************************************************************/
input {
   box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 0%, 0.08);
   border-radius: .3rem;
}

input,
select {
   font-size: 1.4rem;
}

input:invalid {
   background-color: rgba(200, 0, 0, .2);
}

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

textarea {
   font-family: var(--letra);
   resize: none;
   field-sizing: content;
   min-height: 5rem;
   min-width: 20rem;
   font-size: 1.4rem;
   width: 100%;
   height: auto;
   margin: 0;
   padding: 0;
   border-radius: .3rem;
   border: none;
   background-color: #ecf0f1;
   padding: .5rem;
   box-sizing: border-box;
   transition: .3s;
   border: none;
}

textarea:where(:hover, :focus) {
   background-color: whitesmoke;
   outline: 1px solid #4D5656 !important;
   border: none !important;
}

input:where(:hover, :focus) {
   background-color: whitesmoke;
}

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

select {
   background-color: var(--azul-medio);
   user-select: none;
}

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

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

:is(input, select):focus {
   background-color: var(--azul-fuerte);
}

.disabled,
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);
   }
}

input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(100%);
   cursor: pointer;
}

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

#mostrarcontra {
   cursor: pointer;
   width: 3rem;
   border-radius: 0 .3rem .3rem 0;
}

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

#mostrarcontra:where(:focus, :hover) {
   border-bottom: 2px solid var(--azul-fuerte) !important;
   background-color: var(--rojo) !important;
}

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

#formulario :is(input, select) {
   width: 15.5rem !important;
}

#formulario>section {
   width: 50%;
   justify-content: center;
   align-content: space-between;
}

/**
* MARK: radios
*/

#radio-cliente,
#radio-empleado,
.radios {
   display: none;
}

#span-cliente,
#span-empleado,
.span-radio {
   transition: .3s;
   border-radius: .3rem;
   padding: .5rem;
   user-select: none;
}

#radio-cliente:checked~#span-cliente,
#radio-empleado:checked~#span-empleado,
.radios:checked~.span-radio {
   background-color: whitesmoke;
   color: var(--azul-fuerte);
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

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

#login {
   margin-top: 15dvh;
   width: fit-content;
   padding: 2rem 0;
   background-color: whitesmoke;
   box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
   border-radius: .3rem;
}

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

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

#login form {
   padding: 0 5dvw;
}

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

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

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

.ancho_80 {
   width: 80%;
}

.ancho60 {
   width: 70%;
}

/*REGISTRO HISTORIAL FITOSANITARIO*/


/* Contenedor General */
.registro-container {
   width: 100%;
   max-width: 1200px;
   /*margin: auto;*/
   padding: 20px;
}

.registro-titulo {
   text-align: center;
   color: var(--azul-fuerte);
   margin-bottom: 10px;
}

/* Lista de Registros */
.registro-lista {
   display: flex;
   flex-direction: column;
   gap: 1rem;

}

/* Tarjeta de Registro */
.registro-card {
   border-radius: 10px;
   background: white;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease-in-out;
}

/* Resumen del Registro */
.registro-resumen {
   cursor: pointer;
   padding: 10px;
   font-size: 1.1rem;
   border-radius: 5px;
   background: var(--azul-fuerte);
   color: white;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: background 0.3s;
}

.registro-resumen:hover {
   background: var(--azul-medio);
}

/* Fecha en Blanco */
.registro-fecha {
   color: white;
   font-weight: bold;
}

/* Botón de Editar */
.registro-boton {
   background: var(--amarillo-logo);
   color: black;
   border: none;
   padding: 5px 10px;
   border-radius: 5px;
   cursor: pointer;
   transition: background 0.3s;
}

.registro-boton:hover {
   background: var(--azul-fuerte);
   color: white;
}

.borrar-boton {
   background: var(--rojo-borrar);
   color: rgb(255, 255, 255);
   border: none;
   padding: 5px 10px;
   border-radius: 5px;
   cursor: pointer;
   transition: background 0.3s;
}

.borrar-boton:hover {
   background: var(--azul-oscuro);
   color: white;
}

/* Información del Registro */
.registro-info {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   padding: 1rem;
   background: var(--gris-suave-fondo);
   border-radius: 5px;
}

/* Sección en Recuadro */
.registro-seccion {
   background: white;
   padding: 10px;
   border-radius: 5px;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
   flex: 1 1 200px;
   min-width: 180px;
}

/* Subtítulos */
.registro-subtitulo {
   color: var(--azul-fuerte);
   margin-bottom: 5px;
}

/* Observación ocupa toda la fila */
.registro-observacion {
   flex: 1 1 100%;
}

/* Mensaje cuando no hay registros */
.registro-mensaje {
   text-align: center;
   color: var(--rojo);
   font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
   .registro-info {
      flex-direction: column;
   }

   .altura-adaptable {
      min-height: min-content;
   }
}



/*FIN REGISTRO HISTORIAL FITOSANITARIO*/



/*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;
   cursor: pointer;
   transition: .3s;
   user-select: none;
}

.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-oscuro);
   outline: 1px solid #a7c8e9d0;
   border-radius: .3rem;
}

.btn-t {
   background-color: transparent;
   color: #484848;
   font-size: 1.1rem;
   font-weight: bold;
}

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

.btn-p:where(:hover, :focus) {
   background-color: white;
   color: var(--negro) !important;
}



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

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

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

.seleccionado {
   background-color: rgb(97, 136, 194);
   transition: background-color 0.5s ease;
   color: white !important;
}



.deseleccionado {
   background-color: whitesmoke;
   transition: background-color 0.5s ease;
}

/*Dialogs*/
#showdialog {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: rgb(0 0 0 / .3);
   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;
   box-shadow: rgba(0, 0, 0, 0.2) 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: rgb(255 255 255 / 1);
   border: none;
   fill: var(--gris);
   width: 2rem;
   height: 2rem;
   position: relative;
   top: -1.2dvh;
   right: -.8dvw;
}


/* Acordeones */
details {
   border: 1px solid #aaa;
   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: whitesmoke;
   animation: .3s desplegando 1 ease-in;
}

details[open] summary {
   border-bottom: 1px solid #aaa;
   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;
   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 {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: fit-content;
   font-style: italic;
   outline: thick double #282828;
   border-radius: .4rem;
   padding: .4rem;
}

.contenedor-crud {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 1rem;
   background-color: white;
   padding: .5rem;
   box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
   border-radius: .5rem;
   min-width: 20rem;
   max-width: fit-content;
}


contenedor-crud :is(a, button) {
   all: unset;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 1.5rem;
   height: 1.5rem;
   background-color: white;
   border-radius: 50%;
   padding: .4rem;
   box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
   transition: .4s;
   border: none;
   cursor: pointer;
   margin: 0;
}

.contenedor-crud :is(a, button):where(:hover, :focus) {
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.error-message {
   font-size: 1rem;
   color: white;
   background-color: var(--rojo);
   margin-top: 0.5rem;
   animation: invalido 0.5s ease;
   width: 16rem;
   padding: .3rem;
   border-radius: .4rem;
}

.input-error {
   border: 1px solid red;
}

/*******************************************************************************
 *                                  MARK:[Footer]                              *
 *******************************************************************************/
#version {
   display: flex;
   width: 100%;
   justify-content: center;
   position: fixed;
   bottom: 0;
   color: #484848;
   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;
}

/*******************************************************************************
 *                                MARK:[Responsive]                            *
 *******************************************************************************/

@media screen and (max-width:720px) {
   .caja {
      width: 100%;
   }

   .caja-media {
      width: 90%;
   }

   .btn-p,
   .btn-s,
   .btn-t,
   .btn-d {
      font-size: 1rem;
   }

   .gap1 {
      gap: .5rem;
   }

   #formulario .flex.row {
      flex-direction: column;
   }

   main .flex.row {
      flex-direction: column;
   }

   #formulario label .flex.row {
      flex-direction: row;
   }

   #formulario>section {
      width: auto;
   }

   #formulario h4 {
      text-align: center;
   }

   textarea {
      width: 100%;
      max-width: 15rem;
   }
}

/*******************************************************************************
 *                              MARK:[Ayuda Modal]                             *
 *******************************************************************************/
#btn-ayuda {
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--azul-fuerte), var(--azul-medio));
   border: none;
   border-radius: 50%;
   width: 2.5rem;
   height: 2.5rem;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(0, 123, 190, 0.3);
}

#btn-ayuda:hover {
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(0, 123, 190, 0.5);
}

#btn-ayuda svg {
   width: 1.4rem;
   height: 1.4rem;
   fill: white;
}

.modal-ayuda {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.modal-ayuda-contenido {
   background: white;
   border-radius: 1rem;
   padding: 2rem;
   max-width: 600px;
   width: 90%;
   max-height: 80vh;
   overflow-y: auto;
   position: relative;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
   animation: slideUp 0.3s ease;
}

@keyframes slideUp {
   from {
      transform: translateY(20px);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}

.modal-ayuda-contenido h2 {
   margin-top: 0;
   color: var(--azul-oscuro);
   border-bottom: 2px solid var(--azul-suave);
   padding-bottom: 0.5rem;
   margin-bottom: 1.5rem;
}

.modal-ayuda-cerrar {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: none;
   border: none;
   font-size: 2rem;
   cursor: pointer;
   color: #666;
   line-height: 1;
   transition: color 0.2s;
}

.modal-ayuda-cerrar:hover {
   color: var(--rojo);
}

.ayuda-seccion {
   margin-bottom: 1.5rem;
   padding: 1rem;
   background: var(--gris-suave-fondo);
   border-radius: 0.5rem;
   border-left: 4px solid var(--azul-fuerte);
}

.ayuda-seccion h3 {
   margin: 0 0 0.5rem 0;
   color: var(--azul-oscuro);
   font-size: 1.1rem;
}

.ayuda-seccion p {
   margin: 0;
   color: #333;
   line-height: 1.6;
}

.ayuda-seccion ul {
   margin: 0.5rem 0 0 0;
   padding-left: 1.5rem;
}

.ayuda-seccion li {
   margin-bottom: 0.3rem;
   color: #333;
}

@media (max-width: 600px) {
   .modal-ayuda-contenido {
      padding: 1.5rem;
      margin: 1rem;
   }

   .ayuda-seccion {
      padding: 0.75rem;
   }
}

/*******************************************************************************
 *                         MARK:[Archivos Adjuntos]                            *
 *******************************************************************************/
.archivos-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   padding: 1rem;
   justify-content: center;
}

.archivo-item {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   background: var(--gris-suave-fondo);
   border-radius: 0.5rem;
   padding: 0.75rem;
   min-width: 120px;
   max-width: 180px;
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.archivo-item:hover {
   transform: translateY(-3px);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.archivo-item img {
   max-width: 100%;
   max-height: 120px;
   border-radius: 0.3rem;
   cursor: pointer;
   transition: transform 0.2s;
}

.archivo-item img:hover {
   transform: scale(1.05);
}

.archivo-item .archivo-nombre {
   font-size: 0.75rem;
   color: #666;
   text-align: center;
   margin-top: 0.5rem;
   word-break: break-word;
   max-width: 100%;
}

.archivo-item .archivo-icono {
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
   margin-bottom: 0.5rem;
}

.archivo-item .archivo-icono.pdf {
   color: #d32f2f;
}

.archivo-item .archivo-icono.word {
   color: #2b579a;
}

.archivo-item .archivo-icono.excel {
   color: #217346;
}

.archivo-item .archivo-icono.imagen {
   color: #4caf50;
}

.archivo-item .archivo-icono.default {
   color: #757575;
}

.archivo-eliminar {
   position: absolute;
   top: -10px;
   right: -10px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--rojo-borrar, #e53935);
   color: white;
   border: 2px solid white;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   font-weight: bold;
   transition: all 0.2s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   z-index: 100;
   /* Área de clic más grande */
   padding: 0;
   line-height: 1;
}

.archivo-eliminar:hover {
   background: #b71c1c;
   transform: scale(1.2);
}

.archivo-eliminar:active {
   transform: scale(0.95);
   background: #c62828;
}

.archivo-link {
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.archivo-link:hover {
   color: var(--azul-fuerte);
}

/* Lightbox para imágenes */
.lightbox {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 2000;
   cursor: pointer;
}

.lightbox.activo {
   display: flex;
   animation: fadeIn 0.3s ease;
}

.lightbox img {
   max-width: 90%;
   max-height: 90%;
   border-radius: 0.5rem;
   box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
}

.lightbox-cerrar {
   position: absolute;
   top: 20px;
   right: 30px;
   font-size: 3rem;
   color: white;
   cursor: pointer;
   transition: transform 0.2s;
}

.lightbox-cerrar:hover {
   transform: scale(1.2);
}

/* Área de drop para archivos */
.archivo-dropzone {
   border: 2px dashed var(--azul-suave);
   border-radius: 0.5rem;
   padding: 2rem;
   text-align: center;
   transition: all 0.3s ease;
   cursor: pointer;
   background: rgba(0, 123, 190, 0.05);
}

.archivo-dropzone:hover,
.archivo-dropzone.dragover {
   border-color: var(--azul-fuerte);
   background: rgba(0, 123, 190, 0.1);
}

.archivo-dropzone svg {
   width: 3rem;
   height: 3rem;
   fill: var(--azul-medio);
   margin-bottom: 0.5rem;
}

.archivo-dropzone p {
   margin: 0;
   color: #666;
}

.archivo-dropzone .texto-principal {
   font-weight: bold;
   color: var(--azul-oscuro);
}

/* Animación de eliminación */
@keyframes eliminarArchivo {
   0% {
      opacity: 1;
      transform: scale(1);
   }

   100% {
      opacity: 0;
      transform: scale(0.5);
   }
}

.archivo-eliminando {
   animation: eliminarArchivo 0.3s ease forwards;
}

/* Badge para archivos nuevos (no guardados) */
.archivo-nuevo {
   border: 2px dashed var(--azul-medio, #2196f3);
   background: rgba(33, 150, 243, 0.1);
}

.archivo-nuevo-badge {
   position: absolute;
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--verde, #4caf50);
   color: white;
   font-size: 0.6rem;
   font-weight: bold;
   padding: 2px 8px;
   border-radius: 10px;
   text-transform: uppercase;
}

/* Archivo guardado */
.archivo-guardado {
   border: 2px solid var(--verde, #4caf50);
   background: rgba(76, 175, 80, 0.1);
}

/*******************************************************************************
 *                    [Secciones de Registros con Títulos]                     *
 *******************************************************************************/
.seccion-registros {
   width: 100%;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
}

.seccion-registros-titulo {
   margin: 0 0 0.5rem 0;
   padding: 0.6rem 1rem;
   border-radius: 0.5rem;
   font-size: 1rem;
   font-weight: 600;
   color: white;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

/* Colores por tipo de registro */
.seccion-registros-titulo.fertilizantes {
   background: linear-gradient(135deg, #4caf50, #388e3c);
}

.seccion-registros-titulo.fitosanitarios {
   background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}

.seccion-registros-titulo.residuos {
   background: linear-gradient(135deg, #ff9800, #f57c00);
}

.seccion-registros-titulo.semillas {
   background: linear-gradient(135deg, #8bc34a, #689f38);
}

.seccion-registros-titulo.postcosecha {
   background: linear-gradient(135deg, #00bcd4, #0097a7);
}

.seccion-registros-titulo.almacenamiento {
   background: linear-gradient(135deg, #607d8b, #455a64);
}