/* style.css v1.7 (Tema Verde) */
/* --- Reset Básico y Variables --- */
:root {
    --color-bg: #1a1a1a;
    --color-bg-light: #1e1e1e;
    --color-surface: #2c2c2c;
    --color-surface-hover: #404040;
    --color-border: #404040;
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #a0a0a0;

    /* *** COLORES ACTUALIZADOS *** */
    --color-brand-primary: #13BE63; /* Verde principal */
    --color-brand-secondary: #B0E9CB; /* Verde claro */
    --color-brand-gradient: linear-gradient(to right, #13BE63, #B0E9CB); /* Degradado verde */

    --color-success: #4ade80;
    --color-error: #f87171;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

button {
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    transition: all 0.2s ease;
}

/* --- Iconos Lucide --- */
i[data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

/* --- Botones Genéricos --- */
.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 500;
    /* *** COLOR TEXTO ACTUALIZADO *** */
    color: var(--color-bg); /* Texto oscuro para contrastar con verde claro */
    background: var(--color-brand-gradient); /* Usar degradado verde */
}
.button-primary:hover { opacity: 0.9; }
.button-primary.button-full { width: 100%; }
.button-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 500;
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}
.button-secondary:hover { background-color: var(--color-surface-hover); }
.button-success {
    /* Mantenemos verde éxito, o podrías usar --color-brand-primary si prefieres */
    background-color: var(--color-success);
    color: var(--color-bg); border-color: var(--color-success);
    padding: 0.85rem 1.25rem; border-radius: 0.75rem; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.button-success:hover { background-color: #6ee7b7; }

/* --- Loader (Spinner) --- */
/* Usar color verde principal para el spinner */
.loader { border: 3px solid var(--color-surface); border-top: 3px solid var(--color-brand-primary); border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Pantalla de Autenticación (Páginas) --- */
.auth-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; background-color: var(--color-bg); overflow: hidden; }
.auth-box { width: 100%; max-width: 26rem; padding: 2rem; background-color: var(--color-surface); border-radius: 1.5rem; border: 1px solid var(--color-border); text-align: center; position: relative; }
.welcome-box { max-width: 24rem; }
.welcome-logo { width: 60px; height: auto; margin-bottom: 1rem; }
.form-logo { width: 40px; height: auto; }
.auth-header { display: flex; justify-content: center; align-items: center; color: var(--color-brand-primary); margin-bottom: 1rem; gap: 0.5rem; }
/* Icono Gem también usará verde */
.auth-header i[data-lucide="gem"] { width: 2.5rem; height: 2.5rem; color: var(--color-brand-secondary); }
.auth-header i { width: 40px; height: 40px; }
.auth-box h1 {
    font-size: 2rem; font-weight: 700;
    /* Título con degradado verde */
    background: -webkit-linear-gradient(left, var(--color-brand-primary), var(--color-brand-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-box h2 { font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 0.5rem; }
.auth-box p { font-size: 1rem; color: var(--color-text-secondary); margin-top: 0.25rem; margin-bottom: 1.5rem; }
.auth-footer { margin-top: 1.5rem; display: flex; justify-content: center; gap: 1.5rem; }
.auth-footer a { font-size: 0.875rem; color: var(--color-text-secondary); text-decoration: none; }
.auth-footer a:hover { color: var(--color-text-primary); }

/* --- Formularios de Registro/Login --- */
.back-button { position: absolute; top: 1rem; left: 1rem; padding: 0.5rem; border-radius: 99px; background-color: transparent; color: var(--color-text-secondary); }
.back-button:hover { background-color: var(--color-surface-hover); color: var(--color-text-primary); }
.auth-form { margin-top: 1.5rem; text-align: left; }
.form-description { font-size: 0.9rem; color: var(--color-text-secondary); text-align: center; margin-bottom: 1.5rem; }
.input-group { position: relative; margin-bottom: 1rem; }
.input-group input,
select {
    width: 100%; padding: 1rem 0.75rem 1rem 2.75rem; border-radius: 0.75rem;
    border: 1px solid var(--color-border); background-color: var(--color-bg-light);
    color: var(--color-text-primary); font-size: 1rem; height: auto; line-height: 1.5;
}
select {
    appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em;
    padding-right: 3rem; padding-left: 0.75rem;
}
.input-group input.no-icon { padding-left: 1rem; }
.input-group input:focus,
select:focus {
    /* Focus usa verde primario */
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(19, 190, 99, 0.3); /* Sombra verde */
    outline: none;
}
.input-group i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); width: 1.25rem; height: 1.25rem; pointer-events: none; }
.auth-switch { font-size: 0.9rem; color: var(--color-text-secondary); text-align: center; margin-top: 1.5rem; }
/* *** ENLACE PRINCIPAL ACTUALIZADO *** */
.auth-switch a {
    color: var(--color-brand-primary); /* Usar verde principal */
    font-weight: 500; text-decoration: none;
}
.auth-switch a:hover {
     opacity: 0.8; /* Efecto hover simple */
}


/* QR Code */
#employee-qr-code-container, #client-qr-code-container { padding: 1rem 0; }
.qr-code-box-display { background-color: white; padding: 1rem; border-radius: 1rem; display: inline-block; margin-bottom: 1rem; }
.qr-phone { font-weight: 500; color: var(--color-text-secondary); }
.error-message { background-color: rgba(248, 113, 113, 0.1); color: var(--color-error); padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem; text-align: center; font-size: 0.875rem; border: 1px solid var(--color-error); }

/* --- Modales --- */
.modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; padding: 1rem; z-index: 50; animation: modal-fade-in 0.2s ease-out; }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay.bottom { align-items: flex-end; }
.modal-content-bottom { width: 100%; max-width: 28rem; background-color: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 1.5rem 1.5rem 0 0; padding: 1rem; animation: modal-slide-up 0.3s ease-out; z-index: 51; }
@keyframes modal-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-prompt { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); text-align: center; margin-bottom: 1rem; }
.role-selection { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.role-option { display: flex; align-items: center; gap: 1rem; padding: 1rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem; font-size: 1.1rem; font-weight: 500; color: var(--color-text-primary); text-align: left; }
.role-option:hover { background-color: var(--color-surface-hover); }
/* Iconos en selección de rol usan verde */
.role-option i { color: var(--color-brand-primary); }
.modal-content-bottom .cancel-button { width: 100%; margin-top: 0.5rem; }


/* --- Paneles de Control (dashboard.php y employee_dashboard.php) --- */
.app-header { background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 1rem 2rem; }
.header-content { max-width: 64rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 0.75rem; }
/* Icono del logo usa verde */
.logo i { color: var(--color-brand-primary); }
.logo h1 { font-size: 1.25rem; font-weight: 600; }
.header-user-info { font-size: 0.9rem; color: var(--color-text-secondary); text-align: right; }
.header-user-info strong { color: var(--color-text-primary); }
.header-user-info .button-secondary { padding: 0.5rem 0.8rem; font-size: 0.8rem; margin-top: 0.25rem; }

.dashboard-content { max-width: 64rem; margin: 0 auto; padding: 2rem; }
.module-container { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .module-container { flex-direction: row; } }
.module-half { flex: 1; min-width: 0; }

/* Formulario Añadir Cliente / Escáner */
.add-client-form { padding: 1.5rem; background-color: var(--color-surface); border-radius: 1rem; border: 1px solid var(--color-border); }
.add-client-form h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .form-grid { grid-template-columns: repeat(2, 1fr); align-items: center; } .form-grid select, .form-grid button { grid-column: 1 / 3; } }
.add-client-form input, .add-client-form select { background-color: var(--color-bg-light); color: var(--color-text-primary); border-color: var(--color-border); padding: 1rem 0.75rem; height: auto; line-height: 1.5; }
.add-client-form select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 3rem; }

/* Escáner QR */
#qr-reader { width: 100%; border-radius: 1rem; overflow: hidden; margin-bottom: 1rem; border: 1px solid var(--color-border); background-color: #000; min-height: 250px; position: relative; }
#qr-reader video { width: 100% !important; height: auto !important; }
.scan-result { padding: 0.75rem; border-radius: 0.5rem; margin-top: 1rem; text-align: center; font-weight: 500; }
.scan-result.info { background-color: rgba(96, 165, 250, 0.1); color: #60a5fa; border: 1px solid #60a5fa; }
.scan-result.success { background-color: rgba(74, 222, 128, 0.1); color: var(--color-success); border: 1px solid var(--color-success); }
.scan-result.error { background-color: rgba(248, 113, 113, 0.1); color: var(--color-error); border: 1px solid var(--color-error); }


/* --- Lista de Clientes / Empleados --- */
.client-list-title { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.small-title { font-size: 1.25rem; margin-bottom: 1rem; }
.client-loader { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 2rem; color: var(--color-text-secondary); font-size: 0.875rem; }
.client-list-container { background-color: var(--color-surface); border-radius: 1rem; border: 1px solid var(--color-border); overflow: hidden; }
.client-list-container.compact-list { max-height: 250px; overflow-y: auto; }
.client-list { display: flex; flex-direction: column; }
.client-list-empty { padding: 2rem; text-align: center; color: var(--color-text-secondary); }
.client-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); }
.client-item:last-child { border-bottom: none; }
.client-item.compact { padding: 0.75rem 1.5rem; }
.client-info { display: flex; align-items: center; gap: 1rem; min-width: 0; }
/* Iconos en lista usan verde */
.client-info i { color: var(--color-brand-primary); flex-shrink: 0; }
.client-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-phone, .client-assigned { font-size: 0.875rem; color: var(--color-text-secondary); }
.client-actions { display: flex; align-items: center; gap: 1rem; }
.client-stamps { font-size: 0.875rem; color: var(--color-text-secondary); text-align: right; }
.stamps-current { font-weight: bold; font-size: 1.1rem; color: var(--color-text-primary); }
.button-view { font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); padding: 0.5rem 1rem; border-radius: 99px; background-color: var(--color-surface-hover); border: none; display: flex; align-items: center; gap: 0.25rem; }
.button-view:hover { background-color: #505050; }
.button-view i { width: 1rem; height: 1rem; }


/* --- Modal del Cliente (dashboard y employee_dashboard) --- */
.modal-content { background-color: var(--color-bg-light); border-radius: 1.5rem; border: 1px solid var(--color-border); width: 100%; max-width: 28rem; overflow: hidden; animation: modal-fade-in 0.2s ease-out; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); }
.modal-title { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 600; }
/* Icono título modal usa verde */
.modal-title i { color: var(--color-brand-primary); }
.modal-close-button { color: var(--color-text-secondary); border: none; padding: 0.25rem; border-radius: 99px; }
.modal-close-button:hover { color: var(--color-text-primary); background-color: var(--color-surface-hover); }
.modal-body { padding: 1.5rem; background-color: var(--color-bg); }
.modal-phone, .modal-employee { font-size: 1rem; color: var(--color-text-secondary); margin-bottom: 0.25rem; }
.modal-employee { font-style: italic; font-size: 0.9rem; }

/* Tarjeta de Sellos */
.stamp-card-container { background-color: var(--color-surface); border-radius: 1rem; border: 1px solid var(--color-border); margin-top: 1.5rem; padding: 1.5rem; text-align: center; }
.stamp-card-title { font-weight: 600; margin-bottom: 1.5rem; }
.stamp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stamp-icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--color-bg); color: var(--color-border); }
/* Sello estampado usa verde */
.stamp-icon.stamped { background-color: var(--color-brand-primary); color: black; animation: stamp-pop 0.3s ease-out; }
.stamp-icon.stamped i { transform: scale(1.1); }
@keyframes stamp-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reward-message { margin-top: 1.5rem; background-color: rgba(74, 222, 128, 0.1); color: var(--color-success); font-weight: 500; padding: 0.75rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }

.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem; background-color: var(--color-bg-light); border-top: 1px solid var(--color-border); }
.modal-actions button { font-weight: 600; padding: 0.85rem; } /* Altura botones modal */
.button-primary:disabled, .button-success:disabled { background-color: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border); cursor: not-allowed; opacity: 0.6; }

/* --- Portal del Cliente --- */
.client-portal-page .auth-box { max-width: 32rem; }
.client-portal-result h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.client-portal-result p { color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.public-card { background-color: var(--color-bg-light); padding: 1rem; }
.stamps-remaining { margin-top: 1.5rem; font-size: 1rem; color: var(--color-text-secondary); }
/* Botón volver usa verde */
.button-back { display: inline-block; margin-top: 1.5rem; font-size: 0.875rem; color: var(--color-brand-primary); font-weight: 500; text-decoration: none; }
.pending-client-info { text-align: center; padding: 2rem 1rem; }
/* Icono QR pendiente usa verde */
.pending-client-info i { color: var(--color-brand-secondary); width: 50px; height: 50px; margin-bottom: 1rem; }
.pending-client-info h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.pending-client-info p { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; }
.go-back-link a { color: var(--color-text-secondary); font-size: 0.875rem; }
.go-back-link a:hover { color: var(--color-text-primary); }