/* ESTILO ACCESO */
.contenedor-formulario {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center;   /* Centrado vertical (opcional, pero común) */
  min-height: 88vh;     /* Ocupa al menos el 100% del alto de la ventana */
  /* Si el contenido excede el 100vh, el contenedor crecerá y aparecerá scroll */
  background-color: #e9ecef;
  padding: 20px; /* Asegura que haya algo de espacio si el formulario toca los bordes */
  box-sizing: border-box; /* Importante para que padding no se sume al height */
}
.formulario-acceso-flex {
  width: 350px; /* Ancho deseado para el formulario */
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  text-align: center; /* Para centrar el texto dentro del formulario si es necesario */
}

/* Estilos de los campos del formulario (similares a los del ejemplo anterior) */
.formulario-acceso-flex h2 {
    margin-bottom: 20px;
    color: #333;
}

.formulario-acceso-flex label {
    display: block;
    margin-bottom: 8px;
    text-align: left;
    font-weight: bold;
}

.formulario-acceso-flex input {
    width: calc(100% - 22px); /* Ancho ajustado por padding y borde */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.formulario-acceso-flex button {
    width: 100%;
    padding: 12px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.formulario-acceso-flex button:hover {
    background-color: #218838;
}
.ImgDD{
    width: 60px;
    height: 60px;
    border: none;
    padding: 0;
    margin: auto;
    vertical-align: middle;
}


body {
    font-family: Arial, sans-serif;
    margin: 40px;
    text-align: center;
    background-color: #f8f9fa; /* Fondo suave para todo el cuerpo */
    color: #343a40;
}
h2 {
    font-size: 1.8rem;
    color: #9AC14C;
    font-family: verdana;
    position: 15px;
}
.buttonFormulario { /* Estilo para el botón de generar resoluciones */
    background-color: #28a745; /* Un verde vibrante */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}
.buttonFormulario:hover {
    background-color: #218838; /* Un verde más oscuro al pasar el ratón */
    transform: translateY(-2px);
}
.ImgMenu {
    width: 35px;
    height: 35px;
    vertical-align: middle;
}
.ImgTd {
    width: 27px;
    height: 27px;
    vertical-align: middle;
}
.divTitulo {
    margin-bottom: 20px;
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    max-width: 1400px; /* Ancho máximo para el título */
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    vertical-align: middle;
    text-transform: uppercase;

}
.tablaTitulo {
    width: 100%;
    border-collapse: collapse;
}
.tablaTitulo td {
    padding: 10px;
    vertical-align: middle;
}
.tablaTitulo .right {
    text-align: right;
}
.divTabla {
    margin: 0 auto;
    max-width: 1400px; /* Ancho máximo para la tabla de datos */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background-color: #ffffff; /* Fondo blanco para la tabla */
    font-size: .9rem;
}
.tabla {
    width: 100%;
    border-collapse: collapse;
}
.tabla th, .tabla td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.tabla th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}

.tabla th.pendiente {
    background-color: #EFE4B0;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}

.tabla th.proceso {
    background-color: #CBDEA7;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}

.tabla tr:last-child td {
    border-bottom: none;
}
.tabla .center {
    text-align: center;
}
.tabla .right { /* Asegura que el alineamiento a la derecha funcione en la tabla de datos */
    text-align: right;
}
.tabla .left { /* Asegura que el alineamiento a la izquierda funcione en la tabla de datos */
    text-align: left;
}

.ofpa { /* Estilo para los campos de texto OFPA */
    width: 50px; /* Ancho fijo para el campo OFPA */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /*text-align: center;*/
}

.corto { /* Estilo para los campos de texto celular, correo */
    width: 200px; /* Ancho fijo para el campo corto */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em; /* Tamaño de fuente estándar, legible */
    /*text-align: center;*/
}

.tabla a {
    text-decoration:none;
    font-weight: bold;
    color: #00F;
}

.tabla a:hover {
    color: #0080C0;
}
a {
    text-decoration:none;
    font-weight: bold;
    color: #00F;
}

a:hover {
    color: #0080C0;
}

.download-button {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    text-decoration: none; /* Para enlaces */
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-top: 20px; /* Espacio para el botón */
}
.download-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.large-button {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    width: 60%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    text-decoration: none; /* Para enlaces */
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-top: 20px; /* Espacio para el botón */
}
.large-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.message {
    margin-top: 20px;
    padding: 15px;
    background-color: #e9f7ef;
    border: 1px solid #d4edda;
    color: #155724;
    border-radius: 5px;
    display: none; /* Oculto por defecto */
}
/* Botón pequeño - Ideal para acciones secundarias o dentro de tablas/listas */
.buttonSmall {
    background-color: #6c757d; /* Un gris neutro, puedes ajustarlo */
    color: white;
    padding: 6px 12px; /* Menor padding para hacerlo pequeño */
    border: none;
    border-radius: 5px; /* Bordes ligeramente más pequeños */
    cursor: pointer;
    font-size: 0.85em; /* Tamaño de fuente más pequeño */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra más sutil */
    vertical-align: middle; /* Útil para alinear con texto o íconos */
}

.buttonSmall:hover {
    background-color: #5a6268; /* Gris más oscuro al pasar el ratón */
    transform: translateY(-1px); /* Menor movimiento al pasar el ratón */
}

/* Opcional: Variantes de color para el botón pequeño */
.buttonSmall.primary {
    background-color: #007bff; /* Azul */
}
.buttonSmall.primary:hover {
    background-color: #0056b3;
}

.buttonSmall.danger {
    background-color: #dc3545; /* Rojo */
}
.buttonSmall.danger:hover {
    background-color: #c82333;
}

.buttonSmall.success {
    background-color: #28a745; /* Verde (similar a tu buttonFormulario) */
}
.buttonSmall.success:hover {
    background-color: #218838;
}

/* Botón pequeño - Ideal para acciones secundarias o dentro de tablas/listas */
.buttonCodigo {
    background-color: white; /* Un gris neutro, puedes ajustarlo */
    color: white;
    padding: 6px 12px; /* Menor padding para hacerlo pequeño */
    border: none;
    border-radius: 5px; /* Bordes ligeramente más pequeños */
    cursor: pointer;
    font-size: 0.85em; /* Tamaño de fuente más pequeño */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra más sutil */
    vertical-align: middle; /* Útil para alinear con texto o íconos */
}

.buttonCodigo:hover {
    background-color: #5a6268; /* Gris más oscuro al pasar el ratón */
    transform: translateY(-1px); /* Menor movimiento al pasar el ratón */
}

/* Opcional: Variantes de color para el botón pequeño */
.buttonCodigo.primary {
    background-color: #007bff; /* Azul */
}
.buttonCodigo.primary:hover {
    background-color: #0056b3;
}

.buttonCodigo.danger {
    background-color: #dc3545; /* Rojo */
}
.buttonCodigo.danger:hover {
    background-color: #c82333;
}

.buttonCodigo.success {
    background-color: #28a745; /* Verde (similar a tu buttonFormulario) */
}
.buttonCodigo.success:hover {
    background-color: #218838;
}
input[type="file"] {
    width: 100%; /* Ocupa todo el ancho disponible de su contenedor */
    padding: 6px 8px; /* Espaciado interno para comodidad de lectura */
    margin-bottom: 5px; /* Espacio debajo de cada campo para separación */
    border: 1px solid #ced4da; /* Borde sutil para un look limpio */
    border-radius: 6px; /* Bordes suavemente redondeados */
    box-sizing: border-box; /* Asegura que el padding y el border no aumenten el ancho total */
    font-size: 1em; /* Tamaño de fuente estándar, legible */
    color: #495057; /* Color de texto oscuro para buena legibilidad */
    background-color: #ffffff; /* Fondo blanco */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transición suave para efectos al enfocar */

    /* Elimina estilos por defecto del navegador para una apariencia más consistente */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* --- Estilos para Campos de Formulario (Input y Select) --- */
/* Estilos base para todos los inputs de texto y selectores, EXCEPTO los que tengan la clase 'ofpa' o 'corto' */
input[type="text"]:not(.ofpa, .corto),
input[type="password"],
select {
    width: 65%;
    padding: 10px 12px;
    margin-bottom: 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    color: #495057;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Efecto visual al enfocar (cuando el usuario hace clic o navega con tab) */
input[type="text"]:not(.ofpa):focus, /* <-- AÑADIDO: :not(.ofpa) */
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
select:focus {
    border-color: #80bdff; /* Borde azul brillante para indicar que está activo */
    outline: 0; /* Elimina el contorno de enfoque predeterminado del navegador */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra suave azulada */
}

/* Estilo específico para el elemento <select> para personalizar la flecha */
select {
    /* Personaliza la flecha del desplegable.
       Esto usa un SVG codificado en base64. Puedes reemplazarlo con tu propia imagen SVG. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="%23343a40"><path d="M16 20l-8-8 1.41-1.41L16 17.17l6.59-6.58L24 12z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center; /* Posiciona la flecha a la derecha, centrada verticalmente */
    background-size: 16px 16px; /* Tamaño de la flecha */
    padding-right: 30px; /* Asegura suficiente espacio para que la flecha no se superponga con el texto */
}

/* Estilos para campos deshabilitados (opcional, pero buena práctica) */
input[type="text"]:disabled:not(.ofpa), /* <-- AÑADIDO: :not(.ofpa) */
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="date"]:disabled,
input[type="file"]:disabled,
select:disabled {
    background-color: #e9ecef; /* Fondo más claro para indicar inactividad */
    opacity: 0.7; /* Ligeramente transparente */
    cursor: not-allowed; /* Cambia el cursor para indicar que no se puede interactuar */
}
/* --- Estilos para textarea --- */

textarea {
    width: 65%; /* Ocupa todo el ancho disponible de su contenedor */
    padding: 10px 12px; /* Espaciado interno para que el texto no esté pegado a los bordes */
    margin-bottom: 15px; /* Espacio debajo del textarea para separación */
    border: 1px solid #ced4da; /* Borde sutil y claro */
    border-radius: 6px; /* Bordes suavemente redondeados */
    box-sizing: border-box; /* Asegura que padding y border no aumenten el ancho total */
    font-size: 1em; /* Tamaño de fuente estándar, legible */
    color: #495057; /* Color de texto oscuro para buena legibilidad */
    background-color: #ffffff; /* Fondo blanco */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transición suave al enfocar */
    min-height: 80px; /* Altura mínima para que sea visible, ajusta según necesidad */
    resize: vertical; /* Permite redimensionar solo verticalmente (horizontalmente puede romper el layout) */
    /* Otros valores para resize:
       - none: No permite redimensionar
       - both: Permite redimensionar horizontal y verticalmente
       - horizontal: Permite redimensionar solo horizontalmente
    */
    font-family: Arial, sans-serif; /* Asegura que la fuente sea consistente con el body */
}

/* Efecto visual al enfocar el textarea */
textarea:focus {
    border-color: #80bdff; /* Borde azul brillante para indicar que está activo */
    outline: 0; /* Elimina el contorno de enfoque predeterminado del navegador */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra suave azulada */
}

/* Estilos para textarea deshabilitado (opcional) */
textarea:disabled {
    background-color: #e9ecef; /* Fondo más claro para indicar inactividad */
    opacity: 0.7; /* Ligeramente transparente */
    cursor: not-allowed; /* Cambia el cursor para indicar que no se puede interactuar */
}

/* Estilos para campos de solo lectura */
input[type="text"][readonly] {
    background-color: #e9ecef; /* Un gris claro similar al de tu contenedor-formulario */
    opacity: 1; /* Asegura que no se vea transparente si ya tenías una opacidad definida */
    cursor: default; /* Cambia el cursor para indicar que no es editable */
}

/* ESTILO PARA CONTENEDOR DE CUADRADOS CON ENLACES */
.contenedor-cuadrados {
    /* Usa Flexbox para alinear los elementos en una fila */
    display: flex;
    /* Permite que los elementos se envuelvan a la siguiente línea si no hay suficiente espacio */
    flex-wrap: wrap; 
    /* Centra los elementos horizontalmente */
    justify-content: center;
    /* Espacio entre los elementos */
    gap: 20px; 
    /* Ancho máximo del contenedor para que no se extienda por toda la pantalla */
    max-width: 1200px;
    margin: 20px auto; /* Centra el contenedor completo */
    padding: 5px;
    background-color: #f8f9fa;
}

/* ESTILO PARA CADA CUADRADO INDIVIDUAL */
.cuadrado-enlace {
    /* Flex-grow y flex-shrink permiten que el elemento crezca y se encoja para adaptarse */
    flex: 1 1 200px; 
    /* El "1" de flex-grow le permite crecer, el "1" de flex-shrink le permite encogerse, y "200px" es el ancho base */
    
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    /* Asegura que el contenido esté centrado */
    text-align: center; 
    padding: 20px;
    /* Permite usar Flexbox para centrar el contenido verticalmente si es necesario */
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
    /* Animación suave para los efectos */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ESTILO DEL CONTENIDO DENTRO DEL CUADRADO */
.cuadrado-enlace a {
    text-decoration: none;
    color: #495057;
    font-weight: bold;
    vertical-align: middle;
    font-size: 1em;
    display: block; /* Hace que el enlace ocupe todo el cuadrado */
    width: 100%;
    height: 100%;
}

/* EFECTOS INTERACTIVOS */
.cuadrado-enlace:hover {
    /* Efecto de elevación al pasar el ratón */
    transform: translateY(-5px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* ESTILO PARA IMÁGENES O ÍCONOS DENTRO DEL CUADRADO */
.cuadrado-enlace img {
    max-width: 80px;
    max-height: 80px;
    margin-bottom: 10px;
}

.alerta-error {
    /* 1. Ancho: Un cuarto (25%) del ancho del contenedor (usualmente la pantalla). */
    width: 25%; 
    
    /* 2. Centrado Horizontal: 'margin: 0 auto;' centra el elemento en su contenedor. */
    /* '0' es para el margen superior/inferior. 'auto' es para el izquierdo/derecho. */
    margin: 0 auto;
    
    /* 3. Estilo básico para el mensaje de error */
    padding: 15px;
    border: 1px solid #dc3545; /* Borde rojo */
    background-color: #f8d7da; /* Fondo suave rosado */
    color: #721c24; /* Texto rojo oscuro */
    border-radius: 5px;
    text-align: center; /* Centra el texto dentro del div */
    font-weight: bold;
}

.alerta-exito {
    /* Opcional: Estilo para el mensaje de éxito */
    width: 25%;
    margin: 0 auto;
    padding: 15px;
    border: 1px solid #28a745; 
    background-color: #d4edda;
    color: #155724;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

/* ==========================================
   MODIFICACIÓN PARA CARGA Y BLOQUEO
   ========================================== */

/* 1. Al enviar el formulario, el botón se bloquea visualmente */
.buttonFormulario:disabled, 
.buttonSmall:disabled, 
.download-button:disabled, 
.large-button:disabled {
    background-color: #a0a0a0 !important; /* Color gris de bloqueo */
    cursor: not-allowed !important;
    transform: none !important; /* Evita que el botón se mueva al pasar el mouse */
    opacity: 0.8;
    box-shadow: none !important;
}

/* 2. Estilo para el GIF de carga (debe estar dentro del botón) */
.img-loading {
    display: none; /* Oculto por defecto */
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px; /* Espacio entre el GIF y el texto */
}

/* 3. Clase para mostrar el GIF mediante JavaScript */
.show-loading {
    display: inline-block !important;
}

/* 4. Ajuste para que el texto y el GIF se alineen correctamente */
.buttonFormulario, .buttonSmall, .download-button, .large-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}