/* Estilos Generales y Variables CSS para PT Exma App */

/* --- Variables CSS --- */
:root {
    /* Paleta de Colores Corporativa (Ejemplo - Ajustar según identidad de PT Exma) */
    --color-primary: #005A9C; /* Azul corporativo */
    --color-primary-dark: #003D6B;
    --color-secondary: #E87722; /* Naranja como acento */
    --color-background: #f4f7f6; /* Fondo general claro */
    --color-surface: #ffffff; /* Fondo de tarjetas, formularios */
    --color-text-primary: #333333; /* Texto principal */
    --color-text-secondary: #666666; /* Texto secundario, labels */
    --color-border: #cccccc;
    --color-success: #28a745;
    --color-error: #dc3545;
    --color-warning: #ffc107;
    --color-offline: #6c757d; /* Gris para estado offline */

    /* Tipografía */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --font-size-base: 16px; /* Ajustable según necesidad */
    --line-height-base: 1.6;

    /* Espaciado y Bordes */
    --spacing-unit: 8px;
    --border-radius: 4px;

    /* Variables para experiencia app */
    --app-header-height: 56px;
    --app-transition-speed: 0.3s;
    --app-safe-area-top: env(safe-area-inset-top, 0px);
    --app-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --app-control-opacity: 0.7;
    --app-button-radius: 8px;
}

/* --- Reseteo Básico y Estilos Globales --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base); /* Base para unidades rem */
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent; /* Elimina el flash al tocar elementos en dispositivos móviles */
    overflow-x: hidden; /* Evita scroll horizontal */
}

body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el footer quede abajo */
    -webkit-user-select: none; /* Previene selección de texto para sentirse más como una app */
    user-select: none; /* Versión estándar */
    -webkit-touch-callout: none; /* Desactiva menú contextual en iOS */
    -webkit-overflow-scrolling: touch; /* Scroll con inercia en iOS */
    overscroll-behavior: contain; /* Previene scroll-chaining */
}

/* Estilo para scrollbar personalizado (más minimalista) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* --- Contenedores Principales --- */
.login-container,
.app-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa el espacio disponible */
    width: 100%;
    max-width: 1200px; /* Limitar ancho en pantallas grandes */
    margin: 0 auto; /* Centrar */
    padding: 0; /* Quitar padding lateral para sensación de app */
    position: relative;
    overflow-x: hidden; /* Prevenir scroll horizontal */
    height: 100%;
}

/* --- Encabezado --- */
.app-header {
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para pantallas pequeñas */
    position: sticky; /* Encabezado fijo al hacer scroll */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: var(--app-header-height);
    transition: all var(--app-transition-speed) ease;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5); /* Espacio entre elementos */
}

/* Estilo para el indicador de estado online/offline */
.sync-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--spacing-unit);
    flex-shrink: 0; /* Evita que se encoja */
}

.sync-status-indicator.online {
    background-color: var(--color-success); /* Verde */
}

.sync-status-indicator.offline {
    background-color: var(--color-error); /* Rojo */
}

/* Estilo para el nombre de usuario */
.user-name-display {
    font-weight: 500;
    white-space: nowrap; /* Evita que el nombre se parta */
    overflow: hidden; /* Oculta si es muy largo */
    text-overflow: ellipsis; /* Añade '...' si es muy largo */
    max-width: 100px; /* Ajusta según sea necesario */
    margin-right: var(--spacing-unit);
}

/* Estilo para botones que solo contienen un icono */
.button-icon {
    background: none;
    border: none;
    padding: calc(var(--spacing-unit) * 0.5); /* Menos padding */
    color: var(--color-surface); /* Color del icono */
    cursor: pointer;
    border-radius: 50%; /* Hacerlo circular */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Tamaño fijo */
    height: 36px; /* Tamaño fijo */
    box-shadow: none; /* Quitar sombra */
}

.button-icon:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Efecto hover sutil */
}

.button-icon svg {
    width: 20px; /* Tamaño del icono */
    height: 20px;
}

/* Estilos base para Material Symbols */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24; /* Tamaño óptico por defecto */
  vertical-align: text-bottom; /* Alinear con texto */
  font-size: 1.2em; /* Tamaño relativo al texto circundante */
  line-height: 1; /* Evitar espacio extra */
}

.app-header h1 {
    font-size: 1.25rem; /* Título más pequeño, estilo app */
    margin: 0;
    font-weight: 600;
}

.app-header h2 { /* Para subtítulo en login */
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    width: 100%; /* Ocupa toda la línea bajo el H1 */
    text-align: center;
    padding-top: var(--spacing-unit);
    opacity: 0.9;
}

/* --- Navegación --- */
.app-nav {
    background-color: var(--color-primary-dark);
    padding: 0; /* Quitar padding para estilo app */
    position: sticky;
    bottom: 0; /* Navegación en la parte inferior, estilo app móvil */
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.app-nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around; /* Distribuir uniformemente */
    margin: 0;
    padding: 0;
}

.app-nav a.nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all var(--app-transition-speed) ease;
    position: relative;
    font-size: 0.85rem;
    border-bottom: none;
}

/* Ajustes para iconos en la navegación */
.app-nav .nav-link .material-symbols-outlined,
.app-nav .button-as-link .material-symbols-outlined {
    font-size: 24px; /* Tamaño fijo para iconos de nav */
    margin-bottom: 4px; /* Espacio bajo el icono */
    vertical-align: middle; /* Centrar verticalmente si es necesario */
}

/* Eliminar estilos ::before que ya no se usan */
/* .app-nav a.nav-link::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
} */

/* .app-nav a.nav-link:nth-child(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
} */


.app-nav a.nav-link.active {
    color: var(--color-surface);
}

.app-nav a.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--color-secondary);
    border-radius: 50%;
}

/* --- Contenido Principal --- */
main {
    flex-grow: 1; /* Ocupa el espacio restante */
    padding: 0; /* Quitar padding para estilo app */
    background-color: var(--color-surface);
    overflow-y: auto; /* Scroll solo en el contenido */
    -webkit-overflow-scrolling: touch; /* Scroll con inercia en iOS */
    position: relative;
    margin-bottom: 0; /* Quitar margen para navegación inferior */
    box-shadow: none; /* Quitar sombra para estilo plano de app */
}

/* Transiciones para cambios de sección (efecto app) */
.content-section {
    display: none;
    padding: calc(var(--spacing-unit) * 2);
    animation-duration: 0.3s;
    animation-fill-mode: both;
    min-height: calc(100vh - var(--app-header-height)); /* Altura mínima para contenido */
}

.content-section.active {
    display: block;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* --- Formularios --- */
form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    max-width: 500px; /* Limitar ancho del form */
    margin: 0 auto; /* Centrar form */
    padding: calc(var(--spacing-unit) * 2);
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.form-group label {
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--border-radius) * 2); /* Bordes más redondeados estilo app */
    font-family: inherit;
    font-size: 1rem;
    width: 100%; /* Ocupar ancho disponible */
    appearance: none; /* Quitar estilos nativos */
    -webkit-appearance: none; /* Para Safari */
    background-color: rgba(245, 247, 250, 0.8); /* Fondo ligeramente diferente */
    transition: all 0.2s ease;
}

input[type="date"] {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--color-border);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 90, 156, 0.2);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

.form-actions {
    display: flex;
    justify-content: flex-end; /* Alinear botón a la derecha */
    margin-top: var(--spacing-unit);
}

/* --- Botones --- */
button,
.button { /* Clase genérica para enlaces que parecen botones */
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--app-button-radius); /* Usar bordes más redondeados */
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600; /* Más negrita para botones */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil */
    position: relative;
    overflow: hidden; /* Para efecto ripple */
    display: inline-flex; /* Alinear icono y texto horizontalmente */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    gap: calc(var(--spacing-unit) * 0.75); /* Espacio entre icono y texto */
}

/* Ajuste específico para botones con icono + texto */
button .material-symbols-outlined,
.button .material-symbols-outlined {
    font-size: 1.25em; /* Ligeramente más grande que el texto */
    vertical-align: middle; /* Mejor alineación vertical */
}


button:active,
.button:active {
    transform: translateY(1px); /* Efecto de pulsación */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.button-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}
.button-primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
}

.button-secondary {
    background-color: var(--color-secondary);
    color: var(--color-surface);
}
.button-secondary:hover:not(:disabled) {
    background-color: #d0681c; /* Naranja más oscuro */
}

/* Botón de acción flotante (FAB) */
.fab-button {
    position: fixed;
    bottom: calc(var(--spacing-unit) * 8); /* Posicionado sobre la navegación */
    right: calc(var(--spacing-unit) * 2);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-success); /* Cambiado a verde */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    z-index: 900;
    /* Estilos para ocultar/mostrar con animación */
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    pointer-events: none; /* Desactivar clics cuando está oculto */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Clase para mostrar el FAB */
.fab-button.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto; /* Activar clics cuando está visible */
}


.fab-button:active {
    transform: scale(0.95);
}

/* Ajuste para el icono dentro del FAB */
.fab-button .material-symbols-outlined {
    font-size: 32px; /* Tamaño del icono dentro del FAB */
    vertical-align: middle;
}


/* --- Estilos específicos para inputs --- */
/* Personalizar select */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px; /* Espacio para el icono */
}

/* Personalizar campos numericos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}

/* Mejorar inputs de fecha */
input[type="date"] {
    position: relative;
    padding-right: 40px; /* Espacio para el icono */
}

/* Ocultar completamente los controles nativos del calendario */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0; /* Ocultar pero mantener funcionalidad */
    cursor: pointer;
}

/* Añadir nuestro propio icono de calendario */
input[type="date"]::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--color-text-secondary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V8h14v12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V8h14v12z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none; /* Para poder hacer clic en el calendario */
}

/* --- Animaciones y Transiciones --- */
@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Aplicar animaciones a elementos específicos */
.content-section.active {
    display: block;
    animation: slideInUp 0.3s ease-out;
}

.message {
    animation: fadeIn 0.3s ease-out;
}

/* Efecto ripple para botones (estilo Material Design) */
button, .button {
    position: relative;
    overflow: hidden;
}

button::after, .button::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

button:active::after, .button:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Transiciones suaves para elementos interactivos */
input, select, textarea, a, button, .button {
    transition: all 0.2s ease-out;
}

/* Tarjetas con efecto de elevación */
.card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Loaders y estados de carga */
.loader {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 90, 156, 0.2);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s linear infinite;
    margin: 0 auto;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Indicador de carga para top bar (estilo app nativa) */
.loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background-color: var(--color-secondary);
    width: 0%;
    transition: width 0.2s ease;
    z-index: 1001;
}

.loading-bar.active {
    animation: loading-progress 2s ease infinite;
}

@keyframes loading-progress {
    0% { width: 0%; }
    50% { width: 65%; }
    80% { width: 85%; }
    95% { width: 95%; }
    100% { width: 95%; }
}

/* --- Mensajes y Notificaciones --- */
.message {
    margin-top: var(--spacing-unit);
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: calc(var(--border-radius) * 2);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    animation: slideInUp 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.message.success {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--color-success);
    border-left: 4px solid var(--color-success);
}

.message.error {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--color-error);
    border-left: 4px solid var(--color-error);
}

.message.info {
    background-color: rgba(0, 123, 255, 0.1);
    color: var(--color-primary);
    border-left: 4px solid var(--color-primary);
}

/* Toast notifications (aparecen y desaparecen) */
.toast {
    position: fixed;
    bottom: calc(var(--spacing-unit) * 8 + 56px); /* Por encima de la navegación */
    left: 50%;
    transform: translateX(-50%);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background-color: rgba(51, 51, 51, 0.9);
    color: white;
    border-radius: calc(var(--border-radius) * 3);
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 80%;
    text-align: center;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, -20px); }
}

/* Componentes de aplicación */
/* Listas tipo app */
.app-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-list-item {
    padding: calc(var(--spacing-unit) * 1.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-surface);
    transition: background-color 0.2s ease;
}

.app-list-item:active {
    background-color: rgba(0, 0, 0, 0.03);
}

.app-list-item:last-child {
    border-bottom: none;
}

/* Badges (indicadores pequeños) */
.badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background-color: var(--color-secondary);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
}

/* Switch toggle (estilo iOS) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--color-primary);
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* --- Estilos para Previsualización de Fotos --- */
.photo-preview-container {
    margin-top: var(--spacing-unit);
    padding: var(--spacing-unit);
    background-color: rgba(0, 0, 0, 0.02); /* Fondo sutil */
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
    min-height: 100px; /* Altura mínima para que se vea el área */
}

#photo-count {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-unit);
}

#thumbnails {
    display: flex;
    flex-wrap: wrap; /* Permitir que las miniaturas pasen a la siguiente línea */
    gap: var(--spacing-unit); /* Espacio entre miniaturas */
}

.thumbnail {
    position: relative;
    display: inline-block; /* Para que se coloquen una al lado de la otra */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Para que la imagen no se salga */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.thumbnail img {
    display: block; /* Evitar espacio extra debajo de la imagen */
    max-width: 300px; /* Ancho máximo solicitado */
    height: auto; /* Mantener proporción */
    object-fit: cover; /* Asegurar que la imagen cubra el espacio si la proporción no coincide */
    aspect-ratio: 4 / 3; /* Opcional: forzar una proporción */
}

.remove-photo-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px; /* Centrar la 'X' verticalmente */
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease;
}

.remove-photo-btn:hover {
    background-color: rgba(220, 53, 69, 0.8); /* Rojo al pasar el ratón */
}

/* --- Estilos específicos para Administración de Proyectos --- */
.project-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinear al inicio para descripciones largas */
    padding: var(--spacing-unit) * 1.5;
    gap: var(--spacing-unit);
}

.project-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa el espacio disponible */
    margin-right: var(--spacing-unit); /* Espacio antes de los botones */
}

.project-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.project-description,
.project-dates {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: calc(var(--spacing-unit) * 0.5);
}

.project-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5); /* Espacio entre botones de acción */
    flex-shrink: 0; /* Evita que los botones se encojan */
}

/* Estilos para botones de editar/eliminar en la lista */
.project-actions .button-icon {
    width: 32px; /* Más pequeños */
    height: 32px;
    color: var(--color-text-secondary); /* Color grisáceo por defecto */
}
.project-actions .button-icon:hover {
    color: var(--color-text-primary); /* Oscurecer al pasar el ratón */
    background-color: rgba(0, 0, 0, 0.05);
}
.project-actions .button-icon.button-delete:hover {
    color: var(--color-error); /* Rojo al pasar sobre eliminar */
    background-color: rgba(220, 53, 69, 0.1);
}
.project-actions .button-icon .material-symbols-outlined {
    font-size: 18px; /* Tamaño de iconos de acción */
    vertical-align: middle;
}

/* Estilo para que el botón de logout en nav se vea como link */
.button-as-link {
    background: none;
    border: none;
    padding: 0; /* Quitar padding extra */
    margin: 0; /* Quitar margen extra */
    font: inherit; /* Heredar fuente */
    color: inherit; /* Heredar color */
    cursor: pointer;
    text-align: inherit; /* Heredar alineación */
    box-shadow: none; /* Quitar sombra */
    display: flex; /* Para alinear icono y texto */
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ocupar espacio en el li */
    height: 100%; /* Ocupar espacio en el li */
    padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit); /* Mismo padding que los links */
    font-size: 0.85rem; /* Mismo tamaño de fuente */
    color: rgba(255, 255, 255, 0.8); /* Mismo color que los links */
    transition: all var(--app-transition-speed) ease;
}
.button-as-link .material-symbols-outlined {
    margin-bottom: 4px; /* Espacio entre icono y texto */
    font-size: 24px; /* Mismo tamaño que otros iconos de nav */
}

.button-as-link:hover,
.button-as-link:focus {
    color: var(--color-surface); /* Mismo efecto hover que los links */
    background: none; /* Asegurar que no haya fondo */
    outline: none;
}
.button-as-link:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.5);
}

.input-with-button {
    display: flex;
    gap: 10px;
    align-items: center;
}

.input-with-button select,
.input-with-button input {
    flex: 1;
}

.input-with-button button {
    flex-shrink: 0;
}

/* Estilos para grupos de fotos */
#photo-groups-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

#photo-groups-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    max-width: 900px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
}

.modal-header button {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #777;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    background-color: #f5f5f5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.photo-group {
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.group-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.group-actions {
    display: flex;
    gap: 5px;
}

.group-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-actions button:hover {
    background-color: #e0e0e0;
}

.group-photos {
    padding: 15px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.photo-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 150px;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-item button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.photo-item button:hover {
    background-color: white;
}

.remove-photo-from-group span {
    color: #d32f2f;
}

.add-to-group span {
    color: #388e3c;
}

.selection-dialog {
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.dialog-content h3 {
    margin-top: 0;
    color: #333;
}

.dialog-content select {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.secondary-button {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.secondary-button:hover {
    background-color: #e0e0e0;
}

.primary-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.primary-button:hover {
    background-color: #0069d9;
}

.manage-photo-groups {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
}

.manage-photo-groups span {
    font-size: 1rem;
    margin-right: 3px;
}

.manage-photo-groups:hover {
    background-color: #388e3c;
}