/* CSS Document */ :root {
     --color-gray-50: #f9fafb;
     --color-gray-100: #f3f4f6;
     --color-gray-200: #e5e7eb;
     --color-gray-300: #d1d5db;
     --color-gray-400: #9ca3af;
     --color-gray-500: #6b7281;
     --color-gray-600: #4b5563;
     --color-gray-700: #374151;
     --color-gray-800: #1f293d;
     --color-blue-100: #dbeafe;
     --color-blue-500: #3b82f6;
     --color-blue-600: #2563eb;
     --color-blue-700: #1d4ed8;
     --color-green-600: #16a34a;
     --color-verde-profundo: #1E351E;
     --color-verde-oliva: #5F753C;
     --color-verde-crema: #DBE0C8;
     --color-red-500: #ef4444;
     --color-red-600: #dc2626;
     --color-fondo-carnet: #d9e6f2;
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
/* --- Reseteo Básico --- */
*, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
html, body {
     height: 100%;
}
body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.5;
     background-color: var(--color-fondo-carnet);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-gray-800);
}
/* --- Clase de utilidad --- */
.hidden {
     display: none !important;
}
/* --- Contenedor Principal --- */
/* --- Contenedor Principal --- */
#app {
     width: 100%;
     max-width: 28rem; /* 448px */
     height: auto; /* Ajustado para esta vista */
     max-height: 90vh;
     background-color: #ffffff;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-xl);
     border-radius: 1rem; /* Añadido para que se vea bien en 'desktop' */
}
/* --- PANTALLA DE LOGIN --- */
#login-screen {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 2rem; /* 32px */
     height: 100%;
}
#login-screen header {
     text-align: center;
     margin-bottom: 2.5rem; /* 40px */
}
/* Contenedor del logo principal (sin fondo azul) */
.logo-container {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 4rem; /* 64px */
     height: 4rem; /* 64px */
     margin-bottom: 1rem; /* 16px */
}
/* --- ESTILOS V2.0 PARA IMÁGENES --- */
/* 1. Logo principal en el login */
.logo-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}
/* 2. Logo del footer en el login (pequeño) */
.logo-footer-img {
     height: 1.5rem; /* 24px */
     width: auto;
     opacity: 0.7;
     transition: opacity 0.2s ease;
}
.login-footer a:hover .logo-footer-img {
     opacity: 1;
}
/* 3. Logo dentro del carnet (mediano y blanco) */
.logo-card-img {
     height: 2.5rem; /* 32px */
     width: 4.5rem;
     object-fit: contain;
     /* Filtro para hacerlo blanco y que contraste */
     filter: brightness(0) invert(1);
     opacity: 0.9;
}
/* --- FIN ESTILOS V2.0 --- */
#login-screen h1 {
     font-size: 1.875rem; /* 30px */
     font-weight: 700;
     color: var(--color-gray-800);
}
#login-screen header p {
     color: var(--color-gray-500);
     margin-top: 0.25rem; /* 4px */
}
#login-form {
     display: grid;
     gap: 1.25rem; /* 20px - reemplaza space-y-5 */
}
.form-group label {
     display: block;
     font-size: 0.875rem; /* 14px */
     font-weight: 500;
     color: var(--color-gray-700);
}
.form-input {
     margin-top: 0.25rem; /* 4px */
     display: block;
     width: 100%;
     padding: 0.75rem 1rem; /* 12px 16px */
     border: 1px solid var(--color-gray-300);
     border-radius: 0.5rem; /* 8px */
     box-shadow: var(--shadow-sm);
}
/* Ocultar flechas en input number */
.form-input[type="number"] {
     -moz-appearance: textfield;
     appearance: textfield;
}
.form-input[type="number"]::-webkit-inner-spin-button, .form-input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
}
.form-input:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
     border-color: var(--color-blue-500);
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}
.form-group .password-wrapper {
     margin-top: 0.25rem; /* Mover el margin-top del input aquí */
}
.password-wrapper {
     position: relative;
}
.password-wrapper .form-input {
     margin-top: 0; /* Asegurar que no tenga margin-top */
     padding-right: 3rem; /* Espacio para el icono */
}
.password-toggle-icon {
     position: absolute;
     top: 50%;
     right: 1rem;
     transform: translateY(-50%);
     cursor: pointer;
     color: var(--color-gray-400);
     display: flex; /* Para que los SVGs se muestren bien */
     align-items: center;
}
.password-toggle-icon:hover {
     color: var(--color-gray-600);
}
#error-message {
     color: var(--color-red-500);
     font-size: 0.875rem; /* 14px */
}
.btn-submit {
     width: 100%;
     background-color: var(--color-blue-600);
     color: #ffffff;
     padding: 0.75rem 1rem; /* 12px 16px */
     border-radius: 0.5rem; /* 8px */
     font-weight: 600;
     font-size: 1.125rem; /* 18px */
     border: none;
     cursor: pointer;
     box-shadow: var(--shadow-lg);
     transition: all 0.3s ease-in-out;
}
.btn-submit:hover {
     background-color: var(--color-blue-700);
     transform: translateY(-2px);
}
.btn-submit:disabled {
     background-color: var(--color-gray-400);
     cursor: not-allowed;
     transform: none;
     box-shadow: var(--shadow-sm);
}
.forgot-password {
     text-align: center;
     color: var(--color-gray-400);
     font-size: 0.75rem; /* 12px */
     margin-top: 1.5rem; /* Ajustado para más espacio */
}
/* Footer del Login (para el logo de volver) */
.login-footer {
     text-align: center;
     margin-top: 1.5rem; /* Espacio desde "Olvidé contraseña" */
}
.login-footer a {
     display: inline-flex;
     align-items: center;
     text-decoration: none;
     font-size: 0.875rem; /* 14px */
     transition: color 0.2s ease;
}
/* --- PANTALLA DEL CARNET --- */
#card-screen {
     display: flex;
     flex-direction: column;
     height: 100%;
}
#card-screen header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem; /* 16px */
     background-color: var(--color-gray-50);
     border-bottom: 1px solid var(--color-gray-200);
}
#card-screen header h2 {
     font-size: 1.25rem; /* 20px */
     font-weight: 700;
     color: var(--color-gray-800);
}
#logout-button {
     font-size: 0.875rem; /* 14px */
     color: var(--color-blue-600);
     font-weight: 500;
     background: none;
     border: none;
     cursor: pointer;
}
#card-screen main {
     flex: 1;
     padding: 1.5rem; /* 24px */
     background-color: var(--color-gray-100);
     overflow-y: auto;
}
/* --- AÑADIDO: Estilos de Volteo 3D --- */
.card-flipper-container {
     perspective: 1000px;
     margin-bottom: 1.5rem; /* 24px */
     cursor: pointer;
     min-height: 250px; /* Asegura que el contenedor tenga altura */
}
.flipper-inner {
     position: relative;
     width: 100%;
     height: 100%; /* Corregido: Asegura que ocupe toda la altura */
     transition: transform 0.6s;
     transform-style: preserve-3d;
     min-height: 250px; /* Asegura que el contenedor tenga altura */
}
.flipper-inner.is-flipped {
     transform: rotateY(180deg);
}
.card-front, .card-back {
     position: absolute;
     width: 100%;
     height: 100%; /* Corregido: Asegura que ambas caras tengan la misma altura */
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     /* Las clases .digital-card se aplican a ambas caras */
}
/* --- FIN AÑADIDO: Estilos de Volteo 3D --- */
/* El Carnet (Ahora es la clase base para ambas caras) */
.digital-card {
     /* MODIFICADO: Quitamos el background de aquí para hacerlo específico por cara */
     /* background: linear-gradient(to bottom right, var(--color-pastel-green-dark), var(--color-pastel-green-light)); */
     /* color: var(--color-green-700); */
     padding: 1.5rem; /* 24px */
     border-radius: 1rem; /* 16px */
     box-shadow: var(--shadow-2xl);
     height: 100%; /* Asegura que ambas caras tengan la misma altura */
}
/* --- ESTILOS ESPECÍFICOS PARA EL FRENTE (AZUL) --- */
.card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
}
.card-front {
     background: linear-gradient(to bottom left, /* Degradado diagonal suave */ var(--color-blue-100) 0%, var(--color-blue-500) 30%, var(--color-blue-700) 100%);
     background-color: var(--color-azul-profundo); /* Color de respaldo */
     color: white; /* Texto blanco para mejor contraste con el azul */
}
/* Ajustamos el color de etiquetas y borde del logo en el frente azul */
.card-front .card-label {
     color: var(--color-blue-100);
     opacity: 0.9;
}
.card-front .logo-placeholder {
     border-color: white;
     opacity: 0.8;
}
.logo-placeholder {
     height: 5.5rem;
     width: 5.5rem;
     border: 2px dashed var(--color-green-700);
     border-radius: 0.25rem;
     opacity: 0.6;
}
/* --- ESTILOS ESPECÍFICOS PARA EL REVERSO (VERDE) --- */
.card-back {
     transform: rotateY(180deg);
     background:
          linear-gradient(to bottom left, var(--color-verde-profundo) 0%, var(--color-verde-oliva) 50%, var(--color-verde-crema) 100%);
     background-color: var(--color-verde-profundo); /* Color de respaldo */
     color: white;
     padding: 1.5rem; /* Añadido: padding para el contenido del reverso */
     margin-bottom: 1.5rem; /* 24px */
}
.card-label {
     font-size: 0.875rem; /* 14px */
     color: var(--color-green-700);
     opacity: 0.7;
}
.card-nombre {
     font-size: 1.5rem; /* 24px */
     font-weight: 600;
}
.card-footer {
     display: flex;
     justify-content: space-between;
}
.card-back-dni, .card-plan, .card-nro-socio { /* Añadido .card-nro-socio */
     font-size: 1.125rem; /* 18px */
     font-weight: 500;
}
/* --- AÑADIDO: Estilos para el Reverso --- */
.card-back-details {
     list-style: none;
     padding: 0;
     margin: 0;
     flex-grow: 1; /* Permite que la lista ocupe el espacio disponible */
     display: flex;
     flex-direction: column;
     justify-content: center; /* Centra los elementos de la lista */
     color: white;
}
.card-back-details li {
     display: flex;
     justify-content: space-between;
     padding: 0.6rem 0; /* Un poco más apretado */
     font-size: 0.875rem; /* 14px */
     border-bottom: 1px solid var(--color-gray-200);
}
.card-back-details li:last-child {
     border-bottom: none;
}
.card-back-details li span:first-child {
     color: var(--color-gray-600);
}
.card-back-details li span:last-child {
     font-weight: 600;
     color: var(--color-gray-800);
}

/* --- FIN AÑADIDO: Estilos para el Reverso --- */
/* Detalles de Afiliación */
.details-box {
     background-color: #ffffff;
     border-radius: 0.5rem; /* 8px */
     box-shadow: var(--shadow);
     margin-top: 10px;
}
.details-box h3 {
     font-size: 1.125rem; /* 18px */
     font-weight: 600;
     padding: 1rem; /* 16px */
     border-bottom: 1px solid var(--color-gray-200);
}
.details-list {
     list-style: none;
}
.details-list li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem; /* 16px */
}
/* Reemplaza 'divide-y' */
.details-list li + li {
     border-top: 1px solid var(--color-gray-200);
}
.details-list li span:first-child {
     color: var(--color-gray-600);
}
.details-list li span:last-child {
     font-weight: 600;
     color: var(--color-gray-800);
}
/* Clases de estado dinámicas */
.estado-activo {
     color: var(--color-green-600) !important;
}
.estado-inactivo {
     color: var(--color-red-600) !important;
}
/* --- Estilos Responsivos --- */
@media (min-width: 640px) {
     #app {
          height: auto;
          max-height: 90vh;
          border-radius: 1rem; /* 16px */
     }
}