/* Pantalla pública, no hereda nada de base.html, por eso define todo desde el fondo */
.ga-fondo {
    min-height: 100vh;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1.25rem 1rem;
}

.ga-contenedor {
    width: 100%;
    max-width: 560px;
}

/* Logo y titulo de la pantalla */
.ga-encabezado {
    text-align: center;
    margin-bottom: 1rem;
}

/* El logo va como bloque para eliminar el espacio de linea que agrega una imagen inline debajo de si misma.
   El margen inferior negativo compensa el borde transparente que trae el PNG alrededor del dibujo. */
.ga-logo {
    display: block;
    height: 120px;
    margin: 0 auto -0.75rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.ga-titulo {
    color: #4b4949;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
}

.ga-subtitulo {
    color: #000000;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Tarjeta blanca donde vive cada vista (inicio, formulario, confirmacion) */
.ga-panel {
    background: #fff;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 20px 45px rgba(11, 31, 58, 0.25);
}

/* Botones grandes de accion, pensados para tocar con el dedo */
.ga-boton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 0;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.ga-boton:last-child {
    margin-bottom: 0;
}

.ga-boton i {
    font-size: 1.15rem;
}

.ga-boton-primario {
    background: linear-gradient(135deg, #123b70, #6982a1);
    color: #fff;
}

.ga-boton-primario:hover {
    filter: brightness(1.08);
}

.ga-boton-secundario {
    background: #e3eefa;
    color: #1e4f8f;
}

.ga-boton-secundario:hover {
    background: #c9d9ec;
}

.ga-boton:disabled {
    opacity: 0.7;
}

/* Boton de volver, dentro del formulario */
.ga-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    color: #1e4f8f;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
    margin-bottom: 1.1rem;
}

/* Grilla del formulario: una columna en celular, dos en pantallas mas anchas */
.ga-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 560px) {
    .ga-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ga-campo label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4a6079;
    margin-bottom: 0.3rem;
}

.ga-campo .form-control,
.ga-campo .form-select {
    border: 1px solid #c9d9ec;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
}

/* Los textos del formulario se ven en mayusculas mientras se escriben; el servidor ademas los guarda en mayusculas */
.ga-campo input[type="text"],
.ga-campo input[type="email"] {
    text-transform: uppercase;
}

/* Links de contacto: el correo es largo y debe poder cortarse dentro de la columna angosta */
.ga-seg-info a {
    word-break: break-all;
    font-weight: 600;
}

/* Aclaracion debajo de un campo (ej: el correo es el canal de comunicacion) */
.ga-ayuda-campo {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #8a5a00;
}

.ga-campo .form-control:focus,
.ga-campo .form-select:focus {
    border-color: #3b82c4;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 196, 0.2);
}

/* Zona de carga de archivos */
.ga-archivos {
    margin-bottom: 1.1rem;
}

.ga-archivos-ayuda {
    font-size: 0.78rem;
    color: #5b7290;
    margin-bottom: 0.6rem;
}

.ga-archivos-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px dashed #c9d9ec;
    border-radius: 12px;
    padding: 1.4rem 1rem;
    color: #1e4f8f;
    font-size: 0.85rem;
    font-weight: 600;
    background: #f3f8fd;
    cursor: pointer;
    text-align: center;
}

.ga-archivos-dropzone i {
    font-size: 1.6rem;
}

.ga-archivos-dropzone:hover {
    background: #e3eefa;
}

.ga-archivos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.ga-archivo-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: #f3f8fd;
    border: 1px solid #e3eefa;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #22354d;
}

.ga-archivo-item i {
    color: #1e4f8f;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Miniatura real para archivos de imagen */
.ga-archivo-miniatura {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.ga-archivo-nombre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ga-archivo-quitar {
    background: none;
    border: 0;
    color: #a11d2b;
    flex-shrink: 0;
    padding: 0.2rem;
    display: flex;
    align-items: center;
}

.ga-archivo-quitar:hover {
    color: #7a1420;
}

/* Mensaje de error del formulario */
.ga-alerta {
    background: #fde3e3;
    color: #a11d2b;
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

/* Vista de confirmacion con el numero de tramite */
.ga-icono-exito {
    font-size: 3rem;
    color: #2ea44f;
    margin-bottom: 0.6rem;
}

.ga-titulo-confirmacion {
    color: #0b1f3a;
    font-weight: 700;
    font-size: 1.3rem;
}

.ga-texto-confirmacion {
    color: #5b7290;
    font-size: 0.88rem;
}

.ga-numero-tramite {
    font-family: monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1e4f8f;
    background: #e3eefa;
    border-radius: 10px;
    padding: 0.7rem;
    margin: 1rem 0 1.25rem;
}

/* Contenedor ancho para la vista de seguimiento, que usa tres columnas en escritorio */
.ga-contenedor-ancho {
    max-width: 1180px;
}

/* Variante del boton volver para cuando queda sobre el fondo azul y no dentro de una tarjeta */
.ga-volver-claro {
    color: #3b4653;
}

/* Grilla del seguimiento: una columna en celular, tres en escritorio (datos | movimientos | informacion) */
.ga-seg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 992px) {
    .ga-seg-grid {
        grid-template-columns: 270px minmax(0, 1fr) 280px;
    }
}

.ga-seg-columna {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Tarjeta base de cada bloque del seguimiento */
.ga-seg-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 20px 45px rgba(11, 31, 58, 0.25);
}

.ga-seg-card-titulo {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0b1f3a;
    margin-bottom: 0.9rem;
}

.ga-seg-card-subtitulo {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4a6079;
    margin: 1rem 0 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px dashed #c9d9ec;
}

/* Tarjeta del numero de tramite */
.ga-seg-etiqueta {
    font-size: 0.75rem;
    color: #5b7290;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ga-seg-tramite {
    font-family: monospace;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: #1e4f8f;
    margin: 0.2rem 0 0.4rem;
}

.ga-seg-inicio {
    font-size: 0.8rem;
    color: #5b7290;
}

/* Lista de datos de la solicitud y de archivos cargados */
.ga-seg-datos,
.ga-seg-archivos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ga-seg-datos li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.88rem;
    color: #22354d;
    word-break: break-word;
}

.ga-seg-datos i {
    color: #1e4f8f;
    font-size: 1rem;
    flex-shrink: 0;
}

.ga-seg-archivos li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #22354d;
}

.ga-seg-archivos i {
    color: #1e4f8f;
    flex-shrink: 0;
}

.ga-seg-archivo-nombre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ga-seg-archivo-fecha {
    font-size: 0.72rem;
    color: #93a6bc;
    flex-shrink: 0;
}

.ga-seg-vacio {
    color: #93a6bc;
    font-style: italic;
}

/* Tarjeta central: estado actual arriba y linea de tiempo debajo */
.ga-seg-card-timeline {
    padding: 0;
    overflow: hidden;
}

.ga-seg-estado-actual {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
}

/* Linea de tiempo agrupada por etapa: etiqueta | punto sobre la linea vertical | movimientos */
.ga-timeline {
    --tl-etiqueta: 140px;
    --tl-padding: 1.4rem;
    position: relative;
    padding: 1.2rem var(--tl-padding) 0.4rem;
}

.ga-timeline::before {
    content: "";
    position: absolute;
    left: calc(var(--tl-padding) + var(--tl-etiqueta) + 15px);
    top: 1.6rem;
    bottom: 1.2rem;
    width: 2px;
    background: #d5dde7;
}

.ga-tl-grupo {
    display: grid;
    grid-template-columns: var(--tl-etiqueta) 32px minmax(0, 1fr);
}

.ga-tl-etiqueta {
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    padding-right: 0.9rem;
}

.ga-tl-punto {
    justify-self: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #93a6bc;
    position: relative;
    z-index: 1;
}

.ga-tl-grupo.actual .ga-tl-punto {
    box-shadow: 0 0 0 4px rgba(30, 79, 143, 0.15);
}

.ga-tl-movimientos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0 1.1rem 0.4rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px dashed #d5dde7;
}

.ga-tl-grupo:last-child .ga-tl-movimientos {
    border-bottom: 0;
    margin-bottom: 0;
}

/* En modo resumido solo se ve el ultimo movimiento de cada etapa */
.ga-tl-oculto {
    display: none;
}

.ga-timeline.expandido .ga-tl-oculto {
    display: block;
}

.ga-tl-fecha {
    font-size: 0.72rem;
    color: #93a6bc;
}

.ga-tl-texto {
    font-size: 0.88rem;
    font-weight: 600;
    color: #22354d;
    margin-top: 0.1rem;
    white-space: pre-line;
}

.ga-seg-ver-mas {
    display: block;
    width: calc(100% - 2.8rem);
    margin: 0 1.4rem 1.3rem;
    padding: 0.5rem;
    border: 1px solid #c9d9ec;
    border-radius: 999px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #22354d;
}

.ga-seg-ver-mas:hover {
    background: #f3f8fd;
}

/* Colores por estado, segun la clase de Bootstrap definida en ESTADOS */
.estado-txt-warning {
    color: #b7791f;
}

.estado-txt-info {
    color: #0b7fa3;
}

.estado-txt-danger {
    color: #c0392b;
}

.estado-txt-secondary {
    color: #6c7a89;
}

.estado-txt-success {
    color: #1f9d6b;
}

.estado-txt-primary {
    color: #1e4f8f;
}

.estado-borde-warning {
    border-color: #b7791f;
}

.estado-borde-info {
    border-color: #0b7fa3;
}

.estado-borde-danger {
    border-color: #c0392b;
}

.estado-borde-secondary {
    border-color: #6c7a89;
}

.estado-borde-success {
    border-color: #1f9d6b;
}

.estado-borde-primary {
    border-color: #1e4f8f;
}

/* Etapa en la que se espera una accion del paciente */
.estado-txt-magenta {
    color: #a3267d;
}

.estado-borde-magenta {
    border-color: #a3267d;
}

/* Columna derecha: observacion vigente, carga de archivos e informacion fija */
.ga-seg-observacion {
    background: #fff7e6;
    border: 1px solid #f3d38a;
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 1rem;
}

.ga-seg-observacion-texto {
    font-size: 0.85rem;
    color: #22354d;
    margin-top: 0.2rem;
    white-space: pre-line;
}

.ga-seg-observacion-fecha {
    font-size: 0.72rem;
    color: #93a6bc;
    margin-top: 0.35rem;
}

.ga-seg-carga {
    margin-bottom: 1rem;
}

.ga-seg-info-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0b1f3a;
}

.ga-seg-info p {
    font-size: 0.8rem;
    color: #4a6079;
    margin: 0.15rem 0 0.8rem;
}

.ga-seg-info p:last-child {
    margin-bottom: 0;
}

.ga-alerta-ok {
    background: #e3f6ea;
    color: #1d7a43;
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
    margin-top: 0.6rem;
}

/* En celular la columna de etiquetas se achica para dejar lugar a los movimientos */
@media (max-width: 575px) {
    .ga-timeline {
        --tl-etiqueta: 92px;
        --tl-padding: 1rem;
    }

    .ga-seg-ver-mas {
        width: calc(100% - 2rem);
        margin: 0 1rem 1.1rem;
    }
}

@media (max-width: 400px) {
    .ga-panel {
        padding: 1.4rem 1.1rem;
        border-radius: 14px;
    }

    .ga-numero-tramite {
        font-size: 1.3rem;
    }
}

/* Archivos del seguimiento: nombre y fecha apilados, y botones de ver y descargar a la derecha */
.ga-seg-archivo-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ga-seg-archivo-accion {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e3eefa;
    text-decoration: none;
}

.ga-seg-archivo-accion:hover {
    background: #1e4f8f;
}

.ga-seg-archivo-accion:hover i {
    color: #fff;
}

/* Bloque de descarga de la orden codificada en "Información importante" */
.ga-seg-orden {
    background: #fff4d6;
    border: 1px solid #f3d38a;
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 1rem;
}

.ga-seg-orden p {
    font-size: 0.8rem;
    color: #4a6079;
    margin: 0.2rem 0 0.7rem;
}

.ga-seg-orden .ga-boton {
    margin-bottom: 0;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    text-decoration: none;
}


/* Resultado del correo de alta en la pantalla de confirmacion */
.ga-correo-ok {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    text-align: left;
    background: #e3f6ea;
    color: #1d7a43;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    word-break: break-word;
}

.ga-correo-ok i {
    font-size: 1.2rem;
}

.ga-correo-error {
    text-align: left;
    background: #fff4d6;
    border: 1px solid #f3d38a;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #5c4300;
    word-break: break-word;
}

.ga-correo-error-titulo {
    font-weight: 700;
    color: #8a5a00;
    margin-bottom: 0.3rem;
}

.ga-correo-error p {
    margin-bottom: 0.6rem;
}

.ga-correo-corregir {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ga-correo-corregir .form-control {
    width: 100%;
    border: 1px solid #c9d9ec;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 0.6rem 0.75rem;
}

.ga-correo-corregir .ga-boton {
    width: 100%;
    margin-bottom: 0;
    padding: 0.55rem 1rem;
}

.ga-correo-error .ga-alerta {
    margin: 0.6rem 0 0;
}