/* ============================================================================
   BLOQUE: Hoja de estilos para la pantalla de manejo de errores
   DESCRIPCION: Estilos profesionales y modernos tipo Flash HTML para mostrar
   los errores del sistema. Usa colores brillantes (azul, verde, rojo, morado
   y negro) sin grises, segun los lineamientos del Sistema Multi Empresas.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   BLOQUE: Reset general y configuracion base del documento
   Quita margenes y paddings por defecto del navegador
   ---------------------------------------------------------------------------- */
* {
    margin: 0;                              /* Elimina margenes por defecto */
    padding: 0;                             /* Elimina paddings por defecto */
    box-sizing: border-box;                 /* Incluye border y padding en el ancho */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Estilo del cuerpo del documento
   Fondo con degradado moderno azul-morado y tipografia profesional
   ---------------------------------------------------------------------------- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna */
    min-height: 100vh;                      /* Altura minima de pantalla completa */
    /* Degradado de fondo brillante de azul a morado */
    background: linear-gradient(135deg, #1e3a8a 0%, #6b21a8 50%, #1e3a8a 100%);
    background-size: 400% 400%;             /* Tamaño grande para animacion */
    animation: gradientFlow 15s ease infinite; /* Animacion suave del fondo */
    display: flex;                          /* Activa flexbox para centrar */
    align-items: center;                    /* Centra verticalmente */
    justify-content: center;                /* Centra horizontalmente */
    padding: 20px;                          /* Espacio en los bordes */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Animacion del degradado de fondo
   Hace que el fondo se mueva suavemente para dar efecto profesional
   ---------------------------------------------------------------------------- */
@keyframes gradientFlow {
    0%   { background-position: 0% 50%; }   /* Inicio del movimiento */
    50%  { background-position: 100% 50%; } /* Mitad del movimiento */
    100% { background-position: 0% 50%; }   /* Final igual al inicio */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Contenedor principal centrado
   Limita el ancho maximo de la tarjeta de error
   ---------------------------------------------------------------------------- */
.error-container {
    width: 100%;                            /* Ancho completo del padre */
    max-width: 700px;                       /* Ancho maximo limitado */
    animation: slideUp 0.6s ease-out;       /* Animacion al cargar */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Animacion de entrada de la tarjeta
   La tarjeta sube y aparece suavemente al cargar la pantalla
   ---------------------------------------------------------------------------- */
@keyframes slideUp {
    from {
        opacity: 0;                         /* Inicia transparente */
        transform: translateY(40px);        /* Inicia 40px abajo */
    }
    to {
        opacity: 1;                         /* Termina visible */
        transform: translateY(0);           /* Termina en su posicion */
    }
}

/* ----------------------------------------------------------------------------
   BLOQUE: Tarjeta principal de error
   Fondo blanco con sombra fuerte y bordes redondeados
   ---------------------------------------------------------------------------- */
.error-card {
    background: #FFFFFF;                    /* Fondo blanco puro */
    border-radius: 20px;                    /* Bordes redondeados modernos */
    overflow: hidden;                       /* Oculta contenido que se sale */
    /* Sombra grande y profunda para dar profundidad */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    /* Borde superior brillante azul */
    border-top: 6px solid #2563EB;
}

/* ----------------------------------------------------------------------------
   BLOQUE: Encabezado de la tarjeta de error
   Fondo rojo brillante con icono y titulo grandes
   ---------------------------------------------------------------------------- */
.error-header {
    /* Degradado rojo brillante para el header */
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
    padding: 35px 30px;                     /* Espaciado interno generoso */
    text-align: center;                     /* Centra todo el contenido */
    color: #FFFFFF;                         /* Texto blanco */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Icono de alerta animado
   Triangulo SVG con animacion de pulso
   ---------------------------------------------------------------------------- */
.error-icon {
    width: 80px;                            /* Ancho del icono */
    height: 80px;                           /* Alto del icono */
    margin: 0 auto 20px;                    /* Centrado horizontal */
    animation: pulse 2s ease-in-out infinite; /* Animacion de pulso continuo */
}

/* ----------------------------------------------------------------------------
   BLOQUE: SVG dentro del icono de alerta
   Asegura que el SVG tome el tamaño completo del contenedor
   ---------------------------------------------------------------------------- */
.error-icon svg {
    width: 100%;                            /* Ancho completo */
    height: 100%;                           /* Alto completo */
    /* Sombra para resaltar el icono */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* ----------------------------------------------------------------------------
   BLOQUE: Animacion de pulso para el icono
   El icono crece y se encoge suavemente para llamar la atencion
   ---------------------------------------------------------------------------- */
@keyframes pulse {
    0%, 100% { transform: scale(1); }       /* Tamaño normal */
    50%      { transform: scale(1.1); }     /* Tamaño aumentado */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Titulo principal del error
   Texto grande, blanco y en negrita
   ---------------------------------------------------------------------------- */
.error-title {
    font-size: 28px;                        /* Tamaño grande del titulo */
    font-weight: 700;                       /* Negrita fuerte */
    margin-bottom: 8px;                     /* Espacio debajo */
    letter-spacing: 0.5px;                  /* Espaciado entre letras */
    /* Sombra de texto para mejor lectura */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------------------------------
   BLOQUE: Subtitulo del encabezado
   Texto descriptivo debajo del titulo
   ---------------------------------------------------------------------------- */
.error-subtitle {
    font-size: 15px;                        /* Tamaño mediano */
    opacity: 0.95;                          /* Ligeramente transparente */
    font-weight: 400;                       /* Peso normal */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Cuerpo de la tarjeta con detalles del error
   Contenedor de toda la informacion tecnica del error
   ---------------------------------------------------------------------------- */
.error-body {
    padding: 35px 30px;                     /* Espaciado interno */
    background: #FFFFFF;                    /* Fondo blanco */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Cada fila de informacion del error
   Espaciado entre cada bloque de datos
   ---------------------------------------------------------------------------- */
.error-row {
    margin-bottom: 22px;                    /* Espacio entre filas */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Fila doble para fecha y codigo de referencia
   Muestra dos columnas en la misma linea usando grid de dos columnas
   ---------------------------------------------------------------------------- */
.error-row-double {
    display: grid;                          /* Activa grid en lugar de flex */
    grid-template-columns: 1fr 1fr;         /* Dos columnas iguales del 50% */
    gap: 15px;                              /* Espacio entre columnas */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Cada mitad de la fila doble
   Cada columna toma exactamente el 50% del ancho de su contenedor
   ---------------------------------------------------------------------------- */
.error-row-half {
    width: 100%;                            /* Ancho completo de su columna grid */
    min-width: 0;                           /* Permite que el contenido se ajuste */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Etiqueta de cada campo de informacion
   Pequeña etiqueta de color encima de cada dato
   ---------------------------------------------------------------------------- */
.error-label {
    display: inline-block;                  /* Permite ancho y padding */
    padding: 5px 12px;                      /* Espaciado interno */
    border-radius: 6px;                     /* Bordes redondeados */
    font-size: 11px;                        /* Tamaño pequeño */
    font-weight: 700;                       /* Negrita fuerte */
    text-transform: uppercase;              /* Todo en mayusculas */
    letter-spacing: 0.8px;                  /* Espaciado entre letras */
    color: #FFFFFF;                         /* Texto blanco */
    margin-bottom: 8px;                     /* Espacio debajo */
    /* Sombra suave en la etiqueta */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------------------------------
   BLOQUE: Variantes de color para las etiquetas
   Azul, rojo, morado, verde y negro brillantes segun el tipo de informacion
   ---------------------------------------------------------------------------- */
.label-blue   { background: #2563EB; }      /* Azul brillante para tipo */
.label-red    { background: #DC2626; }      /* Rojo brillante para mensaje */
.label-purple { background: #7C3AED; }      /* Morado brillante para razon */
.label-green  { background: #16A34A; }      /* Verde brillante para fecha */
.label-black  { background: #000000; }      /* Negro brillante para codigo */

/* ----------------------------------------------------------------------------
   BLOQUE: Valor de cada campo de informacion
   Caja con el contenido del dato del error
   ---------------------------------------------------------------------------- */
.error-value {
    background: #F8FAFC;                    /* Fondo muy claro casi blanco */
    border-left: 4px solid #2563EB;         /* Borde azul a la izquierda */
    padding: 14px 18px;                     /* Espaciado interno */
    border-radius: 8px;                     /* Bordes redondeados */
    color: #000000;                         /* Texto negro brillante */
    font-size: 15px;                        /* Tamaño de fuente */
    line-height: 1.5;                       /* Altura de linea legible */
    word-wrap: break-word;                  /* Rompe palabras largas */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Estilo especial para el mensaje del error
   Resalta el mensaje principal con borde rojo
   ---------------------------------------------------------------------------- */
.error-value-message {
    border-left-color: #DC2626;             /* Borde rojo en lugar de azul */
    font-weight: 600;                       /* Texto seminegrita */
    background: #FEF2F2;                    /* Fondo levemente rojizo */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Tamaño reducido para datos secundarios
   Para fecha y codigo de referencia que son mas cortos
   ---------------------------------------------------------------------------- */
.error-value-small {
    font-size: 13px;                        /* Tamaño mas pequeño */
    padding: 12px 15px;                     /* Padding reducido */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Fuente monoespaciada para el codigo de referencia
   Tipo terminal/consola para resaltar que es un codigo tecnico
   ---------------------------------------------------------------------------- */
.error-value-mono {
    font-family: 'Courier New', Consolas, monospace; /* Fuente monoespaciada */
    font-weight: 700;                       /* Negrita */
    color: #000000;                         /* Negro brillante */
    letter-spacing: 1px;                    /* Espaciado entre caracteres */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Caja informativa con sugerencia para el usuario
   Mensaje de ayuda con fondo azul claro
   ---------------------------------------------------------------------------- */
.error-info-box {
    margin-top: 25px;                       /* Espacio arriba */
    padding: 18px 20px;                     /* Espaciado interno */
    /* Fondo con degradado azul claro */
    background: linear-gradient(135deg, #DBEAFE 0%, #EDE9FE 100%);
    border-left: 4px solid #2563EB;         /* Borde azul a la izquierda */
    border-radius: 8px;                     /* Bordes redondeados */
    color: #000000;                         /* Texto negro brillante */
    font-size: 14px;                        /* Tamaño de fuente */
    line-height: 1.6;                       /* Altura de linea legible */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Texto en negrita dentro del cuadro informativo
   Resalta la pregunta inicial del mensaje
   ---------------------------------------------------------------------------- */
.error-info-box strong {
    display: block;                         /* En su propia linea */
    margin-bottom: 6px;                     /* Espacio debajo */
    color: #1E3A8A;                         /* Azul oscuro brillante */
    font-size: 15px;                        /* Tamaño un poco mayor */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Pie de la tarjeta con el boton de accion
   Contenedor centrado para el boton de regreso
   ---------------------------------------------------------------------------- */
.error-footer {
    padding: 25px 30px 35px;                /* Espaciado generoso */
    background: #FFFFFF;                    /* Fondo blanco */
    text-align: center;                     /* Boton centrado */
    /* Linea superior sutil de separacion */
    border-top: 2px solid #F1F5F9;
}

/* ----------------------------------------------------------------------------
   BLOQUE: Boton "Back to System"
   Boton verde brillante grande con icono y animaciones
   ---------------------------------------------------------------------------- */
.btn-back-system {
    display: inline-flex;                   /* Flexbox horizontal */
    align-items: center;                    /* Centra verticalmente */
    justify-content: center;                /* Centra horizontalmente */
    gap: 10px;                              /* Espacio entre icono y texto */
    /* Degradado verde brillante */
    background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
    color: #FFFFFF;                         /* Texto blanco */
    border: none;                           /* Sin borde */
    padding: 16px 40px;                     /* Padding generoso */
    font-size: 16px;                        /* Tamaño de fuente */
    font-weight: 700;                       /* Negrita */
    border-radius: 12px;                    /* Bordes muy redondeados */
    cursor: pointer;                        /* Cursor de mano */
    /* Transicion suave para todos los efectos */
    transition: all 0.3s ease;
    /* Sombra verde inicial */
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
    text-transform: uppercase;              /* Todo en mayusculas */
    letter-spacing: 1px;                    /* Espaciado entre letras */
    font-family: 'Segoe UI', Tahoma, sans-serif; /* Fuente moderna */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Efecto hover del boton
   Al pasar el mouse, el boton se eleva y crece la sombra
   ---------------------------------------------------------------------------- */
.btn-back-system:hover {
    transform: translateY(-3px);            /* Sube 3 pixeles */
    /* Sombra mas grande al pasar el mouse */
    box-shadow: 0 10px 28px rgba(22, 163, 74, 0.55);
    /* Degradado un poco mas brillante */
    background: linear-gradient(135deg, #15803D 0%, #166534 100%);
}

/* ----------------------------------------------------------------------------
   BLOQUE: Efecto active del boton
   Al hacer clic, el boton se hunde ligeramente
   ---------------------------------------------------------------------------- */
.btn-back-system:active {
    transform: translateY(-1px);            /* Baja un poco */
    /* Sombra reducida al hacer clic */
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}

/* ----------------------------------------------------------------------------
   BLOQUE: Icono dentro del boton
   Tamaño y color del icono SVG de flecha
   ---------------------------------------------------------------------------- */
.btn-icon {
    width: 22px;                            /* Ancho del icono */
    height: 22px;                           /* Alto del icono */
    /* Animacion suave del icono al hover del boton */
    transition: transform 0.3s ease;
}

/* ----------------------------------------------------------------------------
   BLOQUE: Animacion del icono al pasar el mouse por el boton
   La flecha se mueve hacia la izquierda para dar feedback visual
   ---------------------------------------------------------------------------- */
.btn-back-system:hover .btn-icon {
    transform: translateX(-5px);            /* Mueve la flecha 5px a la izquierda */
}

/* ----------------------------------------------------------------------------
   BLOQUE: Diseño responsivo para celulares y tablets
   Ajusta tamaños y espaciados en pantallas chicas
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {

    /* Reduce el padding del header en moviles */
    .error-header {
        padding: 25px 20px;                 /* Padding mas pequeño */
    }

    /* Reduce el tamaño del titulo en moviles */
    .error-title {
        font-size: 22px;                    /* Titulo mas pequeño */
    }

    /* Reduce el tamaño del icono en moviles */
    .error-icon {
        width: 65px;                        /* Icono mas pequeño */
        height: 65px;                       /* Icono mas pequeño */
    }

    /* Reduce el padding del cuerpo en moviles */
    .error-body {
        padding: 25px 20px;                 /* Padding reducido */
    }

    /* Reduce el padding del footer en moviles */
    .error-footer {
        padding: 20px;                      /* Padding reducido */
    }

    /* Hace el boton mas compacto en moviles */
    .btn-back-system {
        padding: 14px 28px;                 /* Padding reducido */
        font-size: 14px;                    /* Texto mas pequeño */
        width: 100%;                        /* Ancho completo en movil */
    }

    /* Apila las columnas dobles en moviles */
    .error-row-double {
        grid-template-columns: 1fr;         /* Una sola columna en movil */
    }
}