/* frontend/css/style.css (INICIO - PARTE 1/2) */

/* --- 1. Imports & Variables (Usando las de styleV5.css como base) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* Fuente moderna y limpia */

:root {
    /* Paleta Principal (Dark & Vibrant) */
    --color-bg-deep: #0D0D0D;
    --color-bg-base: #121212;
    --color-bg-surface: #1E1E1E;
    --color-bg-surface-hover: #282828;
    --color-bg-element: #333333;
    --color-bg-element-hover: #404040;

    --color-border-subtle: #383838;
    --color-border-divider: #2A2A2A;
    --color-border-interactive: #505050;
    --color-border-interactive-focus: var(--color-accent-primary);

    --color-text-primary: #F5F5F5;
    --color-text-secondary: #A3A3A3;
    --color-text-tertiary: #737373;
    --color-text-disabled: #5A5A5A;
    --color-text-on-accent: #FFFFFF;
    --color-text-on-accent-darkbg: #0D0D0D;
    --color-text-placeholder: var(--color-text-tertiary); /* Placeholder usa tertiary */

    /* Acentos Vibrantes (Azul Eléctrico + Verde Lima) */
    --color-accent-primary: #0077FF;
    --color-accent-primary-hover: #005FCC;
    --color-accent-primary-active: #004499;
    --color-accent-primary-glow: rgba(0, 119, 255, 0.3);

    --color-accent-secondary: #A3FF00; /* Verde lima - Ajustar si es muy brillante */
    --color-accent-secondary-hover: #8ACC00;
    --color-accent-secondary-active: #6B9900;

    /* Acentos Semánticos */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: var(--color-accent-primary);

    /* Tipografía */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 1.875rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Borders & Radius */
    --border-width: 1px;
    --border-width-focus: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);






/*COMIENZO DD COLOR WHITE*/




     /* Paleta Principal (Light & Clean) */
    --color-bg-deep: #FFFFFF;
    --color-bg-base: #F8F9FA;
    --color-bg-surface: #FFFFFF;
    --color-bg-surface-hover: #F1F3F5;
    --color-bg-element: #E9ECEF;
    --color-bg-element-hover: #DEE2E6;

    --color-border-subtle: #E9ECEF;
    --color-border-divider: #DEE2E6;
    --color-border-interactive: #CED4DA;
    --color-border-interactive-focus: var(--color-accent-primary);

    --color-text-primary: #212529;
    --color-text-secondary: #495057;
    --color-text-tertiary: #868E96;
    --color-text-disabled: #ADB5BD;
    --color-text-on-accent: #FFFFFF;
    --color-text-on-accent-darkbg: #212529;
    --color-text-placeholder: var(--color-text-tertiary);

    /* Acentos (Azul Uber + Verde Fresco) */
    --color-accent-primary: #006EFF;
    --color-accent-primary-hover: #0057CC;
    --color-accent-primary-active: #003F99;
    --color-accent-primary-glow: rgba(0, 110, 255, 0.2);

    --color-accent-secondary: #00B894;
    --color-accent-secondary-hover: #00997A;
    --color-accent-secondary-active: #007A60;

    /* Acentos Semánticos */
    --color-success: #00C851;
    --color-warning: #FFBB33;
    --color-error: #FF4444;
    --color-info: var(--color-accent-primary);

    /* Mantenemos el resto de variables sin cambios */
    /* Tipografía */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;
    /* ... resto de tamaños de fuente ... */
    
    /* Shadows (más sutiles para light theme) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);




/*FIN DE COLOR WHITE*/










    /* Transitions */
    --transition-duration-fast: 150ms;
    --transition-duration-normal: 250ms;
    --transition-duration-slow: 400ms;
    --transition-timing-curve: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Indexes */
    --z-base: 1;
    --z-content: 10;
    --z-sticky: 50;
    --z-fab: 60;
    --z-modal-backdrop: 90; /* --- Detrás del modal */
    --z-modal: 100;           /* --- Modal Principal */
    --z-bottom-nav: 101;      /* <<< Nav ENCIMA de modales estándar */
    --z-story-viewer: 105;    /* <<< Visor encima de nav */
    --z-confirmation: 110;    /* <<< Confirmación encima de todo */
    --z-toast: 115;
    --z-loading: 120;

    /* Layout */
    --header-height: 64px; /* Header flotante mapa */
    --bottom-nav-height: 60px; /* Altura barra navegación inferior */
    --modal-backdrop-bg: rgba(0, 0, 0, 0.8);
    --modal-slide-duration: var(--transition-duration-slow);
    --modal-max-width: 500px;

    /* Específicos iBlup */
    --iblup-icon-bg: var(--color-bg-element);
    --iblup-icon-size: 50px;
    --iblup-suggestion-card-bg: var(--color-bg-surface);
}

/* --- 2. Reset & Base Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    border-color: var(--color-border-subtle);
}

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--color-bg-deep);
    color: var(--color-text-primary);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: contain;
}

/* Estilos base para elementos comunes */
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); margin-bottom: var(--space-4); color: var(--color-text-primary); }
h1 { font-size: var(--font-size-xxl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-md); }
p { margin-bottom: var(--space-4); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
a { color: var(--color-accent-primary); text-decoration: none; transition: color var(--transition-duration-fast) ease-in-out; } a:hover { color: var(--color-accent-primary-hover); text-decoration: underline; }
strong, b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } em, i { font-style: italic; } small { font-size: var(--font-size-sm); }
ul, ol { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; background-color: transparent; border-radius: 0;}
button { cursor: pointer; background: none; border: none; padding: 0; }
input::placeholder { color: var(--color-text-placeholder); opacity: 1;}
textarea::placeholder { color: var(--color-text-placeholder); opacity: 1;}

/* Clases Utilitarias Comunes */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.text-center { text-align: center; }
.price { color: var(--color-success); font-weight: var(--font-weight-medium); }
.error-message { color: var(--color-error); font-size: var(--font-size-sm); margin-top: var(--space-2); }

/* --- 3. Layout Principal --- */
#app-container {
    width: 100%;
    max-width: var(--modal-max-width);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: var(--color-bg-base);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    /* SafeArea se aplica al contenido relevante, no al contenedor general */
}

/* --- 4. Sistema de Pantallas --- */
/* --- 4. Sistema de Pantallas (ANIMACIÓN NATIVA) --- */
.screen {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-base);
    
    /* MAGIA: Empiezan escondidas un poquito a la derecha o izquierda */
    visibility: hidden;
    opacity: 0;
    transform: translateX(15px); /* Se mueve a la derecha */
    
    /* Transición suave como seda */
    transition: 
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
        opacity 0.25s ease-out, 
        visibility 0s linear 0.3s;
        
    z-index: var(--z-base);
    padding-bottom: var(--bottom-nav-height);
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
}

.screen.active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0); /* Vuelve al centro */
    transition: 
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
        opacity 0.25s ease-out;
    z-index: var(--z-content);
}



/* Pantallas sin padding inferior (ej: mapa, chat) */
#map-screen, #chat-modal .chat-content {
     padding-bottom: 0 !important; /* Quitar padding inferior */
     /* Ajuste específico si el header/footer es flotante */
}
/* Asegurar que el mapa ocupe todo el espacio restante */
#map-screen {
     overflow-y: hidden;
}
#map-screen > main { /* El contenedor #map */
     flex-grow: 1;
     height: 100%; /* Asegura que ocupe el espacio */
}

/* Header genérico para pantallas (que no son mapa ni home) */
.screen-header {
     padding: var(--space-4);
     padding-top: calc(var(--space-4) + env(safe-area-inset-top));
     background-color: var(--color-bg-surface);
     border-bottom: var(--border-width) solid var(--color-border-divider);
     flex-shrink: 0;
     text-align: center;
     position: relative;
}
.screen-header h2 {
     font-size: var(--font-size-md);
     margin: 0;
}

/* Main content para pantallas con scroll */
.screen > main {
     flex-grow: 1;
     overflow-y: auto;
     /* Padding general, se puede sobreescribir */
     padding: var(--space-2);
}


/* --- 5. Autenticación (Login/Register - Estilos Base) --- */
.auth-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; padding: var(--space-8) var(--space-6); text-align: center; }
.auth-header { margin-bottom: var(--space-8); }
.auth-header h1 { font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); color: var(--color-text-primary); }
.auth-header p { font-size: var(--font-size-md); color: var(--color-text-secondary); margin-bottom: 0; max-width: 350px; margin-left: auto; margin-right: auto; }
.auth-form-container { width: 100%; max-width: 400px; }
.auth-form-container form { display: flex; flex-direction: column; gap: var(--space-5); }
/* Estilos de input-group, botones, etc. van en Parte 2 o components.css */
.auth-switch { margin-top: var(--space-6); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.auth-switch a { color: var(--color-accent-primary); font-weight: var(--font-weight-medium); margin-left: var(--space-1); }
.auth-terms { font-size: 11px; color: var(--color-text-tertiary); line-height: var(--line-height-tight); margin-top: var(--space-8); text-align: center; max-width: 350px; margin-left: auto; margin-right: auto; }
.separator { text-align: center; margin: var(--space-6) 0; position: relative; color: var(--color-text-tertiary); font-size: var(--font-size-xs); text-transform: uppercase; }
.separator::before, .separator::after { content: ''; position: absolute; top: 50%; width: calc(50% - 25px); height: 1px; background-color: var(--color-border-subtle); }
.separator::before { left: 0; } .separator::after { right: 0; }
.separator span { background-color: var(--color-bg-base); padding: 0 var(--space-2); position: relative; z-index: 1; }

/* ================================================ */
/* === NUEVO: Estilos Home Screen (Paso 1 HTML) === */
/* ================================================ */

#home-screen {
    /* La pantalla ya tiene display: flex; flex-direction: column; */
    /* Quitar padding inferior default de screen */
    padding-bottom: 0 !important;
}

/* Header Home */
.home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-base); /* O transparente si es flotante */
    flex-shrink: 0;
    /* SafeArea */
    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right));
}
.home-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.home-logo {
    height: 40px; /* Ajustar tamaño logo */
    width: auto;
    display: block;
}
.home-logo-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: 1px;
}
.home-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.home-header-action-btn {
    /* Heredar estilos .icon-btn? O definir aquí */
    background: none; border: none; color: var(--color-text-secondary);
    font-size: 1.4rem; /* Tamaño icono */
    cursor: pointer; padding: var(--space-2); border-radius: 50%;
    display: inline-flex; justify-content: center; align-items: center;
    width: 40px; height: 40px; position: relative;
    transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast);
}
.home-header-action-btn:hover {
    background-color: var(--color-bg-element);
    color: var(--color-text-primary);
}
/* Badge notificaciones en home header (reutilizar) */
#home-notification-badge {
    position: absolute;
    top: 4px; right: 4px;
    /* Heredar estilos .notification-badge */
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    border-radius: var(--radius-full);
    min-width: 16px; height: 16px; font-size: 10px; font-weight: 500;
    line-height: 16px; padding: 0 4px; text-align: center;
    border: 1px solid var(--color-bg-base);
}

/* Contenido Principal Home */
.home-content {
    flex-grow: 1;
    overflow-y: auto; /* Permitir scroll */
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + var(--bottom-nav-height) + env(safe-area-inset-bottom)); /* Espacio para evitar solapamiento con bottom nav */
}

/* Barra Búsqueda Home */
.home-search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: #e4e4e4;
    padding: 11px 16px;
    border-radius: 40px;
    margin-bottom: var(--space-6);
    cursor: pointer; /* Para indicar que es clickeable */
    transition: background-color var(--transition-duration-fast);
}
.home-search-bar:hover {
    background-color: var(--color-bg-surface-hover);
}
.home-search-bar i {
    color: #000;
    font-size: 22px;
}
.home-search-bar input[type="text"] {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 20px;
    color: var(--color-text-primary);
    padding: 0; /* Sin padding extra */
    pointer-events: none; /* El input es solo visual, el click es en el div */
}

/* Sección Genérica Home */
.home-section {
    margin-bottom: var(--space-5);
}
.home-section h2 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

/* Sección Sugerencias */
.suggestions-grid {
     display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    align-items: end;
}
.suggestion-card {
    background-color: #ececec; /* Fondo tarjetas */
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    aspect-ratio: 1 / 1; /* Hacerlas cuadradas */
    justify-content: center;
    transition: transform var(--transition-duration-fast) ease, background-color var(--transition-duration-fast);
}
.suggestion-card:hover {
    transform: translateY(-3px);
    background-color: #ececec;
}
.suggestion-icon {
    width: var(--iblup-icon-size, 50px);
    height: var(--iblup-icon-size, 50px);
    background-color: #ececec; /* Fondo icono */
    border-radius: var(--radius-md); /* O 50% si son circulares */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Tamaño icono FontAwesome */
    color: var(--color-text-secondary); /* Color icono */
    margin-bottom: var(--space-1);
    /* Placeholder - Reemplazar con iconos/imágenes reales */
    /* background-image: url(...); background-size: cover; */
}
/* Placeholder con FontAwesome */
.suggestion-icon.icon-jobs::before { content: '\f554'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } /* briefcase */
.suggestion-icon.icon-myblups::before { content: '\f02c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } /* tags */
/* .suggestion-icon.icon-auction::before { content: '\f0e7'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } bolt */
/* .suggestion-icon.icon-benefits::before { content: '\f091'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } trophy */

.suggestion-card span {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

/* Banner Promocional Home */
.home-banner {
    background: linear-gradient(45deg, var(--color-accent-primary), var(--color-accent-primary-active)); /* Gradiente */
    color: var(--color-text-on-accent);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    text-align: left; /* O center */
    position: relative;
    overflow: hidden;
    /* Podría tener una imagen de fondo */
}
.home-banner h2 {
    color: inherit; /* Heredar color del banner */
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
    max-width: 70%; /* Evitar que ocupe todo si hay imagen */
}
.home-banner .btn {
    border-radius: 40px;
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
    font-weight: var(--font-weight-semibold);
}
.home-banner .btn:hover {
    background-color: rgba(255, 255, 255, 1);
}
#home-search-input::placeholder {
    color: #373435;  /* Cambia el color a tu preferencia, por ejemplo, tomate */
    font-size: 20px;  /* Cambia el tamaño de la letra si lo necesitas */
    font-weight: 700;
}
/* Placeholder para imagen en banner */
.home-banner::after {
    /* content: ''; */ /* Descomentar para añadir imagen */
    /* display: block; */
    /* position: absolute; */
    /* right: 0; bottom: -20px; */
    /* width: 150px; height: auto; */ /* Ajustar tamaño */
    /* background-image: url('...'); */
    /* background-size: contain; background-repeat: no-repeat; */
    /* opacity: 0.8; */
}

/* Sección Mejora Experiencia */
.experience-section h2 {
    /* Estilo ya definido */
}
.experience-cards {

    padding-bottom: 3.6rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive */
    gap: var(--space-4);
}
.experience-card {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden; /* Para redondear imagen */
    /* box-shadow: var(--shadow-md); */
    cursor: pointer;
    transition: transform var(--transition-duration-normal) ease, box-shadow var(--transition-duration-normal);
}
.experience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.experience-card img {
    width: 100%;
    height: 200px; /* Altura fija imagen */
    object-fit: cover; /* Cubrir espacio */
    display: block;
    background-color: var(--color-bg-element); /* Fondo si imagen no carga */
}
.experience-card h3 {
    font-size: var(--font-size-base); /* Más pequeño */
    font-weight: var(--font-weight-medium);
    margin: var(--space-3) var(--space-4) var(--space-1) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.experience-card h3 i {
    font-size: 0.8em;
    opacity: 0.7;
    transition: transform var(--transition-duration-fast);
}
.experience-card:hover h3 i {
    transform: translateX(4px);
}
.experience-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 var(--space-4) var(--space-4) var(--space-4);
    line-height: var(--line-height-snug);
}

/* ================================================ */
/* === NUEVO: Estilos Bottom Navigation Bar === */
/* ================================================ */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--modal-max-width); /* Limitar al ancho del contenedor */
    margin: 0 auto; /* Centrar */
    height: var(--bottom-nav-height); /* Altura base */
    background-color: var(--color-bg-surface); /* Fondo superficie */
    /*border-top: var(--border-width) solid var(--color-border-divider);*/
    display: flex;
    justify-content: space-around;
    align-items: stretch; /* Estirar items verticalmente */
    z-index: var(--z-bottom-nav); /* Encima del contenido */
    /*box-shadow: 0 -5px 15px rgba(0,0,0,0.2);*/ /* Sombra superior */

    /* SafeArea */
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.bottom-nav-item {
    flex: 1 1 0px; /* Distribuir espacio equitativamente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-1); /* Espacio entre icono y texto */
    background: none;
    border: none;
    color: var(--color-text-secondary); /* Color inactivo */
    font-size: var(--font-size-xs); /* Tamaño texto */
    font-weight: var(--font-weight-medium);
    text-align: center;
    cursor: pointer;
    padding: var(--space-1) 0; /* Padding vertical mínimo */
    position: relative; /* Para badge */
    transition: color var(--transition-duration-fast) ease;
}

.bottom-nav-item i {
    font-size: 1.25rem; /* Tamaño iconos */
    line-height: 1; /* Evitar espacio extra */
    margin-bottom: 2px; /* Ajuste fino */
}

.bottom-nav-item span {
    line-height: 1; /* Evitar espacio extra */
    display: block; /* Asegurar que ocupe su espacio */
}

/* Estado Activo */
.bottom-nav-item.active {
    color: var(--color-accent-primary); /* Color de acento primario */
}
.bottom-nav-item:hover {
     color: var(--color-text-primary); /* Blanco al hover */
}
.bottom-nav-item.active:hover {
    color: var(--color-accent-primary-hover); /* Oscurecer acento al hover */
}

/* Badge en botón de Actividad */
#bottom-nav-activity-badge {
    position: absolute;
    top: 6px; /* Ajustar posición */
    right: calc(50% - 20px); /* Ajustar posición horizontal relativa */
    /* Heredar estilos .notification-badge */
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    border-radius: var(--radius-full);
    min-width: 16px; height: 16px; font-size: 10px; font-weight: 500;
    line-height: 16px; padding: 0 4px; text-align: center;
    border: 1px solid var(--color-bg-surface); /* Borde color fondo nav */
}


/* --- 10. Sistema de Modales --- */
.modal-overlay { position: fixed; inset: 0; background-color: var(--modal-backdrop-bg); z-index: var(--z-modal-backdrop); opacity: 0; visibility: hidden; transition: opacity var(--modal-slide-duration) cubic-bezier(0.4, 0.0, 0.2, 1); }
.modal-overlay.active { opacity: 1; visibility: visible;  }
.modal { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: var(--modal-max-width); background-color: var(--color-bg-surface); z-index: var(--z-modal); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); max-height: 90vh; display: flex; flex-direction: column; visibility: hidden; transition: transform var(--modal-slide-duration) cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0s linear var(--modal-slide-duration); padding-bottom: env(safe-area-inset-bottom); margin-left: max(0px, env(safe-area-inset-left)); margin-right: max(0px, env(safe-area-inset-right)); }
.modal.large { max-height: 100vh; }
.modal.active { visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.modal-header { display: flex; justify-content: center; align-items: center; padding: var(--space-3) var(--space-4); padding-top: var(--space-5); background-color: transparent; flex-shrink: 0; position: relative; border-bottom: var(--border-width) solid var(--color-border-divider); }
.modal-header::before { content: ''; position: absolute; top: var(--space-2); left: 50%; transform: translateX(-50%); width: 48px; height: 4px; background-color: var(--color-border-interactive); border-radius: var(--radius-full); }
.modal-header h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); text-align: center; margin: 0; line-height: var(--line-height-snug); padding: 0 var(--space-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-close-btn { position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); width: 36px; height: 36px; font-size: 1.2rem; color: var(--color-text-secondary); background-color: var(--color-bg-element); z-index: 2; transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.modal-close-btn:hover { background-color: var(--color-bg-element-hover); color: var(--color-text-primary); }
.modal-content { padding: var(--space-6); overflow-y: auto; flex-grow: 1; }
.modal-content.scrollable { padding: 0; }
.modal-content.scrollable form { padding: var(--space-6); }
.modal-content::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track { background: transparent; } .modal-content::-webkit-scrollbar-thumb { background-color: var(--color-bg-element); border-radius: var(--radius-full); border: 2px solid var(--color-bg-surface); } .modal-content::-webkit-scrollbar-thumb:hover { background-color: var(--color-bg-element-hover); }
.modal-actions { padding: var(--space-4) var(--space-6); background-color: var(--color-bg-surface); display: flex; gap: var(--space-4); justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; border-top: var(--border-width) solid var(--color-border-divider); box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
.modal-actions .btn { width: auto; flex-grow: 0; }
.modal-actions:has(.btn:nth-child(1)):not(:has(.btn:nth-child(3))), .modal-actions:has(.btn:nth-child(2)):not(:has(.btn:nth-child(3))) { justify-content: center; }
.modal-actions .cancel-modal-btn:first-child:not(:last-child) { margin-right: auto; }
.form-actions { padding: var(--space-6); margin: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); background-color: var(--color-bg-surface); border-top: var(--border-width) solid var(--color-border-divider); display: flex; gap: var(--space-4); justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; margin-top: var(--space-8); }
.form-actions .btn { width: auto; flex-grow: 0; }
.form-actions .cancel-modal-btn:first-child:not(:last-child) { margin-right: auto; }

/* --- 12. Estilos Comunes Listas --- */
.list-container { /* ... */ }
.list-container ul { /* ... */ }
.list-container li { position: relative; background-color: transparent; transition: background-color var(--transition-duration-fast) ease-in-out; }
.list-container li:last-child { border-bottom: none; }
.list-container li:hover { background-color: var(--color-bg-surface-hover); }
.list-empty-message { padding: var(--space-8) var(--space-6); text-align: center; color: var(--color-text-secondary); font-style: italic; font-size: var(--font-size-base); }
.list-container .error-message { padding: var(--space-6); text-align: center; color: var(--color-error); }

/* --- 13. Componentes Específicos (Modales, etc.) --- */
/* A. Detalles Trabajo */
.detail-item { padding: var(--space-3) 0; margin-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border-divider); display: flex; flex-direction: column; gap: var(--space-1); }
.detail-item:last-child { border-bottom: none; margin-bottom: 0; }
.detail-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.05em; }
.detail-value { font-size: var(--font-size-base); color: var(--color-text-primary); line-height: var(--line-height-snug); word-wrap: break-word; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.detail-value a { font-weight: var(--font-weight-medium); }
.detail-value .avatar-xs { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background-color: var(--color-bg-element); margin-right: var(--space-2); vertical-align: middle; border: 1px solid var(--color-border-subtle);}
/* Badges */
.job-status-badge, .application-status, .profile-badge { font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); display: inline-block; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; white-space: nowrap; margin-right: var(--space-2); }
.job-status-draft, .job-status-completed { background-color: var(--color-bg-element); color: var(--color-text-secondary); }
.job-status-open { background-color: var(--color-success); color: var(--color-text-on-accent); }
.job-status-assigned { background-color: var(--color-accent-primary); color: var(--color-text-on-accent); }
.job-status-cancelled { background-color: var(--color-error); color: var(--color-text-on-accent); }
.job-status-expired { background-color: transparent; color: var(--color-text-tertiary); border: 1px solid var(--color-border-subtle); }
.job-urgent-badge { background-color: var(--color-warning); color: var(--color-text-on-accent-darkbg); border-radius: var(--radius-sm); }
.application-status.status-pending { background-color: #b5b5b5;; color: var(--color-text-on-accent-darkbg); }
.application-status.status-accepted, .application-status.status-assigned { background-color: var(--color-success); color: var(--color-text-on-accent); }
.application-status.status-rejected { background-color: var(--color-error); color: var(--color-text-on-accent); }
.application-status.status-withdrawn { background-color: var(--color-bg-element); color: var(--color-text-tertiary); text-decoration: line-through; }
.profile-badge.verified { background-color: var(--color-accent-primary); color: var(--color-text-on-accent); }
.profile-badge.top-rated { background-color: rgba(245, 158, 11, 0.1); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.3); }
.applicant-count { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* B. Ver Postulantes */
.application-item { display: flex; flex-direction: column; gap: var(--space-2); }
.application-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.applicant-info { display: flex; align-items: center; gap: var(--space-2); flex-grow: 1; min-width: 0; }
.applicant-info h4 { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.applicant-rating { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; }
.applicant-rating i { color: var(--color-warning); font-size: 0.9em; }
.application-item p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-snug); word-wrap: break-word; }
.application-item strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.application-item a { font-weight: normal; }
.app-item-message { background-color: var(--color-bg-element); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-top: var(--space-2); font-style: italic; color: var(--color-text-tertiary); font-size: var(--font-size-sm); border-left: 3px solid var(--color-border-subtle); }
.application-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* Botón pequeño */
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

.application-actions .btn-sm { width: auto; flex-shrink: 0; }
.application-actions .btn-sm i { margin-right: var(--space-1); font-size: 0.9em; }

/* C. Mis Trabajos */
.my-job-item { display: flex; flex-direction: column; gap: var(--space-2); }
.my-job-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.my-job-item-header h4 { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.2; flex-grow: 1; }
.my-job-item-header > span { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex-shrink: 0; }
.my-job-item p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-snug); }
.my-job-item strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.my-job-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.my-job-actions .btn-sm { width: auto; flex-shrink: 0; }
.my-job-actions .btn-sm i { margin-right: var(--space-1); font-size: 0.9em; }

/* D. Perfil */
.profile-avatar-section { display: flex; flex-direction: column; align-items: center; }
.profile-avatar-img {  border-radius: 50%; object-fit: cover; border: 3px solid var(--color-border-subtle); background-color: var(--color-bg-element); }



/* Subida Fotos Adicionales */
.profile-picture-upload { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border-divider); }
.profile-picture-upload label:first-of-type { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.picture-preview-container { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); margin-bottom: var(--space-2); }
.picture-preview-img { display: block; border-radius: var(--radius-md); object-fit: cover; background-color: var(--color-bg-element); border: var(--border-width) solid var(--color-border-subtle); flex-shrink: 0; }
.picture-preview-img.dni-preview { width: 150px; height: 95px; }
.picture-preview-img.body-preview { width: 100px; height: 120px; }
.change-picture-btn { flex-shrink: 0; }
.profile-picture-upload .form-text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); display: block; }
.checkbox-group { display: flex; align-items: center; gap: var(--space-2); } /* Estilo checkbox se define luego */
/* Portafolio en Perfil */

/* E. Notificaciones */
#notifications-modal .modal-content.list-container { padding: 0; }
.notification-item { display: flex; align-items: center; gap: var(--space-3); }
.notification-item.unread { background-color: rgba(var(--color-accent-primary-rgb, 0, 119, 255), 0.1); }
.notification-item.unread .notification-text p { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.notification-content { display: flex; align-items: center; gap: var(--space-3); flex-grow: 1; text-decoration: none; color: inherit; }
.notification-icon { flex-shrink: 0; font-size: 1.3rem; width: 30px; text-align: center; color: var(--color-text-secondary); }
.notification-item.unread .notification-icon { color: var(--color-accent-primary); }
.notification-text { flex-grow: 1; }
.notification-text p { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-snug); }
.notification-text .sender-name { font-style: italic; opacity: 0.9; }
.notification-time { font-size: var(--font-size-xs); color: var(--color-text-tertiary); opacity: 0.8; }
.mark-read-btn:hover { opacity: 0.8; }
.notification-item:not(.unread) .mark-read-btn { display: none; }
#mark-all-read-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* F. Calificar */
.rated-user-info { text-align: center; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border-divider); }
.rated-user-info p { margin: 0 0 var(--space-1) 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.user-summary { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); }
.rated-user-info strong { color: var(--color-text-primary); font-weight: normal; }
.rating-stars-group { text-align: center; margin-bottom: var(--space-4); }
.rating-stars-group > label { display: block; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); margin-bottom: var(--space-3); color: var(--color-text-secondary); }
.rating-stars { display: inline-flex; flex-direction: row-reverse; justify-content: center; }
.rating-stars input[type="radio"] { display: none; }
.rating-stars label { font-size: 2.2rem; color: var(--color-border-interactive); cursor: pointer; padding: 0 var(--space-2); transition: color 0.2s ease, transform 0.1s ease; }
.rating-stars label:hover { transform: scale(1.1); }
.rating-stars:not(:hover) input[type="radio"]:checked ~ label, .rating-stars:hover input[type="radio"]:hover ~ label { color: var(--color-warning); }
.rating-stars input[type="radio"]:hover ~ label { color: var(--color-warning); opacity: 0.7; }
#rating-score-error { margin-top: var(--space-2); text-align: center; display: none; }



.message-area { position: fixed; top: calc(var(--space-4) + env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -150%); width: auto; min-width: 280px; max-width: 90%; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); color: var(--color-text-on-accent); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); z-index: var(--z-toast); text-align: center; box-shadow: var(--shadow-md); transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.4s; opacity: 0; background-color: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
.message-area.show { opacity: 1; transform: translate(-50%, 0); }
.message-area.success { background-color: var(--color-success); border: none; }
.message-area.error { background-color: var(--color-error); border: none; }
.message-area.info { background-color: var(--color-info); border: none; }
.message-area.warning { background-color: var(--color-warning); color: var(--color-text-on-accent-darkbg); border: none; }
/* Skeletons ya definidos */

/* --- Otros (Checkbox, Inputs generales si no están en input-group) --- */
.form-group { margin-bottom: var(--space-5); }
.form-group > label:not(.sr-only):not(.checkbox-label) { display: block; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); margin-bottom: var(--space-2); color: var(--color-text-secondary); text-align: left; }
.form-group > input[type="text"]:not(#search-input):not(#home-search-input), .form-group > input[type="email"], .form-group > input[type="password"], .form-group > input[type="tel"], .form-group > input[type="number"], .form-group > input[type="url"], .form-group > textarea, .form-group > select { width: 100%; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border-interactive); border-radius: var(--radius-md); font-size: var(--font-size-base); background-color: var(--color-bg-element); color: var(--color-text-primary); transition: border-color var(--transition-duration-fast), box-shadow var(--transition-duration-fast); }
.form-group > input:focus, .form-group > textarea:focus, .form-group > select:focus { border-color: var(--color-accent-primary); outline: none; box-shadow: 0 0 0 var(--border-width-focus) var(--color-accent-primary-glow); }
.form-group > select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23737373%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 0.9em; padding-right: calc(var(--space-4) + 1.5em); cursor: pointer; }
.checkbox-group { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-group input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: var(--border-width-focus) solid var(--color-border-interactive); border-radius: var(--radius-sm); position: relative; cursor: pointer; transition: background-color var(--transition-duration-fast), border-color var(--transition-duration-fast); }
.checkbox-group input[type="checkbox"]:checked { background-color: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.checkbox-group input[type="checkbox"]::before { content: ''; display: block; width: 12px; height: 12px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2010%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M4%2010L0%206l1.5-1.5L4%207l6.5-6.5L12%202z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.1s ease-in-out; }
.checkbox-group input[type="checkbox"]:checked::before { transform: translate(-50%, -50%) scale(1); }
.checkbox-group label.checkbox-label { margin-bottom: 0; font-weight: normal; cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-sm);}
.checkbox-group:has(input:checked) label.checkbox-label { color: var(--color-text-primary); }

/* --- FIN PARTE 2/2 --- */



/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================== */
/* === ESTILOS OVERLAYS CATEGORÍA / DISTANCIA === */
/* ================================================== */

.map-flow-overlay {
    position: fixed; /* O absolute si prefieres que esté dentro de #app-container */
    /* Posición sobre el mapa, pero debajo de modales estándar */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky); /* Debajo de modales (100), encima de FABs (60) */
    display: none; /* Oculto por defecto */
    justify-content: center; /* Centrar tarjeta horizontalmente */
    align-items: flex-end; /* Alinear tarjeta abajo */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    /* SafeArea */
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Animación de entrada/salida */
    opacity: 0;
    transition: opacity var(--transition-duration-normal) ease, visibility 0s linear var(--transition-duration-normal);
}
.map-flow-overlay.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.overlay-card {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Redondeado superior */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    padding: var(--space-6);
    padding-top: var(--space-8); /* Más padding arriba por botón cerrar */
    width: 100%;
    max-width: var(--modal-max-width); /* Mismo ancho que app */
    position: relative; /* Para botón cerrar */
    transform: translateY(100%); /* Empieza fuera de vista */
    transition: transform var(--transition-duration-normal) cubic-bezier(0.4, 0.0, 0.2, 1);
}
.map-flow-overlay.visible .overlay-card {
    transform: translateY(0px)!important; /* Sube a su posición */
}

.overlay-close-btn {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-tertiary);
    background-color: var(--color-bg-element);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast);
}
.overlay-close-btn:hover {
    background-color: var(--color-bg-element-hover);
    color: var(--color-text-primary);
}

.overlay-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin-bottom: var(--space-6);
    color: var(--color-text-primary);
}

/* Estilos Overlay Categoría */
.category-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: var(--space-4);
}
.category-option {
    background-color: var(--color-bg-element);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border-interactive);
    transition: transform var(--transition-duration-fast), border-color var(--transition-duration-fast), background-color var(--transition-duration-fast);
}
.category-option:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-interactive-focus);
    background-color: var(--color-bg-element-hover);
}
.category-icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}
.category-option h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin: 0;
    color: var(--color-text-primary);
}
.category-option p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-tight);
    margin: 0;
}

/* Estilos Overlay Distancia */
.distance-slider-container {
    margin-bottom: var(--space-6);
    text-align: center;
}
.distance-slider-container label {
    display: block;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}
#distance-value-display {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    min-width: 2em; /* Espacio para números */
    display: inline-block;
}
input[type="range"] {
    width: 100%;
    height: 8px;
    cursor: pointer;
    appearance: none;
    background: linear-gradient(to right, var(--color-accent-primary) 0%, var(--color-accent-primary) 50%, var(--color-bg-element) 50%, var(--color-bg-element) 100%); /* El % se actualiza con JS */
    border-radius: var(--radius-full);
    outline: none;
    margin-top: var(--space-2);
    transition: background .1s ease-in-out;
}
/* Estilos Thumb (Chrome/Safari) */
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--color-accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--color-bg-surface); /* Borde para destacar */
    box-shadow: var(--shadow-sm);
    transition: transform .1s ease-in-out;
}
input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.1);
}
/* Estilos Thumb (Firefox) */
input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--color-accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    transition: transform .1s ease-in-out;
}
input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.1);
}
/* Estilos Track (Firefox) */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: var(--color-bg-element);
    border-radius: var(--radius-full);
}
input[type="range"]::-moz-range-progress {
    height: 8px;
    background: var(--color-accent-primary);
    border-radius: var(--radius-full);
}


.distance-actions {
    display: flex;
    justify-content: space-between; /* Botones en extremos */
    gap: var(--space-4);
}
.distance-actions .btn {
    flex: 1; /* Ocupar espacio */
}

/* --- FIN ESTILOS OVERLAYS --- */

/* frontend/css/style.css (CORREGIDO - COMPLETO) */




/* ================================================== */
/* === ESTILOS PASOS REGISTRO (CORRECCIÓN VISIBILIDAD) === */
/* ================================================== */
#register-steps-container { width: 100%; max-width: 450px; margin: 0 auto; padding: var(--space-lg) var(--space-md); flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; padding-top: calc(var(--space-lg) + env(safe-area-inset-top)); padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); padding-left: calc(var(--space-md) + env(safe-area-inset-left)); padding-right: calc(var(--space-md) + env(safe-area-inset-right)); }
.registration-step { display: none; /* *** CLAVE: Oculto por defecto *** */ flex-direction: column; width: 100%; flex-grow: 1; }
.registration-step.active { display: flex; /* *** CLAVE: Mostrar solo el activo *** */ }
.step-header { display: flex; align-items: center; margin-bottom: var(--space-lg); min-height: 44px; position: relative; }
.step-back-btn { background: var(--color-bg-element); border: none; color: var(--color-text-primary); width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s ease; position: absolute; left: 0; top: 0; }
.step-back-btn:hover { background-color: var(--color-bg-element-hover); } .step-back-btn i { line-height: 1; }

.step-header:has(.step-back-btn) .step-title { padding-left: 54px; }
.step-subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-xs); margin-bottom: var(--space-lg); line-height: var(--line-height-base); text-align: left; }
.step-content { flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-md); }
/* Estilos inputs registro */
.form-group label:not(.sr-only) { display: contents; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group input[type="password"], .form-group input[type="url"], .form-group textarea { background-color: var(--color-bg-element); color: var(--color-text-primary); border: 1px solid var(--color-border-interactive); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-text-placeholder); opacity: 1; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 1px var(--color-accent-primary); }
/* Navegación Pasos */
.step-navigation { margin-top: auto; padding-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; }
.step-navigation.no-padding { padding-top: 0; }
/* Botón Siguiente/Finalizar */

/* Estilos específicos de pasos (rol, código, pass, nombre, terms, employer/worker, success) como estaban antes */
/* ================================================== */
/* === ESTILOS SELECCIÓN DE ROL (Uber Premium V4) === */
/* ================================================== */

.role-selection-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px; /* Espacio para la info de abajo */
}

.role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;
    border: 2px solid transparent; /* Borde transparente listo */
    border-radius: 16px; /* Bordes más redondeados */
    padding: 20px;
    height: 280px; /* Tu altura deseada */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    text-align: left;
}

.role-card:hover {
    background-color: #e8e8e8;
    transform: translateY(-4px); /* Levantar un poco */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Sombra suave */
}

.role-card.selected {
    background-color: #ffffff;
    border-color: #000000; /* Borde negro al seleccionar */
}

/* --- CENTRADO DE IMAGEN --- */
/* Este wrapper empuja la imagen al centro óptico */
.role-img-wrapper {
    flex-grow: 1; /* Ocupa todo el espacio disponible arriba */
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    width: 100%;
    padding-bottom: 20px; /* Espacio visual antes del texto */
}

.role-card img.role-img {
    width: 170px; /* Un poco más grandes */
    height: 170px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.role-card:hover img.role-img {
    transform: scale(1.15) rotate(-3deg); /* Efecto 3D divertido */
}

/* --- TEXTOS --- */
.role-text-container {
    width: 100%;
    z-index: 2;
    /* No necesita padding-right porque la flecha tiene posición absoluta */
}

.role-card span {
    display: block;
    font-size: 1.1rem;
    font-weight: 800; /* Extra bold */
    color: #000000;
    line-height: 1.1;
    margin-bottom: 6px;
}

.role-card small {
    display: block;
    font-size: 0.75rem;
    color: #666;
    line-height: 1.3;
    font-weight: 500;
    max-width: 80%; /* Para que no choque con la flecha */
}

/* --- FLECHA NEGRA --- */
.role-card::after {
    content: '\f061';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: transform 0.2s ease, background-color 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.role-card:hover::after {
    transform: translateX(5px);
    background-color: #333;
}

/* --- NUEVO: CAJA DE INFORMACIÓN DINÁMICA --- */
.role-dynamic-info {
    background-color: #f0f8ff; /* Azul muy clarito (o usa #f3f3f3 para gris) */
    border-left: 4px solid #000; /* Línea de acento Uber */
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 20px;
    
    /* Animación de entrada */
    animation: slideUpFade 0.4s ease forwards;
}

.role-dynamic-info i {
    font-size: 1.2rem;
    color: #000;
}

.role-dynamic-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
}

/* Animación */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Link Login */
#back-to-login-link {
    margin-top: 10px;
    background: #f9f9f9;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    color: #000;
    font-size: 0.95rem;
}
/* ================================================== */
/* === HEADER MINIMALISTA (Estilo Uber) === */
/* ================================================== */

/* Contenedor del header */
.minimal-header {
    padding-top: 40px;      /* Mucho aire arriba */
    padding-bottom: 20px;   /* Espacio antes de las tarjetas */
    text-align: left;       /* Alineado a la izquierda */
    margin-bottom: 0;       /* Quitamos márgenes extraños */
}

/* El texto "iBlup" (Logotipo) */
.app-brand-title {
    font-family: 'Inter', -apple-system, sans-serif; /* Fuente muy limpia */
    font-size: 3rem;        /* Grande y legible */
    font-weight: 700;       /* Bold pero no black */
    letter-spacing: -1px;   /* Kerning apretado (moderno) */
    color: #000000;
    margin: 0;
}

/* Ajuste opcional para el contenedor general en móvil */
#register-steps-container {
    /* Asegurar que no tenga padding excesivo arriba que sume al header */
    padding-top: env(safe-area-inset-top); 
}

.code-input-container { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-lg); }
.code-input { width: 48px; height: 56px; font-size: var(--font-size-xl); text-align: center; border: 1px solid var(--color-border-interactive); border-radius: var(--radius-md); background-color: var(--color-bg-element); color: var(--color-text-primary); -moz-appearance: textfield; appearance: textfield; }
.code-input::-webkit-outer-spin-button, .code-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.code-input:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 1px var(--color-accent-primary); }
.password-group { position: relative; }
.password-requirements { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-lg) 0; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.password-requirements li { margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-2); transition: color 0.2s ease; }
.password-requirements li i { font-size: 0.9em; width: 14px; text-align: center; color: var(--color-error); transition: color 0.2s ease; }
.password-requirements li.valid { color: var(--color-success); } .password-requirements li.valid i { color: var(--color-success); }
.terms-content .step-subtitle a { color: var(--color-accent-primary); text-decoration: underline; }
.accept-terms-group { margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-3); }
.accept-terms-group input[type="checkbox"] { width: 24px; height: 24px; border: 2px solid var(--color-border-interactive); background-color: transparent; border-radius: var(--radius-sm); flex-shrink: 0; cursor: pointer; appearance: none; -webkit-appearance: none; position: relative; }
.accept-terms-group input[type="checkbox"]:checked { background-color: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.accept-terms-group input[type="checkbox"]:checked::before { content: ''; display: block; width: 14px; height: 14px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2010%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M4%2010L0%206l1.5-1.5L4%207l6.5-6.5L12%202z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.accept-terms-group label { font-size: var(--font-size-base); color: var(--color-text-primary); cursor: pointer; line-height: var(--line-height-tight); }





/* ================================================== */
/* === ANIMACIÓN DE ÉXITO PREMIUM (Paso 9) === */
/* ================================================== */

.success-step .step-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding-bottom: 20%; /* Ajuste visual para centrarlo bien en pantalla */
}

/* Círculo con efecto POP! */
.success-checkmark {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #000000; /* Negro elegante (o usa var(--color-success)) */
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    
    /* La animación de entrada */
    transform: scale(0);
    animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.success-step .step-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #000;
}

.success-step .step-subtitle {
    font-size: 1rem;
    color: #666;
    margin-bottom: 40px;
    max-width: 80%;
}

/* Contenedor de la barra */
.progress-bar-container {
    width: 100%;
    max-width: 240px; /* Un poco más ancha */
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

/* La barra que se llena (Controlada por JS) */
.progress-bar {
    width: 0%; /* Empieza vacía obligatoriamente */
    height: 100%;
    background-color: #000; /* Negro */
    border-radius: 10px;
    /* Transición base nula para permitir el reset en JS */
    transition: width 0s; 
}

/* Estilos de Errores (Manteniendo lo que tenías para no romper nada) */
.step-error-message { 
    color: var(--color-error); 
    font-size: var(--font-size-sm); 
    margin-bottom: var(--space-md); 
    text-align: center; 
    display: none; 
}
.code-input.input-error { 
    border-color: var(--color-error) !important; 
}
.form-group input.input-error, .form-group textarea.input-error { 
    border-color: var(--color-error) !important; 
    box-shadow: 0 0 0 1px var(--color-error); 
}




/* --- FIN ARCHIVO CSS --- */

/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Preels) */
/* ================================================ */
/* === ESTILOS PANTALLA PREELS (CORREGIDO v2) === */
/* ================================================ */

/* ================================================ */
/* === ESTILOS PANTALLA PREELS (CORREGIDO v3) === */
/* ================================================ */

#preels-screen {
    /* display: flex; flex-direction: column; */
}

/* Header Preels (YA NO ES STICKY) */
#preels-screen .screen-header {
    /* Estilos base del header (padding, flex, etc.) ya definidos */
    /* position: sticky; <<< ELIMINADO */
    /* top: 0; <<< ELIMINADO */
    position: relative; /* O quitar position si no se necesita para .screen-back-btn */
    background-color: var(--color-bg-surface);
    z-index: var(--z-sticky); /* Mantener Z-index por si acaso */
    width: 100%;
    transition: transform var(--transition-duration-normal) ease-in-out;
    max-width: 100%;
    will-change: transform;
    border-bottom: var(--border-width) solid var(--color-border-divider);
    flex-shrink: 0; /* <<<< AÑADIDO: Evita que el header se encoja */
}

/* Clase para ocultar el header (sin cambios) */
#preels-screen .screen-header.header-hidden {
    transform: translateY(-100%);
    padding: var(--space-0);
    padding-top: calc(var(--space-0) + env(safe-area-inset-top));
    position: absolute;
}

/* Botón Volver (Puede necesitar ajuste si header no es relative) */
#preels-screen .screen-back-btn {
     position: absolute; /* Funciona si .screen-header es relative o si .screen es relative */
     left: var(--space-4);
     top: 50%;
     transform: translateY(-50%);
    /* Resto de estilos sin cambios */
}
#preels-screen .screen-header h2 {
    /* Ajustar padding si botón atrás es absoluto */
    width: 100%; text-align: center; padding-left: 50px; padding-right: 50px; margin: 0;
}

/* Contenido Principal Scrollable (#preels-content) */
#preels-content {
    flex-grow: 1;
    overflow-y: auto;

    /* Sin padding-top */
    padding-top: var(--space-0);
    padding-left: var(--space-0);
    padding-right: var(--space-0);
    padding-bottom: var(--space-0);

    /* Ocultar scrollbar (sin cambios) */
    scrollbar-width: none; -ms-overflow-style: none;
}
#preels-content::-webkit-scrollbar { width: 0; height: 0; background: transparent; }





/* Cuadrícula de Imágenes (sin cambios) */
/*.preels-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}*/
.preels-gallery-item {
    position: relative; aspect-ratio: 1 / 1; background-color: var(--color-bg-element);
    overflow: hidden; cursor: pointer; border-radius: 0;
}
.preels-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-duration-normal) ease; }
.preels-gallery-item:hover img { transform: scale(1.05); }
.preels-gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%); opacity: 0; transition: opacity var(--transition-duration-normal) ease; }
.preels-gallery-item:hover::after { opacity: 1; }
.preels-item-user { position: absolute; bottom: var(--space-2); left: var(--space-2); display: flex; align-items: center; gap: var(--space-2); opacity: 0; transform: translateY(10px); transition: opacity var(--transition-duration-normal) ease, transform var(--transition-duration-normal) ease; pointer-events: none; z-index: 1; }
.preels-gallery-item:hover .preels-item-user { opacity: 1; transform: translateY(0); }
.preels-item-user img.avatar-xs { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.5); }
.preels-item-user span { font-size: var(--font-size-xs); color: var(--color-text-on-accent); font-weight: var(--font-weight-medium); text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }

/* Skeleton y Loader (sin cambios) */
#preels-gallery.skeleton-loading .preels-gallery-item.skeleton-loader { aspect-ratio: 1 / 1; margin-bottom: 0; border-radius:0; }
#preels-loader { color: var(--color-text-secondary); text-align: center; padding: 1rem; display: none; }
#preels-loader i { margin-right: var(--space-2); }
.preels-empty-message { /* Hereda de .list-empty-message o define aquí */ }

/* --- FIN ESTILOS PREELS CORREGIDO v2 --- */



/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Options/Benefits) */

/* ================================================ */
/* === ESTILOS PANTALLAS OPCIONES / BENEFICIOS === */
/* ================================================ */

/* Contenido principal scrollable con padding */
.scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-6); /* Padding estándar */
}

/* Botón Volver genérico para pantallas */
.screen-header .screen-back-btn {
    position: absolute; /* Posicionar respecto al header */
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    /* Heredar estilos .icon-btn o definir aquí */
    background: none; border: none; color: var(--color-text-secondary);
    font-size: 1.5rem; cursor: pointer; padding: var(--space-2);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast);
}
.screen-header .screen-back-btn:hover {
    background-color: var(--color-bg-element);
    color: var(--color-text-primary);
}

/* Ajustar título si hay botón atrás */
.screen-header:has(.screen-back-btn) h2 {
    padding-left: 40px; /* Espacio para el botón */
    text-align: center; /* Centrar título */
}

/* Estilos específicos si se necesita diferenciar Options/Benefits */
#options-screen h3,
#benefits-screen h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
}

#options-screen p,
#benefits-screen p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* --- FIN ESTILOS OPTIONS/BENEFITS --- */


/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Subasta) */

/* ================================================ */
/* === ESTILOS PANTALLA SUBASTA === */
/* ================================================ */

#auction-screen .scrollable-content {
    padding: 0; /* Quitar padding si la lista maneja el suyo */
}

#auction-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auction-item { /* Estilo similar a my-job-item */
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border-divider);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: background-color var(--transition-duration-fast);
}
.auction-item:last-child {
    border-bottom: none;
}
.auction-item:hover {
    background-color: var(--color-bg-surface-hover);
}

.auction-item-header { /* Similar a my-job-item-header */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}
.auction-item-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: 1.2;
    flex-grow: 1;
}
.auction-item-header > span { /* Contenedor badges */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Badge específico para número de pujas */
.bid-count-badge {
    background-color: var(--color-bg-element);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    line-height: 1;
    white-space: nowrap;
}
.bid-count-badge i {
    font-size: 0.9em;
}

.auction-item p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}
.auction-item strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* Acciones Subasta (Simplificado: Ver Detalles, ¿Pujar?) */
.auction-actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.auction-actions .btn-sm { /* Reutilizar btn-sm */
    width: auto;
    flex-shrink: 0;
}
.auction-actions .btn-sm i {
    margin-right: var(--space-1);
    font-size: 0.9em;
}
/* Botón específico para pujar (si se implementa) */
.btn-bid {
    background-color: var(--color-accent-secondary); /* Verde lima */
    color: var(--color-text-on-accent-darkbg);
}
.btn-bid:hover:not(:disabled) {
     background-color: var(--color-accent-secondary-hover);
}


/* --- FIN ESTILOS SUBASTA --- */






















/* frontend/css/style.css (AÑADIR AL FINAL - Corrección Visibilidad Bottom Nav) */

/* Ajuste z-index Bottom Nav */
.bottom-nav {
    z-index: var(--z-bottom-nav); /* Asegurar que esté sobre overlays (z-sticky = 50) */
}

/* Ajuste altura y posicionamiento Overlay */
.map-flow-overlay {
    /* Ya es position: fixed */
    top: 0; /* Cubrir desde arriba */
    /* bottom: var(--bottom-nav-height); */ /* <<< CORRECCIÓN: Dejar espacio ABAJO */
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); /* Incluir safe area */
    align-items: flex-end; /* Alinear tarjeta abajo DENTRO de este espacio */
    /* Quitar padding-bottom del overlay, la tarjeta lo maneja */
    padding-bottom: 0;
    /* Asegurar que el fondo cubra todo */
    /* background-color: rgba(0, 0, 0, 0.5); */
}

/* Ajuste padding inferior de la tarjeta del overlay para compensar */
.overlay-card {
     /* Añadir padding inferior extra si el nav está visible */
     /* Esto es difícil de hacer solo con CSS, JS podría añadir una clase */
     /* O simplemente aceptar que el último botón quede cerca del nav */
     padding-bottom: var(--space-6); /* Mantener padding inferior */
}

/* Ajuste padding inferior de Screens para Bottom Nav */
.screen {
    /* Aplicar padding solo si el bottom nav se muestra en esa pantalla */
    /* La lógica JS en showScreen ahora maneja esto */
    /* padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); */
}
#login-screen, #register-screen {
    /* Asegurar que estas pantallas NO tengan padding inferior para el nav */
     padding-bottom: 0 !important;
}
/* #map-screen se maneja específicamente para no tener padding */

/* Contenido principal con scroll debe respetar el padding inferior de la pantalla */
.screen > main.scrollable-content {
     /* Asegurar que el scroll termine antes del padding inferior de la pantalla */
      /* No es necesario estilo extra aquí si el padding está en .screen */
}


/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Bottom Nav +) */

/* ================================================ */
/* === AJUSTES BOTTOM NAV PARA 5 BOTONES === */
/* ================================================ */

.bottom-nav {
    /* Mantiene flex, etc. */
    /* Ajuste para el botón central si es necesario */
}

/* Ocultar botón "+" por defecto */
.bottom-nav-item.nav-item-post {
    display: none;
}

/* Mostrar botón "+" SOLO para empleadores */
#app-container.employer-role .bottom-nav .nav-item-post {
    display: flex; /* O el display que usen los otros items */
}

/* Ocultar botones normales cuando el "+" está visible (opcional, si son 5 justos) */
/* #app-container.employer-role .bottom-nav .bottom-nav-item:not(.nav-item-post) { */
    /* Podrías ajustar flex-basis si quieres que los 4 restantes ocupen menos espacio */
    /* flex-basis: 18%; O algo similar */
/* } */

/* Estilos específicos para el botón "+" */
.nav-item-post {

    flex: none;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #000000;
    position: relative;
    top: -14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-bg-surface);
    transition: transform 0.2s ease, background-color 0.2s ease;

}
.nav-item-post:hover {
    background-color: #ffffff;
    transform: scale(1.05) translateY(-7px);
    color: var(--color-text-on-accent);
    color: #000;
}
.nav-item-post:active {
    transform: scale(0.95) translateY(-15px);
}
.nav-item-post i {
    font-size: 1.5rem; /* Icono más grande */
    margin: 0; /* Sin margen si no hay texto */
    line-height: 1;
}
.nav-item-post span {
    display: none; /* Ocultar texto "Inicio", etc. en este botón */
}

/* Opcional: Efecto de pulso/brillo */
.nav-item-post::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background-color: rgb(0 110 255 / 35%);
    opacity: 0.7;
    z-index: -1;
    animation: pulse-glow 2s infinite ease-out;
}

@keyframes pulse-glow {
    0% { transform: scale(0.9); opacity: 0.7; }
    70% { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0; }
}






/* Ajustar padding inferior del contenido para que no choque con el botón elevado */
#app-container > .screen {
     /* Aumentar padding inferior si el botón "+" está visible */
     padding-bottom: calc(var(--bottom-nav-height) + 0px + env(safe-area-inset-bottom)); /* Altura nav + elevación + safe area */
}
/* Quitar padding extra si el bottom nav está oculto (login/register) */
#app-container.logged-out > .screen {
    padding-bottom: env(safe-area-inset-bottom);
}
/* Pantallas específicas sin padding inferior */
#map-screen, #chat-modal .chat-content {
     padding-bottom: 0 !important;
}
/* Ajustar FABs mapa AÚN MÁS ARRIBA */










/* ======================================================= */
/* --- BOTONES FLOTANTES DEL MAPA (UBER / AIRBNB STYLE) --- */
/* ======================================================= */

/* Contenedor invisible para organizar todo sin bloquear clics en el mapa */
#map-screen .fab-container {
    position: absolute;
    inset: 0; /* Ocupa todo el mapa */
    pointer-events: none; /* Deja pasar los clics hacia el mapa */
    z-index: 40; /* Por debajo de la isla y los modales */
}

/* Reactivamos los clics SOLO en los botones */
#map-screen .fab-container button,
#map-screen .fab-container .map-top-pills {
    pointer-events: auto;
}

/* 1. GRUPO SUPERIOR (Píldoras debajo del Header) */
.map-top-pills {
    position: absolute;
    top: calc(75px + env(safe-area-inset-top)); /* Flota justo debajo de tu isla dinámica */
    left: 50%;
    transform: translateX(-50%); /* Centrado perfecto */
    display: flex;
    gap: 12px;
}

.map-pill-btn {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: 10px 18px;
    border-radius: 30px; /* Forma de píldora */
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12); /* Sombra suave y amplia */
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.1s ease;
}

.map-pill-btn:active {
    transform: scale(0.95);
    background-color: #f5f5f5;
}

.map-pill-btn.icon-only {
    padding: 10px 14px; /* Para que quede como un círculo perfecto si es solo un icono */
}

/* 2. BOTÓN GPS INFERIOR */
#center-map-btn {
    position: absolute;
    right: 16px; /* Separado del borde derecho */
    /* Subimos el botón calculando el alto de la barra inferior + un margen de 35px */
    bottom: calc(var(--bottom-nav-height) + 35px + env(safe-area-inset-bottom)); 
}

.fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #000000;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.fab:active { 
    transform: scale(0.9); 
    background-color: #f0f0f0; 
}




/* --- FIN ESTILOS BOTTOM NAV --- */





/* ================================================ */
/* === ESTILOS FORMULARIO DETALLES BLUP (JobForm) === */
/* ================================================ */

/* Mostrar ubicación pre-rellenada */
#post-edit-job-modal #job-form-location-display {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background-color: var(--color-bg-element);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    display: inline-block; /* Ajustar si es necesario */
    margin-bottom: var(--space-4);
}

/* Contenedor para opciones de tipo de trabajo */
.job-type-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Columnas responsivas */
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-bottom: var(--space-4); /* Espacio antes del siguiente campo */
}

/* Estilo de cada botón de tipo de trabajo */
.job-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3);
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}
.job-type-option:hover {
    background-color: var(--color-bg-element-hover);
    border-color: var(--color-border-subtle);
}
.job-type-option.selected { /* Estilo cuando está seleccionado */
    background-color: var(--color-accent-primary-glow);
    border-color: var(--color-accent-primary);
    transform: scale(1.03);
    box-shadow: 0 0 0 2px var(--color-accent-primary);
}
.job-type-option i { /* Icono */
    font-size: 1.5rem;
    color: var(--color-accent-primary); /* Icono azul */
    margin-bottom: var(--space-2);
}
.job-type-option span { /* Nombre del tipo */
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}
.job-type-option small { /* Descripción corta */
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.2;
    margin-top: var(--space-1);
    display: none; /* Ocultar descripción por defecto (opcional) */
}
.job-type-option:hover small {
    /* display: block; */ /* Mostrar al hover (opcional) */
}

/* Mensaje de error para selección de tipo */
#job-type-error {
    margin-top: var(--space-2);
    text-align: left;
}

/* Indicador de precio mínimo */
#job-min-price-info {
    font-size: var(--font-size-xs);
    color: var(--color-warning); /* Amarillo */
    margin-top: var(--space-1);
    display: none; /* Oculto por defecto */
}

/* Acordeón para Detalles Opcionales */
.optional-details-group {
    border: 1px solid var(--color-border-divider);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    overflow: hidden; /* Para animación */
}
.optional-details-group summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-element);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    list-style: none; /* Quitar flecha default */
}
.optional-details-group summary::-webkit-details-marker { display: none; } /* Quitar flecha default Webkit */
.optional-details-group summary i {
    transition: transform 0.2s ease;
    color: var(--color-text-tertiary);
}
.optional-details-group[open] summary i {
    transform: rotate(180deg);
}
.optional-content {
    padding: var(--space-4);
    background-color: var(--color-bg-surface); /* Fondo ligeramente distinto */
    border-top: 1px solid var(--color-border-divider);
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* Espacio entre campos opcionales */
}
.optional-content .form-group,
.optional-content .form-row {
     margin-bottom: 0; /* Quitar margen extra */
}


/* --- FIN ESTILOS FORMULARIO DETALLES --- */

/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Modal Categoría) */

/* ================================================ */
/* === ESTILOS MODAL CATEGORÍA BLUP (#blup-category-modal) === */
/* ================================================ */

#blup-category-modal .modal-content {
    padding: var(--space-6);
    padding-top: var(--space-4);
}

/* Botón Volver específico para modales de flujo */
.modal-back-btn {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    /* Heredar estilos .icon-btn o .map-header-btn */
    background: none; border: none; color: var(--color-text-secondary);
    font-size: 1.3rem; cursor: pointer; padding: var(--space-2);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast);
    z-index: 2; /* Encima del título si se superpone */
}
.modal-back-btn:hover {
    background-color: var(--color-bg-element);
    color: var(--color-text-primary);
}
/* Ajustar título si hay botón atrás */
.modal-header:has(.modal-back-btn) h2 {
    padding-left: 50px; /* Espacio para botón */
}


/* Contenedor de las tarjetas de categoría */
.blup-category-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* Espacio entre tarjetas */
}

/* Estilo individual de tarjeta de categoría */
.blup-category-card {
    display: flex; /* Usar flex para alinear icono y texto */
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-divider);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blup-category-card:hover {
    transform: scale(1.09); /* Ligero crecimiento */
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-subtle);
}
.blup-category-card:active {
    transform: scale(0.99);
}

/* Icono de categoría */
.blup-category-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-color: var(--color-bg-element);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    /* Colores específicos (ejemplo) */
}
.blup-category-icon.icon-x { color: var(--color-accent-primary); }
.blup-category-icon.icon-xl { color: var(--color-success); }
.blup-category-icon.icon-pro { color: var(--color-warning); }

/* Contenedor para título, descripción y precio mínimo */
.blup-category-card > div {
    flex-grow: 1;
}

.blup-category-card h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-1) 0;
    color: var(--color-text-primary);
}

.blup-category-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-snug);
    margin: 0 0 var(--space-2) 0;
}

.blup-category-card small {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-medium);
    display: block;
}
#blup-jobtype-modal .modal-content {
    position: relative;
}
/* Contenedor lista tipos */
#job-type-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    /* Transición para desvanecer */
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out; /* Más rápida */
    /* No ocultar con display inicialmente */
}









/* Contenedor icono animado */
#selected-jobtype-animation-container {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    /* Inicialmente invisible y sin ocupar espacio */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-in 0.2s, visibility 0s linear 0.4s; /* Fade in DESPUÉS de fade out lista, ocultar al final */
}



#selected-jobtype-animation-container i {
    color: var(--color-accent-primary);
    font-size: 3rem;
    display: inline-block; /* Necesario para transform */
    transform-origin: center center; /* Animar desde el centro */
    transform: scale(0.5); /* Estado inicial (pequeño) */
    /* La animación se aplica con la clase del modal */
}

/* Keyframes Inflate */
@keyframes inflateIcon {
    0% { transform: scale(0.8); opacity: 0.8; } /* Empieza pequeño pero visible */
    50% { transform: scale(1.8); opacity: 1; }   /* Crece grande */
    100% { transform: scale(2.3); opacity: 1; } /* Termina estable */
}

/* --- Control mediante Clase en Modal --- */

/* Cuando el modal está animando: */
#blup-jobtype-modal.animating-selection {
    /* Podríamos añadir overflow: hidden aquí si es necesario */
}
/* Ocultar lista durante animación */
#blup-jobtype-modal.animating-selection #job-type-list-container {
    opacity: 0;
    transform: scale(0.95); /* Encoger ligeramente */
    pointer-events: none; /* Evitar clics */
}

/* 2. Mostrar el contenedor del icono y aplicar animación */
#blup-jobtype-modal.animating-selection #selected-jobtype-animation-container {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.1s; /* Empezar a mostrar un poco después de ocultar lista */
}
/* Aplicar animación cuando el contenedor tiene la clase */
#blup-jobtype-modal.animating-selection #selected-jobtype-animation-container i {
    /* Aplicar animación */
    animation: inflateIcon 10.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.1s; /* Duración 0.7s, con delay */
}


/* --- FIN ESTILOS MODAL CATEGORÍA --- */
/* frontend/css/style.css (AÑADIR AL FINAL - Estilos Nuevos Modales Flujo) */

/* ================================================== */
/* === ESTILOS MODAL TÍTULO/DESCRIPCIÓN (Paso 4) === */
/* ================================================== */

#blup-title-desc-modal .modal-content {
    padding: var(--space-6);
}

/* Mostrar tipo de trabajo seleccionado */
.selected-job-info {
    display: inline-flex; /* Para que no ocupe todo el ancho */
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-bg-element);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-interactive);
}
.selected-job-info i {
    color: var(--color-accent-primary); /* O el color de la categoría */
}
#titledesc-selected-jobtype {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

#blup-titledesc-form .form-group {
    margin-bottom: var(--space-5); /* Espacio entre título y descripción */
}
#blup-titledesc-form label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary); /* Labels más visibles */
}
#blup-titledesc-form input,
#blup-titledesc-form textarea {
     /* Usar estilos de input base (fondo claro) */
     background-color: var(--color-bg-element);
     color: var(--color-text-primary);
     border: 1px solid var(--color-border-interactive);
     /* ...resto de estilos base */
}
#blup-titledesc-form input:focus,
#blup-titledesc-form textarea:focus {
     border-color: var(--color-accent-primary);
     box-shadow: 0 0 0 1px var(--color-accent-primary-glow);
}


/* --- FIN ESTILOS MODAL TÍTULO/DESCRIPCIÓN --- */


/* ================================================== */
/* === ESTILOS MODAL PAGO/DURACIÓN (Paso 5) === */
/* ================================================== */

#blup-payment-modal .modal-content {
    padding: var(--space-6);
}
/* Reutilizar .selected-job-info */
#blup-payment-modal .selected-job-info { margin-bottom: var(--space-4); }

/* Contenedor Input Pago */
.payment-input-container {
    margin-bottom: var(--space-6);
    text-align: center;
}
.payment-input-container > label { /* "¿Cuánto pagarás?" */
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}
.payment-min-info { /* "(Mínimo S/...)" */
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-warning); /* Amarillo */
    margin-bottom: var(--space-4);
}

/* Control de Pago (+ / Input / -) */
.payment-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2); /* Espacio antes del error */
}
.payment-adjust-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-bg-element);
    color: var(--color-text-primary);
    font-size: 1.2rem;
    font-weight: bold;
    border: 1px solid var(--color-border-interactive);
    transition: background-color 0.15s, transform 0.1s;
}
.payment-adjust-btn:hover {
    background-color: var(--color-bg-element-hover);
}
.payment-adjust-btn:active {
    transform: scale(0.95);
}
.payment-adjust-btn.minus i { color: var(--color-error); } /* Rojo para menos */
.payment-adjust-btn.plus i { color: var(--color-success); } /* Verde para más */

#blup-price-input {
    font-size: 2.5rem; /* Tamaño grande */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--color-border-interactive); /* Línea inferior */
    text-align: center;
    width: 120px; /* Ancho fijo */
    padding: var(--space-1) 0;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color 0.2s;
}
#blup-price-input::-webkit-outer-spin-button,
#blup-price-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
#blup-price-input:focus {
    outline: none;
    border-bottom-color: var(--color-accent-primary);
}
#blup-price-input.input-error {
    border-bottom-color: var(--color-error) !important; /* Borde rojo error */
    color: var(--color-error);
}

/* Error precio */
#blup-price-error {
    /* Estilos .error-message */
    text-align: center;
}

/* Tipo Pago y Duración (Reutilizar form-row y form-group) */
#blup-payment-form .form-row {
    margin-top: var(--space-6);
}
#blup-payment-form label {
     font-weight: var(--font-weight-medium);
     color: var(--color-text-secondary);
}
#blup-payment-form select,
#blup-payment-form input[type="text"] {
    background-color: var(--color-bg-element);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-interactive);
}
#blup-payment-form select:focus,
#blup-payment-form input[type="text"]:focus {
     border-color: var(--color-accent-primary);
     box-shadow: 0 0 0 1px var(--color-accent-primary-glow);
}


/* --- FIN ESTILOS MODAL PAGO/DURACIÓN --- */

/* ================================================== */
/* === ESTILOS MODAL REVISIÓN/PUBLICAR (Paso 6) === */
/* ================================================== */

#blup-review-modal .modal-content {
    padding: var(--space-6);
}

.review-summary-section h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-divider);
}

#review-summary-details {
    /* JS llenará esto, podemos añadir estilos base */
}
#review-summary-details p {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    display: flex;
    justify-content: space-between;
}
#review-summary-details p strong { /* Label (ej: "Tipo:") */
    color: var(--color-text-secondary);
    font-weight: normal;
    margin-right: var(--space-2);
}
#review-summary-details p span { /* Valor */
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

/* Acordeón Opcionales (reutilizar de style.css anterior) */
#blup-review-modal .optional-details-group {
    border: 1px solid var(--color-border-divider);
    border-radius: var(--radius-md);
    margin-top: var(--space-6); /* Espacio antes */
    margin-bottom: var(--space-6);
    overflow: hidden;
}
#blup-review-modal .optional-details-group summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-element);
    color: var(--color-text-secondary); font-weight: var(--font-weight-medium);
    cursor: pointer; list-style: none;
}
#blup-review-modal .optional-details-group summary::-webkit-details-marker { display: none; }
#blup-review-modal .optional-details-group summary i { transition: transform 0.2s ease; color: var(--color-text-tertiary); }
#blup-review-modal .optional-details-group[open] summary i { transform: rotate(180deg); }
#blup-review-modal .optional-content {
    padding: var(--space-4); background-color: var(--color-bg-surface);
    border-top: 1px solid var(--color-border-divider);
    display: flex; flex-direction: column; gap: var(--space-4);
}
#blup-review-modal .optional-content .form-group,
#blup-review-modal .optional-content .form-row { margin-bottom: 0; }
#blup-review-modal .optional-content label { font-weight: normal; color: var(--color-text-secondary); }
#blup-review-modal .optional-content input[type="text"],
#blup-review-modal .optional-content select { background-color: var(--color-bg-element); border-color: var(--color-border-interactive);}


/* Ubicación Confirmada */
#blup-review-modal .form-group label { font-weight: var(--font-weight-medium); }

#blup-review-address { font-size: var(--font-size-xs); color: var(--color-text-secondary); display: block; text-align: center; margin-top: var(--space-2); }


/* --- FIN ESTILOS MODAL REVISIÓN --- */

/* ================================================ */
/* === ESTILOS SWITCH PREMIUM (Uber/Apple Inspired - Dark) === */
/* ================================================ */

/* frontend/css/style.css (REEMPLAZAR ESTILOS SWITCH COMPLETAMENTE) */

/* ================================================ */
/* === ESTILOS SWITCH PREMIUM (Layout Corregido) === */
/* ================================================ */

/* Contenedor General del Grupo (Texto + Switch) */
.switch-group {
    display: flex;                 /* <<< USA FLEX AQUÍ */
    align-items: center;           /* <<< ALINEAR VERTICALMENTE */
    justify-content: space-between;/* <<< SEPARAR TEXTO Y SWITCH */
   
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    
    margin-bottom: var(--space-4);
    cursor: pointer; /* Hacer clickeable todo el grupo */
}
/* Hacer que el clic en el grupo active el input (requiere JS o label envolvente) */
/* Si el HTML tiene la label envolviendo todo, este CSS funciona */
/* Si no, necesitaremos JS o ajustar HTML */


/* Contenedor del Texto (Izquierda) */
/* La etiqueta <label> debe tener el 'for' correcto en HTML */

.switch-label span { /* Título principal */
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}

.switch-label small { /* Descripción corta */
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-tight);
}

/* Contenedor del Control Visual del Switch (Derecha) */
.switch-container {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0; /* No encoger */
    /* Añadir pointer-events: none si la label principal envuelve todo */
    /* pointer-events: none; */
}

/* Input Checkbox Oculto */
.switch-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}



/* Estado Activo (Checked) */
.switch-input:checked + .switch-slider {
    background-color: var(--color-accent-primary); /* Azul activo */
    border-color: var(--color-accent-primary);
}

/* Movimiento del Círculo al estar Activo */
.switch-input:checked + .switch-slider::before {
    transform: translateX(20px);
}

/* Estilo de Foco Visible */
.switch-input:focus-visible + .switch-slider {
    box-shadow: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent-primary-glow);
}

/* --- FIN ESTILOS SWITCH --- */
/* El Slider (Fondo Visual del Switch) */
.switch-slider {
    position: absolute; /* Asegurar que esté posicionado */
    cursor: pointer; /* <<< ASEGURAR CURSOR POINTER */
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-border-interactive);
    border: 1px solid var(--color-border-interactive);
    transition: background-color var(--transition-duration-fast) ease-in-out, border-color var(--transition-duration-fast) ease-in-out;
    border-radius: var(--radius-full);
    z-index: 0; /* Nivel base dentro del container */
    /* ASEGURARSE que NO haya 'pointer-events: none;' aquí */
}

/* El Círculo (Knob/Thumb) */
.switch-slider::before {
    position: absolute;
    content: "";
    height: 27px; width: 27px; left: 1px; bottom: 1px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
    transition: transform var(--transition-duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1; /* Encima del fondo del slider */
    /* ASEGURARSE que NO haya 'pointer-events: none;' aquí */
}

/* El Input oculto debe estar encima para recibir eventos si la label no funciona */
.switch-input {
    opacity: 0;
    width: 100%; /* Ocupar todo el contenedor */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Encima de los elementos visuales */
    cursor: pointer; /* Cursor pointer sobre el input invisible */
    margin: 0; /* Resetear margen */
}

/* El contenedor del switch */
.switch-container {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
    /* No necesita cursor si el input invisible está encima */
}

/* El grupo principal sigue siendo flex */
.switch-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: var(--color-bg-element); */ /* Quitar fondo al grupo? */
    padding: var(--space-3) 0; /* Solo padding vertical al grupo? */
    /* border-radius: var(--radius-md); */
    /* border: 1px solid var(--color-border-interactive); */
    margin-bottom: var(--space-4);
    /* No necesita cursor si el input está encima del slider */
}

/* La etiqueta de texto */
.switch-label {
    flex-grow: 1;
    margin-right: var(--space-4);
    /* No necesita cursor si el input está encima del slider */
}


.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 1px #67696d00;


}



/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS PANTALLA INBOX/MENSAJES === */
/* ================================================ */

#inbox-screen .screen-header {
    /* Ajustar padding derecho para acomodar el botón de nuevo mensaje */
    padding-right: calc(var(--space-4) + 40px + var(--space-3) + env(safe-area-inset-right));
}

#inbox-screen .inbox-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Evitar scroll general, la lista tendrá el suyo */
}

/* --- Barra de Búsqueda --- */
.inbox-search-bar .input-group {
    background-color: var(--color-bg-element); /* Fondo oscuro */
    border-radius: var(--radius-md);
    border: 1px solid var(--color-bg-element); /* Sin borde visible inicialmente */
    transition: background-color 0.2s, border-color 0.2s;
}
.inbox-search-bar .input-group:focus-within {
    background-color: var(--color-bg-surface); /* Más claro al enfocar */
    border-color: var(--color-border-interactive);
}
.inbox-search-bar input[type="search"] {
    border: none;
    background: none;
    padding: var(--space-2) 0; /* Padding vertical */
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    outline: none;
    flex-grow: 1;
}
.inbox-search-bar input[type="search"]::placeholder {
    color: var(--color-text-tertiary);
}
.inbox-search-bar input[type="search"]::-webkit-search-cancel-button {
    /* Ocultar 'x' nativa si interfiere */
    appearance: none;
}
.inbox-search-bar label { /* Icono Lupa */
    color: var(--color-text-tertiary);
    padding-left: var(--space-3);
    padding-right: var(--space-2);
    display: flex;
    align-items: center;
}

/* --- Contenedor Lista Conversaciones --- */
#inbox-screen .list-container {
    flex-grow: 1;
    overflow-y: auto; /* Scroll solo para la lista */
}
/* Ocultar scrollbar (opcional) */
#inbox-screen .list-container::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
#inbox-screen .list-container { scrollbar-width: none; -ms-overflow-style: none; }

#inbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Item de Conversación --- */
.inbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border-divider);
    cursor: pointer;
    transition: background-color var(--transition-duration-fast);
    position: relative; /* Para el punto no leído absoluto */
}
.inbox-item:hover {
    background-color: var(--color-bg-surface-hover);
}
.inbox-item:last-child {
    border-bottom: none;
}

/* Avatar */
.inbox-item-avatar {
    width: 56px; /* Tamaño estilo IG */
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--color-bg-element); /* Placeholder */
    border: 1px solid var(--color-border-subtle); /* Borde sutil */
}

/* Contenido (Nombre, Preview, Tiempo) */
.inbox-item-content {
    flex-grow: 1;
    overflow: hidden; /* Para truncar texto */
    padding-right: var(--space-2); /* Espacio para el punto no leído */
}

.inbox-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-1);
}

.inbox-item-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    margin-left: var(--space-2);
    flex-shrink: 0; /* Evitar que se achique */
}

/* Preview del Mensaje */
.inbox-item-preview {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Punto No Leído (Absoluto) */
.inbox-item .unread-dot {
    width: 10px; /* Un poco más grande */
    height: 10px;
    background-color: var(--color-accent-primary); /* Azul */
    border-radius: 50%;
    position: absolute; /* Posicionar relativo al item */
    right: var(--space-4); /* A la derecha */
    top: 50%;
    transform: translateY(-50%); /* Centrar verticalmente */
    display: none; /* Oculto por defecto */
}

/* Estilos cuando NO está leído */
.inbox-item.unread .inbox-item-name {
    font-weight: var(--font-weight-bold); /* Más bold */
}
.inbox-item.unread .inbox-item-preview {
    color: var(--color-text-primary); /* Más visible */
    font-weight: var(--font-weight-medium);
}
.inbox-item.unread .unread-dot {
    display: block; /* Mostrar punto */
}

/* Mensaje Vacío */
#inbox-list .list-empty-message {
     padding-top: 4rem; /* Más espacio arriba */
     text-align: center;
     color: var(--color-text-secondary);
}

/* Loader */
#inbox-loader {
    text-align: center;
    padding: var(--space-6);
    color: var(--color-text-secondary);
}





.fa-fw {
    
    width: 2.25em;
}



/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS NUEVO PERFIL REFACTORIZADO === */
/* ================================================ */



/* Header Principal (Avatar, Nombre, etc.) */
.profile-header-main {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-4);
}
.profile-header-main .profile-avatar-section {
    flex-shrink: 0;
    position: relative; /* Para el botón de cambiar */
    padding: 0; /* Quitar padding/border extra */
    border: none;
    margin: 0;
}
.profile-header-main .profile-avatar-img {
    width: 80px; /* Tamaño avatar reducido */
    height: 80px;
    margin: 0;
    border-width: 2px; /* Borde más fino */
}









/* --- FIN ESTILOS NUEVO PERFIL --- */

/* frontend/css/style.css (AÑADIR AL FINAL) */

/* Estilo Botón Compartir Portafolio */
.portfolio-share-btn {
    position: absolute;
    top: var(--space-2);
    /* Posicionar a la izquierda del botón eliminar */
    right: calc(var(--space-2) + 28px + var(--space-2)); /* right + width_delete + gap */
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--color-text-on-accent); /* Blanco por defecto */
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px; /* Ajustar tamaño icono */
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.2s ease, background-color 0.2s, color 0.2s;
    padding: 0;
    z-index: 2;
}

/* Mostrar al hover del item */
.portfolio-item:hover .portfolio-share-btn {
    opacity: 1;
}

.portfolio-share-btn:hover {
    background-color: rgba(0, 119, 255, 0.8); /* Azul iBlup al hover */
}

/* Estilo cuando está compartido (activo) */
.portfolio-share-btn.shared {
    background-color: var(--color-accent-primary); /* Fondo azul */
    color: var(--color-text-on-accent); /* Icono blanco */
}
/* Opcional: Cambiar icono cuando está compartido */
.portfolio-share-btn.shared i::before {
    content: "\f00c"; /* Icono check (FontAwesome) */
}

/* frontend/css/style.css o components.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS MODAL COLOCAR OFERTA (PUJA) === */
/* ================================================ */

#place-bid-modal .bid-job-info h3 {
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

#place-bid-modal .bid-job-info p {
    margin-bottom: var(--space-1);
}

#place-bid-modal #bid-offer-price-input {
    /* Puedes darle un estilo más prominente si quieres */
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
#place-bid-modal #bid-offer-error {
    /* Estilo para el mensaje de error del precio */
}


/* frontend/css/components.css o style.css */

/* ================================================ */
/* === ESTILOS MODAL MIS TRABAJOS / MIS BLUPS === */
/* ================================================ */

/* Contenedor General Lista (ya tiene estilos base .list-container) */
#my-jobs-list-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#my-jobs-list-container li {
    /* Estilos base <li> ya aplicados por reutilizar .list-container en HTML */
    /* Aquí solo anulaciones o ajustes si son necesarios */
    padding: var(--space-4) var(--space-5); /* Asegurar padding */
}

/* Estilo del Item Individual */
.my-job-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2); /* Espacio entre header, p, actions */
}

/* Header del Item (Título y Badges) */
.my-job-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinear items arriba */
    gap: var(--space-3);
}
.my-job-item-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    flex-grow: 1; /* Ocupar espacio disponible */
    /* Opcional: Limitar líneas si el título es muy largo */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 2; */
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
}
.my-job-item-header > span { /* Contenedor de los badges */
    display: flex;
    flex-direction: column; /* Apilar badges verticalmente */
    align-items: flex-end; /* Alinear badges a la derecha */
    gap: var(--space-1);
    flex-shrink: 0; /* No encoger */
}
/* Estilos para .job-status-badge, .bid-count-badge, .application-status ya deben existir */

/* Párrafos de Información (Pago, Duración, Fecha) */
.my-job-item p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}
.my-job-item p strong {
    color: var(--color-text-primary); /* Hacer label un poco más visible */
    font-weight: var(--font-weight-medium);
}
.my-job-item p small { /* Para la fecha */
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

/* Contenedor de Acciones (Botones) */
.my-job-actions {
    margin-top: var(--space-3); /* Espacio antes de los botones */
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap; /* Permitir que los botones bajen si no caben */
}
.my-job-actions .btn-sm { /* Estilo base para botones pequeños */
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    width: auto; /* Ancho automático */
    flex-shrink: 0; /* No encoger */
}
.my-job-actions .btn-sm i { /* Iconos dentro de botones */
    margin-right: var(--space-1);
    font-size: 0.9em;
    vertical-align: middle; /* Alinear mejor icono y texto */
}
/* Estilos específicos para botones (success, danger, etc.) ya definidos */

/* frontend/css/style.css */

/* --- REVISAR Y REEMPLAZAR ESTAS REGLAS --- */

.modal {
    position: fixed; /* Fijo en la ventana */
    bottom: 0;       /* Pegado abajo inicialmente */
    left: 50%;       /* Centrado horizontalmente (antes de transform) */
    width: 100%;     /* Ancho completo */
    max-width: var(--modal-max-width); /* Ancho máximo definido */
    background-color: var(--color-bg-surface); /* Fondo del modal */
    z-index: var(--z-modal);           /* Encima del overlay */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Redondeado superior */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); /* Sombra superior */
    max-height: 90vh; /* Altura máxima */
    display: flex;    /* Para layout interno (header/main/footer) */
    flex-direction: column;
    overflow: hidden; /* Ocultar overflow del modal principal */

    /* --- Estado Inicial (Oculto) --- */
    transform: translateX(-50%) translateY(100%); /* Empieza fuera abajo */
    visibility: hidden;                           /* Oculto */
    transition: transform var(--modal-slide-duration, 0.4s) cubic-bezier(0.4, 0.0, 0.2, 1),
                visibility 0s linear var(--modal-slide-duration, 0.4s); /* Transición */

     /* Ajustes SafeArea (asegurar que estén presentes) */
     /* El padding-bottom se aplica al contenido o footer si es necesario */
     margin-left: max(0px, env(safe-area-inset-left));
     margin-right: max(0px, env(safe-area-inset-right));
     /* padding-bottom: env(safe-area-inset-bottom); Se aplica al footer/actions */
}

.modal.large {
    max-height: 100%; /* Para modales más altos */
}

/* --- Estado Activo (Visible) --- */
.modal.active {
    visibility: visible;                         /* Hacer visible */
    transform: translateX(-50%) translateY(0%); /* Mover a su posición final */
    transition-delay: 0s;                        /* Iniciar transición inmediatamente */
}

/* --- Contenido Interno (Asegurar que pueda ocupar espacio) --- */
.modal-content {
    padding: var(--space-6); /* Padding por defecto */
    overflow-y: auto;        /* Scroll si el contenido es largo */
    flex-grow: 1;            /* Ocupar espacio vertical disponible */
    background-color: var(--color-bg-base); /* Fondo del área de contenido (puede ser diferente al surface) */
}
/* Para modales cuyo contenido NO debe tener padding (ej. listas) */
.modal-content.scrollable {
    padding: 0;
}
/* Estilos scrollbar (opcional, pero bueno tenerlos) */
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: transparent; }
.modal-content::-webkit-scrollbar-thumb { background-color: var(--color-bg-element); border-radius: var(--radius-full); border: 2px solid var(--color-bg-surface); }
.modal-content::-webkit-scrollbar-thumb:hover { background-color: var(--color-bg-element-hover); }

/* Header y Footer (Verificar que no impidan visibilidad) */
.modal-header {
     /* display: flex; justify-content: center; align-items: center; ... */
     flex-shrink: 0; /* No encoger */
     position: relative; /* Para handle y close button */
     /* ... otros estilos ... */
}
.modal-actions {
     /* display: flex; gap: var(--space-4); justify-content: flex-end; ... */
     flex-shrink: 0; /* No encoger */
     padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); /* SafeArea */
     /* ... otros estilos ... */
}

/* --- FIN REVISIÓN ESTILOS MODAL --- */


/* frontend/css/style.css (AÑADIR AL FINAL) */

/* Estilos Barra Búsqueda Preels */
.preels-search-bar .input-group {
    background-color: var(--color-bg-element);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-bg-element);
}
.preels-search-bar input[type="search"] {
    border: none; background: none; padding: var(--space-2) 0;
    color: var(--color-text-primary); font-size: var(--font-size-sm); /* Más pequeña */
    outline: none; flex-grow: 1;
}
.preels-search-bar input[type="search"]::placeholder { color: var(--color-text-tertiary); }
.preels-search-bar label { color: var(--color-text-tertiary); padding-left: var(--space-3); padding-right: var(--space-2); }

/* frontend/css/style.css (AÑADIR AL FINAL) */




/* Estilos Estado Verificación Identidad en Perfil */

/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS MODAL VERIFICACIÓN IDENTIDAD === */
/* ================================================ */

.verification-flow .modal-content {
    background-color: var(--color-bg-base); /* Fondo ligeramente distinto */
}

#verification-steps-container {
    /* Podría usar flex si animamos transiciones */
}

.verification-step {
    display: none; /* Oculto por defecto */
    flex-direction: column;
    min-height: 60vh; /* Altura mínima para evitar saltos */
}
.verification-step.active {
    display: flex; /* Mostrar activo */
    animation: profileFadeIn 0.3s ease forwards; /* Reusar animación */
}

.verification-step .step-content {
    flex-grow: 1;
    text-align: center; /* Centrar contenido */
}

.verification-icon {
    font-size: 3.5rem;
    color: var(--color-accent-primary);
    margin-bottom: var(--space-6);
    display: block; /* Asegurar que esté en su línea */
}

.step-title-main {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.step-subtitle-main {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-normal);
}

/* Área de Subida */
.verification-upload-area {
    margin-bottom: var(--space-4);
}

.upload-box {
    display: block;
    border: 2px dashed var(--color-border-interactive);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    background-color: var(--color-bg-surface);
    position: relative; /* Para el spinner */
}
.upload-box:hover {
    border-color: var(--color-accent-primary);
    background-color: var(--color-bg-element);
}
.upload-box img { /* La imagen de preview */
    display: block;
    max-width: 200px; /* Limitar tamaño preview DNI */
    max-height: 150px;
    margin: 0 auto var(--space-3) auto;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background-color: var(--color-bg-element); /* Fondo mientras carga */
}
#verify-body-preview {
     max-width: 150px; /* Preview foto personal más pequeña */
     max-height: 180px;
     object-fit: cover; /* Usar cover para selfie */
     border-radius: var(--radius-md);
}

.upload-box span {
    display: block;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}
 #dni-upload-loading, #body-upload-loading {
     color: var(--color-accent-primary);
 }

.upload-instructions {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-3);
}

/* Consentimiento Checkbox */
#verification-step-1 .checkbox-group,
#verification-step-2 .checkbox-group {
    justify-content: center; /* Centrar checkbox */
    margin-top: var(--space-6);
}
#verification-step-1 .checkbox-label,
#verification-step-2 .checkbox-label {
     text-align: left; /* Alinear texto label */
     font-size: var(--font-size-xs);
     line-height: var(--line-height-tight);
}

/* Footer de Navegación */
.verification-step .step-navigation {
    margin-top: auto; /* Empujar al fondo */
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-divider);
}
.verification-step .step-navigation .btn-secondary {
    /* Botón Cancelar/Atrás */
     margin-right: auto; /* Empujar a la izquierda */
}
.verification-step .step-navigation .btn-primary:disabled {
     opacity: 0.5;
     cursor: not-allowed;
}

/* Paso Éxito/Pendiente */
 #verification-step-3 .success-checkmark {
     /* Reutilizar estilo registro, ajustar color si es necesario */
     margin-left: auto; margin-right: auto; /* Centrar */
 }
 #verification-step-3 .step-title { text-align: center; }
 #verification-step-3 .step-subtitle { text-align: center; }


/* --- FIN ESTILOS VERIFICACIÓN --- */

/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS PANTALLA ADMIN VERIFICACIÓN === */
/* ================================================ */

#admin-verification-screen .admin-content {
    flex-grow: 1;
    overflow-y: auto;
}

#admin-verification-list {
    list-style: none; padding: 0; margin: 0;
}

.admin-verification-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-divider);
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.admin-verification-item:hover {
    background-color: var(--color-bg-surface-hover);
}
.admin-verification-item img.avatar-xs { /* Reutilizar estilo avatar */
    width: 40px; height: 40px; flex-shrink: 0;
}
.admin-verification-info {
    flex-grow: 1; overflow: hidden;
}
.admin-verification-info strong { /* Nombre */
    display: block; font-weight: var(--font-weight-medium); color: var(--color-text-primary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--space-1);
}
.admin-verification-info small { /* Email/Rol */
    display: block; font-size: var(--font-size-xs); color: var(--color-text-secondary);
}
.admin-verification-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

/* Modal Detalles Verificación Admin */
#admin-verify-user-content .user-detail-section { margin-bottom: var(--space-5); }
#admin-verify-user-content h4 { font-size: var(--font-size-base); color: var(--color-text-secondary); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-divider); padding-bottom: var(--space-1); }
#admin-verify-user-content p { margin-bottom: var(--space-2); font-size: var(--font-size-sm); }
#admin-verify-user-content strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
#admin-verify-user-content .verification-images { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
#admin-verify-user-content .verification-image-container { text-align: center; }
#admin-verify-user-content .verification-image-container label { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
#admin-verify-user-content .verification-image-container img {
    max-width: 100%; /* Ajustar al contenedor */
    height: 150px; /* Altura fija para consistencia */
    object-fit: contain; /* Mostrar imagen completa */
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    cursor: zoom-in; /* Indicar que se puede ampliar */
    margin-bottom: var(--space-1);
}
#admin-verify-user-content .rejection-notes { margin-top: var(--space-4); }
#admin-verify-user-content #admin-rejection-notes { width: 100%; min-height: 60px; }

#admin-verify-user-actions button { min-width: 100px; }
#admin-verify-user-actions .btn-danger { margin-left: auto; } /* Botón Rechazar a la derecha */


/* frontend/css/style.css (AÑADIR AL FINAL) */

/* Estilos Select Rechazo Admin */
#admin-verify-user-content select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background-color: var(--color-bg-element);
    color: var(--color-text-primary);
    transition: border-color var(--transition-duration-fast), box-shadow var(--transition-duration-fast);
    appearance: none; /* Quitar estilo nativo */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23737373%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708z%22%2F%3E%3C%2Fsvg%3E'); /* Flecha personalizada */
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 0.9em;
    cursor: pointer;
}

#admin-verify-user-content select:focus {
    border-color: var(--color-accent-primary);
    outline: none;
    box-shadow: 0 0 0 var(--border-width-focus) var(--color-accent-primary-glow);
}

#admin-verify-user-content select.input-error {
     border-color: var(--color-error) !important;
}

/* Estilo Textarea "Otro" (reutiliza estilo general si existe) */
 #admin-verify-user-content textarea {
     width: 100%;
     padding: var(--space-2) var(--space-3);
     border: var(--border-width) solid var(--color-border-interactive);
     border-radius: var(--radius-md);
     font-size: var(--font-size-sm);
     background-color: var(--color-bg-element);
     color: var(--color-text-primary);
     resize: vertical; /* Permitir redimensionar verticalmente */
 }
  #admin-verify-user-content textarea:focus {
     border-color: var(--color-accent-primary);
     outline: none;
     box-shadow: 0 0 0 var(--border-width-focus) var(--color-accent-primary-glow);
 }
  #admin-verify-user-content textarea.input-error {
      border-color: var(--color-error) !important;
  }

/* frontend/css/style.css (AÑADIR AL FINAL) */

/* Estilos Tabs Admin (Reutiliza .profile-tabs) */
.admin-tabs {
    flex-shrink: 0; /* Evitar que se encojan */
    background-color: var(--color-bg-surface);
    overflow-x: auto; /* Permitir scroll horizontal si no caben */
     scrollbar-width: none; /* Ocultar scrollbar Firefox */
     -ms-overflow-style: none;  /* Ocultar scrollbar IE/Edge */
}
.admin-tabs::-webkit-scrollbar { display: none; } /* Ocultar scrollbar Webkit */


.admin-tab-btn span:first-of-type { /* Texto principal */
     font-size: var(--font-size-xs); /* Más pequeño */
}
.admin-tab-btn i {
    font-size: 1rem; /* Icono más pequeño */
    margin-bottom: 1px;
}
/* Badge contador */
.admin-tab-btn .count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    font-size: 9px;
    font-weight: 600;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    text-align: center;
}

/* Barra Búsqueda Admin */
.admin-search-bar {
    border-bottom: 1px solid var(--color-border-divider);
    background-color: var(--color-bg-base);
    flex-shrink: 0; /* No encoger */
}
 .admin-search-bar .input-group { /* Reutilizar estilos búsqueda preels */
    background-color: var(--color-bg-element); border-radius: var(--radius-md); border: 1px solid transparent; display: flex; align-items: center; transition: background-color 0.2s, border-color 0.2s; }
 .admin-search-bar .input-group:focus-within { background-color: var(--color-bg-surface); border-color: var(--color-border-interactive); }
 .admin-search-bar label { padding-left: var(--space-3); padding-right: var(--space-2); color: var(--color-text-tertiary); }
 .admin-search-bar input[type="search"] { flex-grow: 1; border: none; background: none; outline: none; padding: var(--space-2) 0; color: var(--color-text-primary); font-size: var(--font-size-sm); }
 .admin-search-bar input[type="search"]::placeholder { color: var(--color-text-tertiary); }
 .admin-search-bar input[type="search"]::-webkit-search-cancel-button{ display: none; }


/* Paginación Admin */
.admin-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-divider);
    background-color: var(--color-bg-surface);
    flex-shrink: 0; /* No encoger */
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); /* SafeArea */
}
.admin-pagination span {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.admin-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.admin-pagination button i { font-size: 0.8em; }
#admin-prev-page-btn i { margin-right: var(--space-1); }
#admin-next-page-btn i { margin-left: var(--space-1); }

/* Ajuste Lista Admin para que no se solape con paginación */
#admin-verification-screen .list-container {
     padding-bottom: 50px; /* Altura aproximada paginación */
}

/* Estilo para estado en lista admin */
.admin-verification-item .status-pending { color: var(--color-warning); }
.admin-verification-item .status-approved { color: var(--color-success); }
.admin-verification-item .status-rejected { color: var(--color-error); }
.admin-verification-item .status-not_submitted { color: var(--color-text-tertiary); }

/* Estado de verificación en modal detalles */
#admin-verify-user-content .status-pending { font-weight: bold; color: var(--color-warning); }
#admin-verify-user-content .status-approved { font-weight: bold; color: var(--color-success); }
#admin-verify-user-content .status-rejected { font-weight: bold; color: var(--color-error); }
#admin-verify-user-content .status-not_submitted { font-weight: bold; color: var(--color-text-tertiary); }


/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS MEJORAS ADMIN VERIFICACIÓN === */
/* ================================================ */

/* Contenedor Controles Lista (Orden, Rol, Refresco) */
.admin-list-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-bg-surface); /* Fondo ligeramente diferente */
    border-bottom: 1px solid var(--color-border-divider);
    gap: var(--space-3);
    flex-wrap: wrap; /* Permitir que bajen en pantallas pequeñas */
    flex-shrink: 0;
}
.admin-list-controls select {
    padding: var(--space-1) var(--space-2); /* Más compacto */
    padding-right: calc(var(--space-2) + 1.5em); /* Espacio para flecha */
    font-size: var(--font-size-xs); /* Más pequeño */
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
 .admin-list-controls select:focus { /* Estilo foco simple */
    border-color: var(--color-accent-primary);
    outline: none;
 }
.admin-list-controls .admin-filter-role,
.admin-list-controls .admin-sort {
    flex-grow: 1; /* Ocupar espacio */
    min-width: 130px; /* Ancho mínimo */
}
.admin-list-controls #admin-refresh-list-btn {
    /* Estilos .icon-btn */
     width: 32px; height: 32px; font-size: 1rem;
     color: var(--color-text-secondary);
     background-color: transparent;
     flex-shrink: 0;
}
 .admin-list-controls #admin-refresh-list-btn:hover {
     background-color: var(--color-bg-element);
     color: var(--color-text-primary);
 }


/* Barra Búsqueda (Ajuste padding si es necesario) */
.admin-search-bar {
    padding: var(--space-2) var(--space-4); /* Menos padding vertical */
    background-color: var(--color-bg-base);
    border-bottom: 1px solid var(--color-border-divider);
    flex-shrink: 0;
}
.admin-search-bar input[type="search"] { font-size: var(--font-size-sm); }


/* Item Lista Admin Mejorado */
.admin-verification-item {
    /* Estilos base sin cambios (flex, padding, border) */
}
.admin-verification-info strong {
    display: flex; /* Para alinear nombre y badge */
    align-items: center;
    gap: var(--space-2);
}
/* Badge Estado en Lista */
.admin-status-badge {
    font-weight: var(--font-weight-medium);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}
.admin-status-badge.status-pending { background-color: rgba(var(--color-warning-rgb), 0.1); color: var(--color-warning); border-color: rgba(var(--color-warning-rgb), 0.3); }
.admin-status-badge.status-approved { background-color: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); border-color: rgba(var(--color-success-rgb), 0.3); }
.admin-status-badge.status-rejected { background-color: rgba(var(--color-error-rgb), 0.1); color: var(--color-error); border-color: rgba(var(--color-error-rgb), 0.3); }
.admin-status-badge.status-not_submitted { background-color: var(--color-bg-element); color: var(--color-text-tertiary); border-color: var(--color-border-interactive); }

/* Iconos Documentos en Lista */
.admin-doc-icons {
    display: inline-flex; /* O flex si quieres más control */
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}
.admin-doc-icons i {
    color: var(--color-text-tertiary); /* Color base gris */
    opacity: 0.5; /* Apagado si no subido */
    width: 1.5em; /* Ancho fijo para alinear */
    text-align: center;
}
.admin-doc-icons i.uploaded {
    color: var(--color-text-secondary); /* Más visible si subido */
    opacity: 1;
}
 /* Colores específicos opcionales */
 /* .admin-doc-icons i.fa-id-card.uploaded { color: var(--color-info); } */
 /* .admin-doc-icons i.fa-camera.uploaded { color: var(--color-info); } */


/* frontend/css/style.css (DEBUG TABS) */

/* ... otros estilos ... */
/* frontend/css/style.css (REEMPLAZAR SECCIÓN ADMIN ANTERIOR) */

/* ================================================ */
/* === ESTILOS PANTALLA ADMIN VERIFICACIÓN (v3) === */
/* ================================================ */

/* Contenedor Principal */
#admin-verification-screen {
    display: flex; /* Usa flex para organizar header/tabs/controles/main/footer */
    flex-direction: column;
    height: 100%; /* Ocupar toda la altura */
    overflow: hidden; /* Prevenir scroll general */
}
#admin-verification-screen .screen-header {
    /* Estilos header base (centrado, padding, etc.) */
    flex-shrink: 0; /* No encoger */
}

/* Tabs Admin (Nueva Clase) */
.admin-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border-divider);
    flex-shrink: 0;
    background-color: var(--color-bg-surface);
    overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.admin-panel-tabs::-webkit-scrollbar { display: none; }
/* Botón Tab Admin */
.admin-panel-tabs .admin-tab-btn {
    flex: 1 1 auto; /* Permitir que tomen su ancho natural, pero crecer */
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs); /* Texto más pequeño */
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    background: none; border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; /* Menos espacio icono-texto */
    position: relative; /* Para badge */
    white-space: nowrap;
}
.admin-panel-tabs .admin-tab-btn i { font-size: 1rem; margin-bottom: 1px; }
.admin-panel-tabs .admin-tab-btn:hover { color: var(--color-text-secondary); }
.admin-panel-tabs .admin-tab-btn.active { color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); }
.admin-panel-tabs .admin-tab-btn .count-badge { /* Estilos badge (sin cambios) */ position: absolute; top: 2px; right: 2px; background-color: var(--color-accent-primary); color: var(--color-text-on-accent); font-size: 9px; font-weight: 600; min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; border-radius: 7px; text-align: center; }

/* Controles Lista Admin */
.admin-list-controls { /* Sin cambios */ display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-4); background-color: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-divider); gap: var(--space-3); flex-wrap: wrap; flex-shrink: 0; }
.admin-list-controls select { /* Sin cambios */ padding: var(--space-1) var(--space-2); padding-right: calc(var(--space-2) + 1.5em); font-size: var(--font-size-xs); background-color: var(--color-bg-element); border: 1px solid var(--color-border-interactive); border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; }
.admin-list-controls select:focus { border-color: var(--color-accent-primary); outline: none; }
.admin-list-controls .admin-filter-role, .admin-list-controls .admin-sort { flex-grow: 1; min-width: 120px; }
.admin-list-controls #admin-refresh-list-btn { width: 32px; height: 32px; font-size: 1rem; color: var(--color-text-secondary); background-color: transparent; flex-shrink: 0; }
.admin-list-controls #admin-refresh-list-btn:hover { background-color: var(--color-bg-element); color: var(--color-text-primary); }

/* Barra Búsqueda Admin */
.admin-search-bar { /* Sin cambios */ padding: var(--space-2) var(--space-4); background-color: var(--color-bg-base); border-bottom: 1px solid var(--color-border-divider); flex-shrink: 0; }
.admin-search-bar .input-group { background-color: var(--color-bg-element); border-radius: var(--radius-md); border: 1px solid transparent; display: flex; align-items: center; transition: background-color 0.2s, border-color 0.2s; }
.admin-search-bar .input-group:focus-within { background-color: var(--color-bg-surface); border-color: var(--color-border-interactive); }
.admin-search-bar label { padding-left: var(--space-3); padding-right: var(--space-2); color: var(--color-text-tertiary); }
.admin-search-bar input[type="search"] { flex-grow: 1; border: none; background: none; outline: none; padding: var(--space-2) 0; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.admin-search-bar input[type="search"]::placeholder { color: var(--color-text-tertiary); }
.admin-search-bar input[type="search"]::-webkit-search-cancel-button{ display: none; }

/* Contenido Principal (Lista) */
.admin-content.list-container {
    flex-grow: 1; /* Ocupar espacio restante */
    overflow-y: auto; /* Scroll solo aquí */
    padding-bottom: 0; /* Quitar padding inferior si existe */
}

/* Item Lista Admin */
.admin-verification-item { /* Sin cambios */ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-divider); cursor: pointer; transition: background-color 0.1s ease; }
.admin-verification-item:hover { background-color: var(--color-bg-surface-hover); }
.admin-verification-item img.avatar-xs { width: 40px; height: 40px; flex-shrink: 0; }
.admin-verification-info { flex-grow: 1; overflow: hidden; }
.admin-verification-info strong { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-medium); color: var(--color-text-primary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--space-1); }
.admin-verification-info small { display: block; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
/* Badge Estado en Lista */
.admin-status-badge { /* Sin cambios */ font-weight: var(--font-weight-medium); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; border: 1px solid transparent; white-space: nowrap; }
.admin-status-badge.status-pending { background-color: rgba(var(--color-warning-rgb), 0.1); color: var(--color-warning); border-color: rgba(var(--color-warning-rgb), 0.3); }
.admin-status-badge.status-approved { background-color: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); border-color: rgba(var(--color-success-rgb), 0.3); }
.admin-status-badge.status-rejected { background-color: rgba(var(--color-error-rgb), 0.1); color: var(--color-error); border-color: rgba(var(--color-error-rgb), 0.3); }
.admin-status-badge.status-not_submitted { background-color: var(--color-bg-element); color: var(--color-text-tertiary); border-color: var(--color-border-interactive); }
/* Iconos Documentos en Lista */
.admin-doc-icons { display: inline-flex; gap: var(--space-2); font-size: var(--font-size-xs); margin-top: var(--space-1); }
.admin-doc-icons i { color: var(--color-text-tertiary); opacity: 0.5; width: 1.5em; text-align: center; }
.admin-doc-icons i.uploaded { color: var(--color-text-secondary); opacity: 1; }
/* Tiempo Registro */
.admin-verification-time { font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; flex-shrink: 0; text-align: right; }

/* Paginación Admin */
.admin-pagination { /* Sin cambios */ display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-divider); background-color: var(--color-bg-surface); flex-shrink: 0; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
.admin-pagination span { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.admin-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-pagination button i { font-size: 0.8em; } #admin-prev-page-btn i { margin-right: var(--space-1); } #admin-next-page-btn i { margin-left: var(--space-1); }

/* --- FIN ESTILOS ADMIN --- */

/* Opcional en style.css / components.css */
.new-password-reqs {
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
}
.new-password-reqs li.valid i { color: var(--color-success); }


/* Estilos Toggle Contraseña (Asegurar que existan y sean correctos) */

.form-group.password-group {
    position: relative; /* Contenedor debe ser relativo */
}

/* Estilo base para inputs dentro del grupo */
.password-group input[type="password"],
.password-group input[type="text"] { /* Aplicar también a tipo text */
    /* Asegurar padding derecho para no solapar con el botón */
    padding-right: 45px; /* Ajustar valor según tamaño botón + espacio */
    width: 100%; /* Asegurar ancho completo */
    /* Otros estilos de input (border, background, etc.) */
    box-sizing: border-box; /* Incluir padding en el ancho */
}

.password-group .toggle-password {
    position: absolute; /* Posición absoluta respecto al .password-group */
    right: 0;         /* Pegado a la derecha */
    top: 0;           /* Alineado arriba */
    bottom: 0;        /* Estirar verticalmente */
    /* Alineación vertical del icono */
    display: flex;
    align-items: center;
    /* Estilo botón */
    background: none;
    border: none;
    padding: 0 var(--space-3); /* Padding horizontal */
    cursor: pointer;
    color: var(--color-text-tertiary); /* Color icono */
    font-size: 1rem; /* Tamaño icono */
    z-index: 2; /* Asegurar que esté sobre el input */
    transition: color 0.2s ease;
}
.password-group .toggle-password:hover {
    color: var(--color-text-primary);
}
.password-group .toggle-password i {
    line-height: 1; /* Evitar espacio extra icono */
}




/* frontend/css/components.css or style.css (AÑADIR AL FINAL) */

/* Estilo Botón Desactivar en Menú Opciones Perfil */
.profile-options-dropdown button[data-action="deactivate"] {
    color: var(--color-error); /* Color rojo */
}
.profile-options-dropdown button[data-action="deactivate"] i {
    color: var(--color-error); /* Icono rojo también */
}
.profile-options-dropdown button[data-action="deactivate"]:hover {
    /* Podrías oscurecer el rojo o mantenerlo */
    background-color: rgba(239, 68, 68, 0.1); /* Fondo rojo tenue al hover (asumiendo --color-error-rgb o similar) */
    /* Si no tienes --color-error-rgb, usa un color fijo: */
    /* background-color: rgba(239, 68, 68, 0.1); */
}


/* frontend/css/style.css o components.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS PANTALLA OLVIDÉ CONTRASEÑA === */
/* ================================================ */

#forgot-password-screen .screen-header {
    /* Estilos header estándar */
}

#forgot-password-screen .scrollable-content {
    /* Asegurar padding */
    padding: var(--space-6);
    display: flex; /* Centrar form */
    justify-content: center;
}

#forgot-password-form {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.forgot-password-step {
    display: none; /* Oculto por defecto */
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}
.forgot-password-step.active {
    display: flex; /* Mostrar activo */
}

/* Reutilizar estilos .step-subtitle-main, .code-input-container, .code-input, .password-group, etc. */
/* Si usas los mismos IDs/clases, no necesitas duplicar */

/* Botones */
.forgot-password-step-btn, .forgot-final-submit-btn {
    /* Estilos .btn .btn-primary */
    width: 100%;
}
.forgot-resend-otp-btn, .forgot-step-back-btn {
    /* Estilos .btn-link */
    display: block;
    margin: var(--space-sm) auto;
}

/* Paso Éxito */
#forgot-password-step-4 {
    /* Reutilizar .success-step */
    align-items: center;
    text-align: center;
}
#forgot-password-step-4 .success-checkmark {
    /* Estilos .success-checkmark */
}
#forgot-password-step-4 .step-title {
    text-align: center;
}
#forgot-password-step-4 .step-subtitle {
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* Mensaje de error */
#forgot-password-steps-container .step-error-message {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    text-align: left;
    margin-top: calc(-1 * var(--space-sm) + 4px);
    margin-bottom: var(--space-sm);
    min-height: 1.2em;
    display: none;
}

/* Input error highlight (reutilizar) */
#forgot-password-form input.input-error {
     border-color: var(--color-error) !important;
     box-shadow: 0 0 0 1px var(--color-error);
}



/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS MODAL CATEGORÍA TRABAJADOR === */
/* ================================================ */

#worker-category-modal .modal-content {
    padding: 0 var(--space-4) var(--space-4); /* Ajustar padding */
    background-color: var(--color-bg-base); /* Fondo base */
}

.category-promo-message {
    text-align: center;
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

.worker-category-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3); /* Espacio entre tarjetas */
}

.worker-category-card {
    display: flex;
    align-items: center; /* Centrar verticalmente */
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-bg-surface); /* Fondo tarjeta */
    border: 1px solid var(--color-border-divider);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.worker-category-card:hover {
    background-color: var(--color-bg-surface-hover);
}
.worker-category-card.selected {
    border-color: var(--color-accent-primary);
    background-color: var(--color-accent-primary-glow); /* Fondo sutil azul */
    box-shadow: 0 0 0 1px var(--color-accent-primary); /* Borde exterior */
}

.worker-category-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-color: var(--color-bg-element); /* Fondo icono */
    border-radius: 50%; /* Iconos redondos */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Para la imagen */
}
.worker-category-icon i { /* Si usas FontAwesome */
    font-size: 1.5rem;
    color: var(--color-text-secondary);
}
.worker-category-icon img { /* Si usas imagen */
    width: 100%; height: 100%; object-fit: cover;
}

.worker-category-info {
    flex-grow: 1;
    overflow: hidden; /* Para truncar texto */
}
.worker-category-info h4 {
    font-size: var(--font-size-base); /* Tamaño normal */
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--space-1) 0;
    color: var(--color-text-primary);
    display: flex; /* Para alinear nombre y contador */
    align-items: center;
    justify-content: space-between; /* Separar nombre y contador */
}
.worker-category-info .job-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background-color: var(--color-bg-element);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2); /* Espacio antes del contador */
}
.worker-category-info .job-count i {
    font-size: 0.8em;
}
.worker-category-info p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-1) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.worker-category-info .job-proximity { /* Distancia/Tiempo */
    /* Puedes añadir un icono si quieres */
}
.worker-category-info .job-description { /* Descripción corta */
     color: var(--color-text-tertiary);
     font-size: var(--font-size-xs);
}

.worker-category-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
    margin-left: var(--space-2);
}
.worker-category-price .current-price {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1;
}
.worker-category-price .original-price {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-decoration: line-through; /* Precio tachado */
    line-height: 1;
    margin-top: 2px; /* Pequeño espacio */
}

/* Estilo para los Skeletons */
.worker-category-card.skeleton-loader {
    cursor: default;
    border-color: transparent;
    background-color: transparent;
}
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: var(--color-bg-element); }
.skeleton-loader.title.short { width: 60px; height: 1em; margin-bottom: var(--space-1); }
.skeleton-loader.text.x-short { width: 80px; height: 0.8em; margin-bottom: var(--space-1); }
.skeleton-loader.text { width: 120px; height: 0.8em; }
.worker-category-price .skeleton-loader { margin-left: auto; /* Alinear a la derecha */ }


/* Footer Modal Trabajador */
#worker-category-modal .modal-actions {
    justify-content: space-between; /* Botones a los lados */
    align-items: center;
}
#worker-category-confirm-btn {
    flex-grow: 1; /* Botón principal ocupa más espacio */
    margin-left: var(--space-3); /* Espacio si está el botón de detalles */
}

/* --- FIN ESTILOS MODAL CATEGORÍA TRABAJADOR --- */

/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS MODAL SLIDER DISTANCIA TRABAJADOR === */
/* ================================================ */

#worker-distance-modal .modal-content {
    padding: var(--space-6);
}

.distance-slider-container.worker-slider {
    text-align: center;
    margin-bottom: var(--space-6); /* Espacio antes de ganancias/filtros */
}

.distance-slider-container.worker-slider label {
    display: block;
    font-size: var(--font-size-sm); /* Texto "X Kilómetros" */
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}
.distance-slider-container.worker-slider #worker-distance-value-display {
    font-size: 2.2rem; /* Número grande */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-right: var(--space-1);
}

.slider-wrapper {
    position: relative; /* Para posicionar las marcas */
    width: 100%;
    padding: 0 var(--space-2); /* Pequeño padding lateral */
}

/* Slider Minimalista (Negro sobre Gris) */
input[type="range"]#worker-distance-slider {
    width: 100%;
    height: 4px; /* Más delgado */
    cursor: pointer;
    appearance: none;
    /* Fondo se aplica con JS en style.background */
    background: var(--color-bg-element); /* Track inactivo */
    border-radius: var(--radius-full);
    outline: none;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4); /* Espacio para las marcas */
}

/* Thumb (Chrome/Safari) */
input[type="range"]#worker-distance-slider::-webkit-slider-thumb {
    appearance: none;
    width: 28px; /* Thumb más grande */
    height: 28px;
    background: var(--color-text-primary); /* Thumb blanco/negro */
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid var(--color-bg-base); /* Borde del color del fondo del modal */
    box-shadow: var(--shadow-sm);
    margin-top: -12px; /* Centrar verticalmente sobre el track delgado */
}
input[type="range"]#worker-distance-slider:active::-webkit-slider-thumb {
    transform: scale(1.1);
}

/* Thumb (Firefox) */
input[type="range"]#worker-distance-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: var(--color-text-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid var(--color-bg-base);
    box-shadow: var(--shadow-sm);
}
input[type="range"]#worker-distance-slider:active::-moz-range-thumb {
    transform: scale(1.1);
}

/* Track (Firefox - necesario para colores) */
input[type="range"]#worker-distance-slider::-moz-range-track {
    width: 100%; height: 4px; cursor: pointer;
    background: var(--color-bg-element); border-radius: var(--radius-full);
    border: none; /* Sin borde extra */
}
/* Progreso (Firefox - necesita JS para funcionar bien como linear-gradient) */
input[type="range"]#worker-distance-slider::-moz-range-progress {
    height: 4px;
    background: var(--color-text-primary); /* Color activo */
    border-radius: var(--radius-full);
}

/* Marcas del Slider (Ticks) */
.slider-ticks {
    display: flex;
    justify-content: space-between;
    padding: 0 4px; /* Alinear con extremos del slider */
    margin-top: -2px; /* Acercar al slider */
    position: relative;
    z-index: -1; /* Detrás del thumb */
}
.slider-ticks span {
    font-size: 10px;
    color: var(--color-text-tertiary);
    position: relative;
    /* Línea vertical pequeña debajo de cada número */
}
.slider-ticks span::before {
    content: '';
    position: absolute;
    bottom: -8px; /* Distancia de la línea al número */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 5px;
    background-color: var(--color-border-interactive);
}

/* Contenedor Ganancias Estimadas */
.estimated-earnings strong {
    display: block; /* Para que ocupe su línea */
    margin-bottom: var(--space-1);
}

/* Contenedor Filtros Worker (Switches) */
.worker-filters .switch-group {
    background-color: transparent; /* Sin fondo extra */
    border: none;
    padding: var(--space-2) 0; /* Menos padding */
}
.worker-filters .switch-label small {
    font-size: 11px; /* Más pequeño */
}

/* Botón Confirmar Distancia */
#worker-distance-confirm-btn {
    /* Estilos .btn .btn-primary .btn-block */
}

/* --- FIN ESTILOS SLIDER DISTANCIA --- */


/* frontend/css/style.css (AÑADIR AL FINAL) */

/* === ESTILOS LISTA TRABAJOS TRABAJADOR (v6 - REDISEÑO) === */
/* ======================================================== */

#worker-job-list-screen .screen-header {
    /* (Estilos header estándar) */
    flex-shrink: 0; /* Asegurar que no se encoja */
}
#worker-job-list-screen .list-container {
    flex-grow: 1; /* Ocupar espacio */
    overflow-y: auto; /* Scroll */
    padding-bottom: 0;
}

#worker-job-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Tarjeta de Trabajo Rediseñada (v6) --- */
.worker-job-card {
    background-color: var(--color-bg-surface);
    
    /* Quitar cursor pointer aquí, se aplica al main content */
    /* cursor: pointer; */
    position: relative;
    /* <<< IMPORTANTE: Quitar overflow hidden >>> */
    /* overflow: hidden; */
    transition: background-color 0.15s ease;
}
.worker-job-card:hover {
    background-color: var(--color-bg-surface-hover);
}

/* Contenedor principal (clickeable) */
.job-card-main-content {
    display: flex;
    padding: var(--space-4); /* Padding generoso */
    gap: var(--space-4); /* Más espacio entre body y precio */
    cursor: pointer; /* El área principal es clickeable */
}

/* Cuerpo Principal (Info Izquierda) */
.job-card-body {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Organizar elementos verticalmente */
}

/* Info Empleador */
.job-card-body .employer-info-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3); /* Más espacio antes del título */
}
.job-card-body .employer-info-line img.employer-avatar {
    width: 28px; /* Avatar un poco más grande */
    height: 28px;
    border-radius: 50%; flex-shrink: 0;
    background-color: var(--color-bg-element); border: 1px solid var(--color-border-subtle);
}
.job-card-body .employer-info-line .employer-name {
    font-size: 0.900rem;
    color: var(--color-text-secondary); /* Más sutil */
    font-weight: var(--font-weight-medium);
    white-space: nowrap; /*overflow: hidden;*/ text-overflow: ellipsis;
    display: inline-flex; /* Para alinear check */
    align-items: center;
    gap: var(--space-1);
}
.job-card-body .employer-info-line .employer-verified-icon {
    color: var(--color-accent-primary);
    font-size: 0.9em; /* Check un poco más pequeño */
    flex-shrink: 0;
    /* Quitar margen extra */
}

/* Título */
.job-card-body .job-title {
    font-size: 1.05rem; /* Ligeramente más grande que base */
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0; /* Espacio debajo */
    line-height: 1.3; /* Ajustar interlineado */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Quitar min-height, -webkit-line-clamp maneja la altura */
}

/* Footer (Tiempo/Distancia) */
.job-card-footer {
    margin-top: auto; /* Empujar al final del flex container (job-card-body) */
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    opacity: 0.9;
}

/* Contenedor Precio e Indicadores (Derecha) */
.job-card-price-container {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.job-card-price-container .price-value {
    font-size: 1.4rem; /* Precio más grande */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}
.job-card-price-container .price-currency {
    font-size: var(--font-size-xs);
    font-weight: normal;
    color: var(--color-text-tertiary);
    display: block;
    margin-top: 1px;
    margin-bottom: var(--space-3); /* Más espacio antes de indicadores */
}
.job-card-indicators {
    display: flex;
    flex-direction: column; /* Apilar */
    align-items: flex-end;
    gap: var(--space-1);
}
.job-card-indicators .indicator-badge { /* Badge duración */
    background-color: var(--color-bg-element);
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    line-height: 1;
    white-space: nowrap;
}

/* --- Área de Acciones Expandible (v6 - max-height) --- */
.job-card-actions {
    background-color: var(--color-bg-element); /* Fondo distinto */
    max-height: 0; /* Oculto por defecto */
    overflow: hidden; /* IMPORTANTE para max-height */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, border-top-width 0.3s ease-out; /* Animar todo */
    padding: 0 var(--space-4); /* Padding horizontal constante */
    border-top: 0px solid var(--color-border-divider); /* Borde invisible inicialmente */
    box-sizing: border-box; /* Incluir padding/border en altura */
    
}
/* Estado visible */
.worker-job-card.actions-visible .job-card-actions {
    max-height: 150px; /* Altura suficiente */
    padding-top: var(--space-3); /* Padding superior al expandir */
    padding-bottom: var(--space-3); /* Padding inferior al expandir */
    border-top-width: 1px; /* Mostrar borde */
}
/* Contenido interno de las acciones */
.job-card-actions .actions-inner-wrapper {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}

/* Grupo Ajustar Oferta */
.offer-adjust-group {
    display: flex; align-items: center; gap: var(--space-2);
    background-color: var(--color-bg-surface); border-radius: var(--radius-md);
    padding: var(--space-1); border: 1px solid var(--color-border-interactive);
}
.offer-adjust-btn {
    width: 32px; height: 32px; padding: 0; font-size: 1.1rem; line-height: 1;
    border-radius: 50%; background-color: var(--color-bg-element-hover);
    color: var(--color-text-primary); border: none;
}
.offer-adjust-btn:hover { background-color: var(--color-border-interactive); }
.offer-adjust-btn:active { transform: scale(0.95); }
.current-offer-display {
    color: var(--color-text-primary); font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm); min-width: 45px; text-align: center; padding: 0 var(--space-1);
}
.current-offer-display::before { content: "S/. "; font-size: 0.8em; color: var(--color-text-tertiary); }

/* Botones Detalles y Enviar */
.job-card-actions .btn-secondary, .job-card-actions .btn-primary {
    padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm);
}
.job-card-actions .btn-secondary i { margin-right: var(--space-1); }

/* Línea Inferior (Separador Visual - Sutil) */
.job-card-timer-line {
    height: 1px; /* Muy fina */
    background-color: var(--color-border-divider); /* Color del borde */
    background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    /* Quitar gradiente por ahora */
    /* background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%); */
}
.job-card-actions .actions-inner-wrapper > * {
    opacity: 0;
    transition: opacity 0.2s ease-out 0.1s; /* Fade in con delay */
}
.worker-job-card.actions-visible .job-card-actions .actions-inner-wrapper > * {
    opacity: 1;
}
/* --- Skeleton (Ajustado v6) --- */
.skeleton-loader.worker-job-card {    
     padding: var(--space-4); border-bottom: 1px solid #dee2e600;;
     background-color: var(--color-bg-surface);
}
.worker-job-card .job-card-main-content .skeleton-loader { background-color: var(--color-bg-element-hover); border-radius: var(--radius-sm);}
.worker-job-card .job-card-body .skeleton-loader { margin-bottom: var(--space-2); }
.worker-job-card .job-card-body .skeleton-loader.employer-line { height: 28px; width: 70%; } /* Más alto por avatar */
.worker-job-card .job-card-body .skeleton-loader.title { height: 1.3em; width: 85%; }
.worker-job-card .job-card-body .skeleton-loader.title.short { height: 1.3em; width: 60%; }
.worker-job-card .job-card-body .skeleton-loader.footer-line { height: 0.8em; width: 90%; margin-top: var(--space-3); }
.worker-job-card .job-card-price-container .skeleton-loader { background-color: var(--color-bg-element); }
.worker-job-card .job-card-price-container .skeleton-loader.price-val { height: 1.5em; width: 50px; margin-bottom: var(--space-1); margin-left: auto;}
.worker-job-card .job-card-price-container .skeleton-loader.price-curr { height: 0.9em; width: 30px; margin-bottom: var(--space-2); margin-left: auto;}
.worker-job-card .job-card-price-container .skeleton-loader.indicator-skel { height: 16px; width: 40px; border-radius: var(--radius-sm); margin-left: auto;}
/* No skeleton para timer line */

.employer-rating-stars {
    font-size: var(--font-size-xs);
    color: var(--color-warning); /* Color estrella */
    margin-left: var(--space-2);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.employer-rating-stars i { margin-right: 2px; }
/* --- FIN ESTILOS LISTA TRABAJOS (v6) --- */










    /* --- Icono/Imagen en Modal Selección Tipo Trabajo --- */
    .job-type-option-icon {
        width: 40px; /* Ajustar tamaño según diseño */
        height: 40px;
        object-fit: contain; /* Para que no se deforme si no es cuadrada */
        margin-bottom: var(--space-2);
        display: block; /* Asegurar que sea bloque */
        margin-left: auto; /* Centrar horizontalmente */
        margin-right: auto;
    }

    /* --- Icono/Imagen en Animación Modal Selección --- */
    .job-type-animation-icon {
        width: 80px; /* Tamaño más grande para animación */
        height: 80px;
        object-fit: contain;
        display: inline-block;
        transform-origin: center center;
        transform: scale(0.8); /* Estado inicial animación */
        opacity: 0.8;
        /* La animación se aplica con la clase .animating-selection en el modal */
        animation: inflateIcon 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.1s;
    }
    /* Keyframes inflateIcon (si no existe ya) */
    @keyframes inflateIcon {
        0% { transform: scale(0.8); opacity: 0.8; }
        50% { transform: scale(1.2); opacity: 1; } /* Ajustar valores */
        100% { transform: scale(1); opacity: 1; }
    }


    /* --- Icono/Imagen en Header Modal Detalles --- */
    .job-type-icon-container {
        /* (Estilos contenedor ya definidos) */
        /* Asegurar que el icono/imagen se centre */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .job-type-icon { /* La imagen dentro del contenedor */
        max-width: 80%; /* Limitar tamaño dentro del contenedor */
        max-height: 80%;
        object-fit: contain;
    }




/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ====================================================== */
/* === ESTILOS FILTRO Y VIEW TOGGLE (Worker Job List) === */
/* ====================================================== */

/* --- Header Actions --- */
.job-list-header-actions {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: var(--space-2);
}
.job-list-header-actions .icon-btn {
    /* Heredar estilos .icon-btn o .map-header-btn */
    width: 36px; height: 36px; font-size: 1.1rem;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-element); /* Fondo sutil */
}
.job-list-header-actions .icon-btn:hover {
    background-color: var(--color-bg-element-hover);
    color: var(--color-text-primary);
}

/* --- Modal Filtro --- */
#job-type-filter-modal .modal-content { padding: 0; }
.filter-search-container .input-group { /* Reutilizar estilo búsqueda admin/preels */
    background-color: var(--color-bg-element); border-radius: var(--radius-md); border: 1px solid transparent; display: flex; align-items: center; transition: background-color 0.2s, border-color 0.2s;
}
.filter-search-container .input-group:focus-within { background-color: var(--color-bg-surface); border-color: var(--color-border-interactive); }
.filter-search-container label { padding-left: var(--space-3); padding-right: var(--space-2); color: var(--color-text-tertiary); }
.filter-search-container input[type="search"] { flex-grow: 1; border: none; background: none; outline: none; padding: var(--space-2) 0; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.filter-search-container input[type="search"]::placeholder { color: var(--color-text-tertiary); }
.filter-search-container input[type="search"]::-webkit-search-cancel-button{ display: none; }

#filter-type-list { list-style: none; padding: 0; margin: 0; }
.filter-type-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-divider);
    transition: background-color 0.1s ease;
}
.filter-type-item:last-child { border-bottom: none; }
.filter-type-item:hover { background-color: var(--color-bg-surface-hover); }
.filter-type-item i { /* Icono tipo FA (o placeholder) */
    color: var(--color-text-secondary); width: 1.5em; text-align: center; font-size: 1rem;
}
.filter-type-item img.filter-type-icon { /* Imagen tipo */
    width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
}
.filter-type-item span { /* Nombre tipo */
    font-size: var(--font-size-sm); color: var(--color-text-secondary); flex-grow: 1;
}
.filter-type-item.active {
    background-color: var(--color-accent-primary-glow); /* Resaltado */
}
.filter-type-item.active span {
    color: var(--color-accent-primary); /* Color texto activo */
    font-weight: var(--font-weight-semibold);
}
.filter-type-item.active i {
    color: var(--color-accent-primary);
}
.filter-no-results { /* Mensaje "no se encontraron" */ }



/* frontend/css/style.css o components.css (REEMPLAZAR ESTA SECCIÓN COMPLETA v14 - FINAL SIMPLIFIED) */

/* ============================================================================ */
/* === ESTILOS LISTA TRABAJOS TRABAJADOR (v14 - FINAL SIMPLIFIED)           === */
/* ============================================================================ */

#worker-job-list-screen .screen-header { flex-shrink: 0; }
#worker-job-list-screen .list-container { flex-grow: 1; overflow-y: auto; padding: 0; position: relative; }
#worker-job-list { list-style: none; padding: 0; margin: 0; }

/* --- Control de Visibilidad Lista vs Grid --- */
#worker-job-list-container.view-mode-grid #worker-job-list > .worker-job-card { display: none !important; }
#worker-job-list-container.view-mode-list #worker-job-list .portfolio-block { display: none !important; }
#worker-job-list-container.view-mode-list #worker-job-list > .worker-job-card { display: block !important; padding: 0px 0px;}
#worker-job-list-container.view-mode-grid #worker-job-list { display: flex !important; flex-direction: column; gap: 2px; padding: 2px; }
#worker-job-list-container.view-mode-grid #worker-job-list .portfolio-block { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(110px, auto); gap: 2px; width: 100%; }

/* --- Estilos Tarjeta Vista Lista (worker-job-card) --- */
/* (Sin cambios - omitido por brevedad) */
.worker-job-card { background-color: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-divider); cursor: pointer; position: relative; transition: background-color 0.15s ease; }
.worker-job-card:hover { background-color: var(--color-bg-surface-hover); }
.job-card-main-content { display: flex; padding: var(--space-4); gap: var(--space-4); cursor: pointer; }
.job-card-body { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; }
.job-card-body .employer-info-line { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.job-card-body .employer-info-line img.employer-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background-color: var(--color-bg-element); border: 1px solid var(--color-border-subtle); }
.job-card-body .employer-info-line .employer-name { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: var(--space-1); }
.job-card-body .employer-info-line .employer-verified-icon { color: var(--color-accent-primary); font-size: 0.9em; flex-shrink: 0; }
.job-card-body .employer-rating-stars { font-size: var(--font-size-xs); color: var(--color-warning); margin-left: var(--space-2); font-weight: var(--font-weight-medium); white-space: nowrap; }
.job-card-body .employer-rating-stars i { margin-right: 2px; }
.job-card-body .job-title { font-size: 1.05rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--space-3) 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-card-footer { margin-top: auto; display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-tertiary); opacity: 0.9; }
.job-card-price-container { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.job-card-price-container .price-value { font-size: 1.3rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1; }
.job-card-price-container .price-currency { font-size: var(--font-size-xs); font-weight: normal; color: var(--color-text-tertiary); display: block; margin-top: 1px; margin-bottom: var(--space-3); }
.job-card-indicators { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.job-card-indicators .indicator-badge { background-color: var(--color-bg-element); color: var(--color-text-secondary); font-size: 10px; font-weight: var(--font-weight-medium); padding: 3px 6px; border-radius: var(--radius-sm); line-height: 1; white-space: nowrap; }
.job-card-actions { background-color: var(--color-bg-element); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out, border-top-width 0.3s ease-out; padding: 0 var(--space-4); border-top: 0px solid var(--color-border-divider); box-sizing: border-box; }
.worker-job-card.actions-visible .job-card-actions { max-height: 150px; padding-top: var(--space-3); padding-bottom: var(--space-3); border-top-width: 1px; }
.job-card-actions .actions-inner-wrapper { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.2s ease-out 0.1s; }
.worker-job-card.actions-visible .job-card-actions .actions-inner-wrapper { opacity: 1; }
.offer-adjust-group { display: flex; align-items: center; gap: var(--space-2); background-color: var(--color-bg-surface); border-radius: var(--radius-md); padding: var(--space-1); border: 1px solid var(--color-border-interactive); }
.offer-adjust-btn { width: 32px; height: 32px; padding: 0; font-size: 1.1rem; line-height: 1; border-radius: 50%; background-color: var(--color-bg-element-hover); color: var(--color-text-primary); border: none; cursor: pointer; transition: background-color 0.1s, transform 0.1s; }
.offer-adjust-btn:hover { background-color: var(--color-border-interactive); } .offer-adjust-btn:active { transform: scale(0.95); }
.current-offer-display { color: var(--color-text-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); min-width: 45px; text-align: center; padding: 0 var(--space-1); }
.current-offer-display::before { content: "S/. "; font-size: 0.8em; color: var(--color-text-tertiary); }
.job-card-actions .btn-secondary, .job-card-actions .btn-primary { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
.job-card-actions .btn-secondary i { margin-right: var(--space-1); }
.job-card-timer-line { height: 1px; background-color: var(--color-border-divider); }

/* --- Estilos Vista Grid (v14 - FINAL SIMPLIFIED) --- */
/* Estilos Bloque y Layouts (sin cambios) */
.portfolio-block { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(110px, auto); gap: 2px; width: 100%; }
.portfolio-item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
/* ... Selectores :nth-child para layouts ... */
.portfolio-block--layout-1 .portfolio-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: 1 / 2 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(n+2):nth-child(-n+3) { grid-row: 1 / 2; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(n+4):nth-child(-n+5) { grid-row: 2 / 3; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(2), .portfolio-block--layout-1 .portfolio-item:nth-child(4) { grid-column: 2 / 3; }
.portfolio-block--layout-1 .portfolio-item:nth-child(3), .portfolio-block--layout-1 .portfolio-item:nth-child(5) { grid-column: 3 / 4; }
.portfolio-block--layout-2 .portfolio-item:nth-child(5) { grid-column: 3 / 4; grid-row: 1 / 3; aspect-ratio: 1 / 2 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(n+1):nth-child(-n+2) { grid-row: 1 / 2; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(n+3):nth-child(-n+4) { grid-row: 2 / 3; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(1), .portfolio-block--layout-2 .portfolio-item:nth-child(3) { grid-column: 1 / 2; }
.portfolio-block--layout-2 .portfolio-item:nth-child(2), .portfolio-block--layout-2 .portfolio-item:nth-child(4) { grid-column: 2 / 3; }

/* Estilo Base del Item Grid (Tarjeta) */
#worker-job-list-container.view-mode-grid .portfolio-item {
    position: relative; /* <<< ESENCIAL */
    background-color: var(--color-bg-element);
    /* overflow: hidden; <<< ASEGURAR QUE NO ESTÉ */
    cursor: pointer;
    aspect-ratio: 1 / 1;
    border-radius: 0px 0px;
}
#worker-job-list-container.view-mode-grid .portfolio-item img.grid-item-image {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: var(--radius-md);
}
#worker-job-list-container.view-mode-grid .portfolio-item:hover img.grid-item-image {
    transform: scale(1.03);
}

/* Gradiente Overlay (::after) - Siempre visible */
#worker-job-list-container.view-mode-grid .portfolio-item::after {
 content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(248 249 250) 0%, rgb(255 255 255 / 0%) 15%, #b0b0b000 0%);
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    /*border-radius: var(--radius-md);*/
    transition: background 0.3s ease;
}

/* --- Elementos Superpuestos (Posicionamiento Absoluto DIRECTO) --- */
/* Estilo común para badges */
.grid-badge {
    position: absolute;
    z-index: 2;
    background-color: rgba(var(--color-bg-surface-rgb), 0.8); /* Fondo más opaco */
    backdrop-filter: blur(4px); /* Más blur */
    color: var(--color-text-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-md); /* Redondeado */
    line-height: 1.1;
    white-space: nowrap;
    border: none; /* Sin borde extra */
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Sombra sutil */
}
.grid-badge i { opacity: 0.8; font-size: 0.9em; }

/* Badge Duración (Arriba Derecha) */
.grid-item-duration-badge { top: var(--space-2); right: var(--space-2); }

/* Badge Precio (Abajo Derecha) */
.grid-item-price-badge { border-radius: 10px 1px;
    background: #000000;
    bottom: var(--space-2);
    right: var(--space-2);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 1px 3px rgb(0 0 0 / 74%);
    color: #fff; }
/* 'S/.' se añade en JS */

/* Badge Distancia (Abajo Izquierda) */
.grid-item-distance-badge {


    border-radius: 3px 3px;
    bottom: var(--space-2);
    left: var(--space-2);
    color: var(--color-text-secondary);
    background-color: #e0e0e0;
}

/* Info Empleador (Arriba Izquierda - APARECE EN HOVER) */
.grid-item-employer-info {
    position: absolute; top: var(--space-2); left: var(--space-2);
    z-index: 3; /* Encima de los badges */
    display: flex; align-items: center; gap: var(--space-2);
    max-width: calc(100% - 60px); /* Ancho máximo */
    /* --- ESTADO INICIAL OCULTO --- */
    opacity: 0;
    transform: scale(0.95) translateY(-3px);
    transform-origin: left top;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out; /* Transición rápida */
    pointer-events: none;
    /* --- Estilos para legibilidad --- */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
    padding: 5px 8px;
    border-radius: var(--radius-md); /* Más redondeado */
    box-shadow: var(--shadow-sm);
}
/* *** REGLA HOVER *** */
#worker-job-list-container.view-mode-grid .portfolio-item:hover .grid-item-employer-info {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
/* Avatar y Nombre */
.grid-item-employer-info img.avatar-xs { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6); flex-shrink: 0; background-color: var(--color-bg-element); }
.grid-item-employer-info span { font-size: var(--font-size-xs); color: var(--color-text-on-accent); font-weight: var(--font-weight-medium); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Skeleton (Sin Cambios) --- */
/* (Igual que antes, omitido por brevedad) */
.skeleton-loader.worker-job-card { padding: var(--space-4); border-bottom: 1px solid var(--color-border-divider); background-color: var(--color-bg-surface); }
.worker-job-card .job-card-main-content .skeleton-loader { background-color: var(--color-bg-element-hover); border-radius: var(--radius-sm);}
.worker-job-card .job-card-body .skeleton-loader { margin-bottom: var(--space-2); }
.worker-job-card .job-card-body .skeleton-loader.employer-line { height: 28px; width: 70%; }
.worker-job-card .job-card-body .skeleton-loader.title { height: 1.3em; width: 85%; }
.worker-job-card .job-card-body .skeleton-loader.title.short { height: 1.3em; width: 60%; }
.worker-job-card .job-card-body .skeleton-loader.footer-line { height: 0.8em; width: 90%; margin-top: var(--space-3); }
.worker-job-card .job-card-price-container .skeleton-loader { background-color: var(--color-bg-element); }
.worker-job-card .job-card-price-container .skeleton-loader.price-val { height: 1.5em; width: 50px; margin-bottom: var(--space-1); margin-left: auto;}
.worker-job-card .job-card-price-container .skeleton-loader.price-curr { height: 0.9em; width: 30px; margin-bottom: var(--space-2); margin-left: auto;}
.worker-job-card .job-card-price-container .skeleton-loader.indicator-skel { height: 16px; width: 40px; border-radius: var(--radius-sm); margin-left: auto;}
#worker-job-list-container.view-mode-grid .skeleton-loader.portfolio-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
#worker-job-list-container.view-mode-grid .skeleton-loader.portfolio-item { background-color: var(--color-bg-element); background-image: linear-gradient(90deg, var(--color-bg-element), var(--color-bg-element-hover), var(--color-bg-element)); background-size: 300px 100%; background-repeat: no-repeat; animation: loading-skeleton-tempconnect 1.5s ease-in-out infinite; aspect-ratio: 1 / 1; margin-bottom: 0; border-radius: var(--radius-md); } /* Añadir radius al skeleton grid */

/* --- FIN ESTILOS LISTA TRABAJOS (v14 FINAL) --- */




/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS SECCIÓN HISTORIAS (Home Screen) === */
/* ================================================ */


.stories-container {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-1) 1px var(--space-1) 17px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.stories-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    width: 75px;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.story-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 2px;
    background-clip: content-box;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Estilo Botón Agregar */
.story-item.add-story .story-avatar {
    border-color: #2d3748;
    background-image: linear-gradient(#2d3748, #2d3748), linear-gradient(45deg, #2d3748, #2d3748);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border: 3px solid transparent;
}
.story-item.add-story .story-avatar i {
    font-size: 1rem;
    color: #ffffff;
}
.story-item.add-story:hover .story-avatar {
    border-color: var(--color-text-secondary);
}

/* Estados del Borde (Aureola) */
.story-item.unseen .story-avatar {
   /*border-color: black; */
    /* background-image: linear-gradient(#000000, #000000), linear-gradient(45deg, #4a0f9d, #2296e8); */
    /* background-origin: border-box; */
    /* background-clip: content-box, border-box; */
    border: 2px solid #4294ff;
}
.story-item.seen .story-avatar {
    border-color: #f8f9fa;
    background-image: none;
}
/* Cuando no hay stories, no debería tener la clase unseen/seen */

/* Estilo Nombre de Usuario */
.story-username {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 14px;
    border-radius: 30px;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: transparent;
}

/* Estilo Nombre Usuario con Historia NO VISTA */
.story-item.unseen .story-username {
      /* background-color: #373435; */
    color: #373435;
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);*/
}
.story-item.seen .story-username {
    color: var(--color-text-secondary); /* Texto gris si visto */
    background-color: transparent; /* Sin fondo */
    box-shadow: none; /* Sin sombra */
}
.story-item.seen {
    /* Duración muy corta, solo para forzar redibujo */
    animation: force-redraw-story-item 0.05s linear; 
}

/* Skeleton Story Item */
.story-item.skeleton-story .story-avatar {
    background-color: var(--color-bg-element);
    border-color: var(--color-bg-element);
}
.story-item.skeleton-story .story-username.skeleton-loader {
    background-color: var(--color-bg-element);
    border-radius: var(--radius-sm);
    margin-top: var(--space-1); /* Ajustar si es necesario */
}


/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS MODAL CREADOR DE HISTORIAS === */
/* ================================================ */

#story-creator-modal .modal-content {
    /* Ya tiene flex por defecto en el HTML inline */
    background-color: var(--color-bg-base); /* Fondo general */
}

#story-preview-container {
    position: relative; /* Para posicionar el caption */
    overflow: hidden; /* Evitar desbordes */
    background-color: var(--color-bg-deep); /* Fondo oscuro para preview */
}

#story-image-preview {
    display: none; /* Oculta hasta que se carga imagen */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mostrar imagen completa */
}
#story-image-preview.loaded {
    display: block; /* Mostrar cuando cargue */
}

#story-preview-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-secondary);
    font-style: italic;
}

#story-caption-input {
    position: absolute;
    bottom: var(--space-6); /* Más arriba */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--space-8)); /* Ancho adaptable */
    max-width: 350px; /* Ancho máximo */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro translúcido */
    color: white;
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    outline: none;
    display: none; /* Oculto hasta que haya imagen */
}
#story-caption-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
#story-caption-input:focus {
    box-shadow: 0 0 0 2px var(--color-accent-primary-glow);
}

#story-creator-modal .modal-actions button {
    min-width: 100px; /* Ancho mínimo botones */
}



/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS VISOR DE HISTORIAS === */
/* ================================================ */

/* Estilo Base del Modal Fullscreen */
.modal.story-viewer-modal-fullscreen {
    position: fixed;
    inset: 0; /* <<< CLAVE: top: 0; right: 0; bottom: 0; left: 0; */
    background-color: #000000;
    z-index: var(--z-story-viewer); /* O un valor alto como 101 */
    border-radius: 0;
    box-shadow: none;
    max-height: 100vh;
    max-height: -webkit-fill-available;
    max-width: 100%; /* <<< CLAVE: Ocupar todo el ancho */
    width: 100%;    /* <<< CLAVE: Ocupar todo el ancho */
    padding: 0; /* Sin padding */
    display: flex; /* Mantenido por UI.js */
    /* <<< CAMBIO: Quitar transform translateX(-50%) >>> */
    transform: translateY(0); /* Sin traslación Y inicial */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    /* Eliminar márgenes que podrían venir de .modal general */
    margin: 0 !important;

}
.modal.story-viewer-modal-fullscreen.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Contenedor Principal Interno */
.story-viewer-container {
    width: 100%;
    height: 100%;
    max-width: var(--modal-max-width); /* Limitar ancho en desktop */
    margin: 0 auto; /* Centrar en desktop */
    display: flex;
    flex-direction: column;
    position: relative; /* Para elementos absolutos internos */
    overflow: hidden; /* Evitar desbordes */
   /* Fondo negro sólido interno */
 background-color: transparent;
}

/* Barras de Progreso (Arriba) */
.story-progress-bars {
    position: absolute;
    /* <<< CAMBIO: Pegado al borde superior, padding maneja safe area >>> */
    top: 0; 
    left: var(--space-3); /* Más padding lateral */
    right: var(--space-3);
    z-index: 5;
    display: flex;
    gap: 4px; /* Un poco más de espacio */
    padding-top: calc(var(--space-2) + env(safe-area-inset-top)); /* SafeArea */
}
.progress-segment {
    flex-grow: 1;
    height: 2.5px; /* <<< Más delgadas */
    background-color: rgba(255, 255, 255, 0.25); /* <<< Gris más translúcido */
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* <<< Blanco casi sólido */
    width: 0%;
    border-radius: var(--radius-full);
    transition: width 0.1s linear;
}
.progress-segment.active .progress-fill {
    /* La animación de llenado se controlará con JS cambiando el width */
    /* Ejemplo de animación si fuera solo CSS: */
    /* animation: fillProgress 5s linear forwards; */
}
/* @keyframes fillProgress { from { width: 0%; } to { width: 100%; } } */

/* Header (Info Usuario y Botones) */
.story-viewer-header {
    position: absolute;
    /* <<< CAMBIO: Más abajo para no solapar tanto las barras >>> */
    top: calc(var(--space-2) + 3px + var(--space-3) + env(safe-area-inset-top)); 
    left: var(--space-4); /* Más padding */
    right: var(--space-4);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* <<< CAMBIO: Gradiente más suave o quitarlo? Probemos sin gradiente >>> */
    background: none; 
    padding-bottom: 0; /* Sin padding extra abajo */
    pointer-events: none;
}


.story-user-info, .story-viewer-actions, .story-viewer-btn {
    pointer-events: auto; /* Hijos sí interceptan */
}
.story-user-info {
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none; color: #fff; pointer-events: auto;
    /* <<< NUEVO: Fondo suave para destacar info usuario >>> */
    background-color: rgba(0, 0, 0, 0.2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}
.story-avatar-small {
    width: 28px; /* <<< Un poco más pequeño? */
    height: 28px;
    border-radius: 50%; object-fit: cover;
    /* Quitar borde o hacerlo más sutil */
    border: none; 
}
#story-viewer-username {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.story-viewer-actions {
    display: flex;
    gap: var(--space-1);
    pointer-events: auto; /* Permitir clic */
}
.story-viewer-btn {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px); /* <<< Añadir blur */
    border: none;
    border-radius: 50%;
    width: 36px; height: 36px; font-size: 1.1rem;
     pointer-events: auto; /* <<< Asegurar que los botones sean clickeables */
}
.story-viewer-btn:hover {
    background-color: rgba(50, 50, 50, 0.7);
    color: #fff;
}

/* Contenedor Media (Imagen/Video) */
.story-media-container {
    flex-grow: 1; display: flex; justify-content: center;
    align-items: center; overflow: hidden; position: relative;
    z-index: 0; /* Detrás de todo */
}
#story-viewer-image,
#story-viewer-video {
    display: block; /* Asegurar display block */
    max-width: 100%;
    max-height: 100%;
    width: auto; /* Ajustar automáticamente */
    height: auto;
    object-fit: contain; /* Contener dentro del área */
}
#story-viewer-loader {
    /* Estilos ya definidos para .loading-spinner */
    border-top-color: #fff; /* Color spinner blanco */
}

/* Caption (Abajo) */
.story-viewer-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: var(--space-6) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    /* <<< CAMBIO: z-index encima del overlay nav pero debajo del header >>> */
    z-index: 5; 
    pointer-events: none;
}
#story-viewer-caption-text {
    color: #fff;
    font-size: var(--font-size-sm);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    margin: 0;
    line-height: var(--line-height-snug);
}

/* Overlay de Navegación (Invisible) */
.story-nav-overlay {
    position: absolute;
    inset: 0;
    /* <<< CAMBIO: z-index debajo del header y caption, pero encima de media >>> */
    z-index: 4; 
    display: flex;
    pointer-events: auto; /* <<< Este SÍ necesita capturar eventos */
}
.story-nav-prev, .story-nav-next {
    flex: 1 1 30%;
    cursor: pointer;
    /* background-color: rgba(255, 0, 0, 0.05); */ /* DEBUG */
}
.story-nav-pause-resume {
    flex: 1 1 40%;
     /* cursor: grab; */ /* Opcional */
    /* background-color: rgba(0, 0, 255, 0.05); */ /* DEBUG */
}

/* --- FIN ESTILOS VISOR HISTORIAS --- */
/* frontend/css/style.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS OPCIONES/VISTAS VISOR HISTORIAS === */
/* ================================================ */

/* Botón Opciones (3 puntos) */
#story-viewer-options-btn {
    /* Estilos ya definidos por .story-viewer-btn */
}

/* Menú Desplegable Opciones */
.story-options-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1)); /* <<< Más separación del header */
    right: var(--space-4); /* Alineado con botón X */
    /* <<< CAMBIO: Fondo y blur estilo Apple/Uber >>> */
    background-color: rgb(255 255 255 / 85%); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para Safari */
    border-radius: var(--radius-lg); /* <<< Más redondeado */
    box-shadow: var(--shadow-md); /* Sombra más suave */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde blanco muy tenue */
    z-index: 15;
    overflow: hidden;
    min-width: 220px; /* Ancho ajustado */
    padding: var(--space-1) 0;
    pointer-events: auto !important;
}
.story-options-dropdown button:last-child { border-bottom: none; }
.story-options-dropdown button {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: var(--space-2) var(--space-4); /* Más padding horizontal */
    background: none; border: none;
    /* <<< CAMBIO: Color texto más brillante >>> */
    color: var(--color-text-primary); 
    font-size: var(--font-size-sm);
    text-align: left; cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador muy tenue */
}
.story-options-dropdown button:hover { background-color: rgba(255, 255, 255, 0.1);  }
.story-options-dropdown button i { color: var(--color-text-secondary); width: 1.2em; text-align: center; }
.story-options-dropdown button[data-action="delete-story"] { color: var(--color-error); }
.story-options-dropdown button[data-action="delete-story"] i { color: var(--color-error); }
.story-options-dropdown button[disabled] { opacity: 0.5; cursor: not-allowed; background-color: transparent !important; }

/* Footer Combinado (Caption y Vistas) */
.story-viewer-footer {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 5; display: flex; align-items: flex-end;
    justify-content: space-between; /* <<< Volver a space-between */
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); /* Más padding inferior */
    /* <<< CAMBIO: Gradiente más alto y suave >>> */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 30%, transparent 100%); 
    pointer-events: none;
}

/* Caption (Alinear a la izquierda) */
/* Caption */
.story-viewer-caption {
    position: static; padding: 0; background: none;
    text-align: center; flex-grow: 1;
    margin: 0 var(--space-4); /* Márgenes laterales para centrar mejor */
    order: 0; /* Resetear orden */
    pointer-events: auto; /* Permitir seleccionar texto */
}
#story-viewer-caption-text {
     color: #fff; font-size: var(--font-size-sm);
     text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
     margin: 0; line-height: 1.4; /* Un poco más compacto */
     display: -webkit-box; -webkit-line-clamp: 2;
     -webkit-box-orient: vertical; overflow: hidden;
}
/* Vistas */
.story-viewer-views {
    display: flex; align-items: center; gap: 5px; /* Menos gap */
    color: rgba(255, 255, 255, 0.85); /* Blanco un poco menos brillante */
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold); /* Más grueso */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    flex-shrink: 0; pointer-events: auto; cursor: default;
    /* <<< NUEVO: Fondo suave opcional >>> */
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 2px 6px; */
    /* border-radius: var(--radius-sm); */
}

.story-viewer-views i { font-size: 0.9em; opacity: 1; } /* Icono más opaco */


/* ================================================ */
/* === ESTILOS MODAL CONFIRMACIÓN === */
/* ================================================ */

.modal.confirmation-modal {
    /* Hereda estilos base de .modal */
    max-height: fit-content; /* Ajustar altura al contenido */
    bottom: 0; /* Pegado abajo */
    transform: translate(-50%, 50%) scale(0.9); /* Empezar escalado y centrado */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Redondeado superior */
    max-height: fit-content; /* Ajustar altura al contenido */
    max-width: var(--modal-max-width); /* Mantener ancho máximo */
    
        transition: transform var(--transition-duration-normal) cubic-bezier(0.4, 0, 0.2, 1), /* Animación slide */
                opacity 0.2s ease-out, /* Fade in/out más rápido */
                visibility 0s linear var(--transition-duration-normal);
    z-index: 115;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2); /* Sombra superior */
    flex-direction: column;
    opacity: 0;
    margin-left: max(0px, env(safe-area-inset-left));
    margin-right: max(0px, env(safe-area-inset-right));
}

.modal.confirmation-modal.active {
    transform: translate(-50%, 0%) scale(1); /* Escalar a tamaño normal */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Ocultar header estándar si existe */
.modal.confirmation-modal .modal-header { display: none; }

.modal.confirmation-modal .modal-content {
    padding: var(--space-6); /* Padding interno generoso */
    padding-top: var(--space-8); /* Más padding arriba si no hay header */
    text-align: center; /* Centrar contenido */
    background-color: var(--color-bg-surface); /* Asegurar fondo */
    /* Quitar flex-grow si no es necesario que se estire */
}
.modal.confirmation-modal #confirmation-icon {
    font-size: 2.5rem; /* O el tamaño que prefieras */
    margin-bottom: var(--space-4);
    /* color ya se define dinámicamente */
}

.modal.confirmation-modal #confirmation-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.modal.confirmation-modal #confirmation-message {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
    line-height: var(--line-height-snug);
}

.modal.confirmation-modal .confirmation-actions {
    /* Hereda estilos de .modal-actions si los tiene */
    padding: var(--space-4) var(--space-6);
    display: flex;
    gap: var(--space-3); /* Espacio entre botones */
    justify-content: center; /* Centrar botones si solo hay uno o dos */
    flex-wrap: wrap;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-divider);
    background-color: var(--color-bg-surface);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); /* SafeArea */
}
.modal.confirmation-modal .confirmation-actions .btn {
    flex: 1 1 120px; /* Permitir crecer pero tener base */
    max-width: 180px; /* Ancho máximo por botón */
}

/* Opcional: Estilo específico si solo hay un botón (Confirmar) */
.modal.confirmation-modal .confirmation-actions:has(#confirmation-confirm-btn:only-child) {
    justify-content: center;
}
/* Opcional: Estilo específico si solo hay dos botones */
.modal.confirmation-modal .confirmation-actions:has(#confirmation-confirm-btn):has(#confirmation-cancel-btn):not(:has(.btn:nth-child(3))) {
     justify-content: space-between; /* Separar si hay dos */
}

/* Estilos específicos para los botones de confirmación */
.confirmation-actions {
    padding: var(--space-4) var(--space-6); /* Padding footer */
    gap: var(--space-3);
}
.confirmation-actions .btn {
    flex: 1; /* Botones ocupan mismo espacio */
}
/* Color específico botón confirmar (generalmente peligroso/rojo) */
#confirmation-confirm-btn {
    /* Usar estilos .btn-danger o definir uno específico */
    /* background-color: var(--color-error); */
    /* color: var(--color-text-on-accent); */
}
#confirmation-cancel-btn {
     /* Usar estilos .btn-secondary o definir */
}






@keyframes force-redraw-story-item {
  from {
    /* Puede ser una propiedad que no afecte visualmente */
    outline-offset: 0px; 
  }
  to {
    outline-offset: 0px;
  }
}



/* frontend/css/stories.css o style.css (AÑADIR AL FINAL) */

/* Footer Visor (Ajustar si es necesario para acomodar like) */
.story-viewer-footer {
    /* display: flex; */ /* Ya debería ser flex */
    /* justify-content: space-between; */ /* Ajustar si cambia layout */
    /* align-items: flex-end; */
    /* gap: var(--space-3); */
    /* ... otros estilos ... */
}

/* Contenedor Likes (Botón + Contador) */
.story-viewer-likes {
    display: flex;
    align-items: center;
    gap: var(--space-2); /* Espacio entre corazón y número */
    /* Posicionamiento (junto a caption/vistas o donde prefieras) */
    /* Ejemplo: */
    margin-left: auto; /* Empujar a la derecha si caption está a la izquierda */
    flex-shrink: 0; /* No encoger */
    pointer-events: auto; /* Permitir click */
}

/* Botón Like */
.story-like-btn {
    /* Heredar estilos de .icon-btn y .story-viewer-btn si es posible */
    background: none; /* Fondo transparente */
    border: none;
    color: #fff; /* Color icono blanco */
    font-size: 1.5rem; /* Tamaño corazón */
    padding: var(--space-1); /* Padding ligero */
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease;
    line-height: 1;
}
.story-like-btn:hover:not(:disabled) {
    transform: scale(1.1); /* Efecto hover */
}
.story-like-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Corazón lleno (cuando aria-pressed="true") */
.story-like-btn[aria-pressed="true"] i.fa-heart {
    color: var(--color-error); /* Rojo */
    /* O usa 'fas fa-heart' y 'far fa-heart' como en el JS */
}
.story-like-btn i.fas.fa-heart { /* Si usas fas/far */
    color: var(--color-error);
}


/* Contador Likes */
.story-like-count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold); /* Más grueso */
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    min-width: 1.5em; /* Espacio mínimo para números */
    text-align: left;
}

/* frontend/css/style.css o components.css (AÑADIR AL FINAL) */

/* ================================================ */
/* === ESTILOS MODAL INTERACCIONES HISTORIA === */
/* ================================================ */

/* frontend/css/style.css o components.css (AÑADIR O REEMPLAZAR ESTA SECCIÓN) */

/* ================================================ */
/* === ESTILOS MODAL INTERACCIONES HISTORIA === */
/* ================================================ */

/* Estilo Base Modal Bottom Sheet */
/* Aplica a #story-interactions-modal si tiene la clase .bottom-sheet */
.modal.bottom-sheet {
    max-height: 65vh; /* Limitar altura para que no ocupe toda la pantalla */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Solo redondear esquinas superiores */
    bottom: 0; /* Asegurar que esté pegado abajo */
    top: auto; /* Sobreescribir 'top' si viene de .modal general */
    transform: translateX(-50%) translateY(100%); /* Estado inicial oculto abajo */
}
/* Asegurar que la animación de entrada funcione correctamente */
.modal.bottom-sheet.active {
    transform: translateX(-50%) translateY(0%); /* Estado visible */
}

/* Estilos específicos para el modal de interacciones */
#story-interactions-modal {
    /* Z-Index MAYOR que el visor de historias (que es 105 o 110) */
    z-index: 200 !important; 
    background-color: var(--color-bg-surface);
    /* Asegurar que se vea */
    display: flex;
    flex-direction: column;
}

#story-interactions-modal .modal-header {
    /* Estilos estándar del header del modal */
    padding: var(--space-3) var(--space-4);
    padding-top: var(--space-5); /* Más padding arriba por el handle visual */
    border-bottom: 1px solid var(--color-border-divider);
    position: relative; /* Para el handle y el contador */
    text-align: center;
}
/* Handle visual (línea gris arriba) */
#story-interactions-modal .modal-header::before {
    content: '';
    position: absolute;
    top: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    background-color: var(--color-border-interactive);
    border-radius: var(--radius-full);
}
#story-interactions-modal .modal-header h2 {
    margin: 0;
    font-size: var(--font-size-md); /* Ligeramente más pequeño */
    font-weight: var(--font-weight-semibold);
}
/* Contadores en el header */
#story-interactions-counts {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    position: absolute;
    right: 60px; /* Espacio para el botón cerrar */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}
#story-interactions-counts i {
    margin-right: var(--space-1);
    font-size: 0.9em;
}
#story-interactions-counts span { /* Los números */
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}
#story-interactions-counts .fa-heart {
    color: var(--color-error); /* Corazón rojo */
    margin-left: var(--space-2); /* Separar contadores */
}

/* Contenido principal con scroll */
#story-interactions-modal .modal-content.scrollable {
    padding: 0; /* Sin padding, la lista lo maneja */
    overflow-y: auto; /* Habilitar scroll vertical */
    /* Aplicar padding inferior para safe area si es necesario aquí */
    /* padding-bottom: env(safe-area-inset-bottom); */ /* O manejarlo en el último elemento de la lista */
}
#story-interactions-modal .modal-content.scrollable::-webkit-scrollbar { width: 6px; }
#story-interactions-modal .modal-content.scrollable::-webkit-scrollbar-track { background: transparent; }
#story-interactions-modal .modal-content.scrollable::-webkit-scrollbar-thumb { background-color: var(--color-border-subtle); border-radius: 3px; border: 2px solid var(--color-bg-surface); }

/* Contenedor Lista */
#story-interactions-list-container {
    /* Este div envuelve la lista, el mensaje vacío y el loader */
    position: relative; /* Para loader absoluto si se prefiere */
    min-height: 100px; /* Altura mínima para mostrar skeletons/mensaje */
}

#story-interactions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Item de Usuario en la lista */
.interaction-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separar info y corazón */
    padding: var(--space-3) var(--space-4); /* Padding estándar */
    border-bottom: 1px solid var(--color-border-divider);
    gap: var(--space-3);
    background-color: var(--color-bg-surface); /* Asegurar fondo */
}
.interaction-list-item:last-child {
    border-bottom: none;
    /* Añadir padding extra al último item para safe area si el scroll es en la lista */
    /* padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); */
}

/* Info Usuario (Avatar + Nombre) */
.interaction-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-grow: 1;
    overflow: hidden;
    cursor: pointer; /* Indicar que se puede ir al perfil */
    text-decoration: none; /* Quitar subrayado si se usa <a> */
}
.interaction-user-info:hover .user-name {
    color: var(--color-accent-primary); /* Resaltar nombre al hover */
}
.interaction-user-info .avatar-xs {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-bg-element); /* Fondo placeholder */
}
.interaction-user-info .user-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

/* Icono Corazón (si dio like) */
.interaction-like-icon {
    font-size: 1.1rem;
    color: var(--color-error); /* Color rojo like */
    flex-shrink: 0;
    margin-left: var(--space-2);
    display: none; /* Oculto por defecto */
}
/* Mostrar si el item tiene el atributo data-liked="true" */
.interaction-list-item[data-liked="true"] .interaction-like-icon {
    display: inline-block;
}

/* Loader y Mensaje Vacío */
#story-interactions-loader.loading-indicator-inline {
    text-align: center;
    padding: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    /* Estilos para posicionarlo o mostrarlo */
}
#story-interactions-list-container .list-empty-message {
    padding: var(--space-8) var(--space-4); /* Más padding */
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
}
/* --- FIN ESTILOS MODAL INTERACCIONES --- */

/* ================================================ */
/* === ESTILOS BLUPS EXPANDIBLES (Home Screen) === */
/* ================================================ */

/* Ajuste contenedor historias para incluir Blups Trigger y expansión */
#stories-container {
    /* display: flex; ya lo tiene */
    /* gap: var(--space-3); ya lo tiene */
    /* overflow-x: auto; ya lo tiene */
    /* ... otros estilos de stories-container */
    align-items: flex-start; /* Alinear items arriba por si tienen alturas distintas */
}

/* Icono Trigger "Blups" */
.story-item.blups-trigger {
    /* Hereda tamaño y estilos base de .story-item */
    cursor: pointer;
}

.story-item.blups-trigger .story-avatar {
    /* Fondo o icono específico para Blups */
    background-color: #1919191c;; /* Verde */
    border: 2px solid #1919191c;;
    padding: 0; /* Quitar padding extra */
    background-image: none; /* Quitar gradientes de 'unseen' */
}
.story-item.blups-trigger .story-avatar i {
    font-size: 1.5rem;
    color: var(--color-text-on-accent-darkbg); /* Icono oscuro sobre fondo claro */
}
.story-item.blups-trigger:hover .story-avatar {
    border-color: var(--color-accent-secondary);
    transform: scale(1.05);
}
/* Estilo cuando está activo (opcional) */
.story-item.blups-trigger.active .story-avatar {
     box-shadow: 0 0 0 3px var(--color-accent-secondary-hover);
}
.story-item.blups-trigger .story-username {
    /* Hereda estilo .story-username */
    color: var(--color-text-primary);
}


/* Contenedor de sugerencias expandidas */
.blups-suggestions-expanded {
    display: flex; /* Usa flex para ponerlos en línea */
    align-items: flex-start; /* Alinear arriba */
    gap: var(--space-3); /* Espacio entre los iconos expandidos */
    overflow: hidden; /* Para animar max-width */
    max-width: 0; /* Oculto inicialmente */
    opacity: 0;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), /* Animación suave */
                opacity 0.3s ease-in-out 0.1s; /* Fade in con delay */
    flex-shrink: 0; /* No encogerse */
    margin-left: 0; /* Sin margen inicial */
    padding-left: 0;
}
/* Estado Activo (Visible) */
.blups-suggestions-expanded.active {
    /* Calcular max-width: (ancho .story-item + gap) * num_items */
    max-width: calc((75px + var(--space-3)) * 4); /* Ajusta 75px si es diferente */
    opacity: 1;
    margin-left: var(--space-3); /* Añadir margen al expandir */
    padding-left: 0; /* Asegurar no padding extra */
}

/* Estilo de los items de sugerencia expandidos */
.blups-suggestion-item {
    /* Hereda estilos de .story-item */
    flex-shrink: 0; /* Evitar que se encojan */
    cursor: pointer;
}
.blups-suggestion-item .story-avatar {
    /* Estilo visual similar a historias, pero con icono */
    background-color: var(--color-bg-element);
    border: 2px solid var(--color-border-interactive);
    padding: 0; /* Quitar padding */
    background-image: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.blups-suggestion-item:hover .story-avatar {
    border-color: var(--color-accent-primary);
    transform: scale(1.05);
}
.blups-suggestion-item .story-avatar i {
    font-size: 1.5rem; /* Tamaño icono sugerencia */
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}
.blups-suggestion-item:hover .story-avatar i {
    color: var(--color-accent-primary);
}
.blups-suggestion-item .story-username {
    /* Hereda estilo .story-username */
    color: var(--color-text-secondary);
}
.blups-suggestion-item:hover .story-username {
    color: var(--color-text-primary);
}

/* Eliminar estilos obsoletos */
.suggestions-grid, .suggestion-card, .suggestion-icon {
    display: none !important; /* Ocultar definitivamente */
}




/* ================================================ */
/* === ESTILOS HISTORIA PROPIA (Home Screen v4.1) === */
/* ================================================ */

#my-story-item {
    position: relative;
}

/* Avatar dentro del Item Propio */
#my-story-item .story-avatar {
    position: static;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* <<< CAMBIO: Sin borde por defecto >>> */
    border: 2px solid transparent;
    /* -------------------------------- */
    padding: 2px;
    background-clip: content-box;
    background-color: var(--color-bg-surface);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.3s ease;
    
}
#my-story-item .story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Estilo si tiene historias NO vistas */
#my-story-item.unseen .story-avatar {
    border-color: #4294ff; /* Borde azul */
    /* O usa el gradiente si prefieres:
    background-image: linear-gradient(var(--color-bg-surface), var(--color-bg-surface)),
                      linear-gradient(45deg, var(--color-accent-primary), var(--color-accent-secondary));
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-color: transparent; */
}

/* Estilo si tiene historias VISTAS */
#my-story-item.seen .story-avatar {
    border-color: var(--color-border-subtle); /* Borde gris */
    background-image: none; /* Asegurar sin gradiente */
}

/* Overlay '+' (sin cambios) */
.my-story-add-overlay {
    position: absolute;
    bottom: calc(1em + var(--space-2) + 4px);
    right: 4px;
    width: 22px;
    height: 22px;
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-bg-base);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
    z-index: 2;
    
}
.my-story-add-overlay:hover {
    transform: scale(1.1);
    background-color: var(--color-accent-primary-hover);
}
.my-story-add-overlay i {
    font-size: 0.7rem;
    line-height: 1;
    font-weight: bold;
}

/* Nombre ("Tu Historia") */
#my-story-item .story-username {
    color: var(--color-text-primary);
}

/* Asegurar que el viejo botón + esté oculto */
.story-item.add-story {
    display: none !important;
}


/* ================================================== */
/* === ESTILOS LOGIN PREMIUM (Uber Style) === */
/* ================================================== */

/* Layout general centrado pero con aire arriba */
.uber-layout {
    justify-content: flex-start; /* Empezar arriba, no centrado vertical forzado */
    padding-top: env(safe-area-inset-top);
    height: 100%;
    position: relative;
}

/* Título de Marca (Reutilizamos el que creamos antes, pero aseguramos margen) */
.app-brand-title {
    font-size: 3.5rem;
    margin-bottom: 40px;
}

/* Input estilo Uber: Fondo gris muy suave, texto grande */
.uber-input {
    background-color: #f3f3f3 !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    padding: 18px 20px !important; /* Más alto */
    font-size: 1.1rem !important;
    color: #000 !important;
    transition: background-color 0.2s, border-color 0.2s;
}

.uber-input:focus {
    background-color: #fff !important;
    border-color: #000 !important; /* Borde negro al enfocar */
    box-shadow: none !important;
}

/* Botón Principal: Negro Sólido, ancho completo */
.uber-btn {
    background-color: #000000;
    color: #ffffff;
    border-radius: 12px; /* Coincide con el input */
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 20px;
    border: none;
}
.uber-btn:hover {
    background-color: #333;
    transform: translateY(-1px);
}

/* Enlaces Secundarios (Olvidé contraseña) */
.login-secondary-links {
    margin-top: 20px;
    text-align: left;
}
.login-secondary-links a {
    color: #006eff; /* Azul sutil */
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

/* Separador Sutil */
.separator-text {
    color: #757575;
    font-size: 0.85rem;
    margin: 30px 0 15px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.separator-text::before, .separator-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #e0e0e0;
    margin: 0 15px;
}

/* Botones Sociales en Fila */
.social-buttons-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.btn-social {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s;
}
.btn-social:hover {
    background-color: #f9f9f9;
}

/* Footer Pegado al Fondo */
.auth-footer {
    margin-top: auto; /* Empuja al fondo */
    width: 100%;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Botón "Soy nuevo" (Píldora con borde) */
.btn-outline-pill {
    background: transparent;
    border: 2px solid #e0e0e0;
    color: #000;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.2s;
}
.btn-outline-pill:hover {
    border-color: #000;
}

/* Enlace muy discreto al final */
.discrete-link {
    color: #999;
    font-size: 0.8rem;
    text-decoration: none;
}

/* Flecha atrás para pasos internos */
.btn-icon-back {
    position: absolute;
    top: 0;
    left: 0;
    background: #f3f3f3;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    font-size: 1rem;
}

/* Ajustes para OTP y Password screens para que se vean limpios */
.step-subtitle {
    text-align: left !important; /* Alinear izq como Uber */
    font-size: 1.5rem !important;
    font-weight: 600;
    color: #000;
    margin-bottom: 30px !important;
    margin-top: 50px; /* Espacio para la flecha atrás */
}

/* ================================================== */
/* === ESTILOS FORMULARIO PREMIUM (Paso 2) === */
/* ================================================== */

/* Header solo con la flecha */
.step-header-minimal {
    width: 100%;
    min-height: 60px; /* Altura mínima garantizada */
    display: flex;
    align-items: center;
    margin-bottom: 0px; 
    padding-top: 10px;
}

/* Botón atrás circular - CORREGIDO */
.round-icon-btn {
    /* Tamaño táctil ideal */
    width: 48px;
    height: 48px;
    
    border-radius: 50%;
    background-color: transparent;
    border: none;
    color: #000;
    
    /* Tamaño de la flecha ajustado */
    font-size: 1.4rem; 
    
    cursor: pointer;
    transition: background-color 0.2s ease;
    
    /* CENTRADO PERFECTO */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* AJUSTE DE POSICIÓN: */
    /* Solo lo movemos un poquito (-4px) para alinearlo visualmente, */
    /* pero sin que se salga de la pantalla */
    margin-left: 0px; 
    margin-right: auto; /* Empuja todo lo demás a la derecha */
    
    z-index: 10;
    padding: 0; /* Importante para que no se deforme */
}

/* Efecto Hover */
.round-icon-btn:hover {
    background-color: #f0f0f0; 
}

/* Aseguramos que el ícono esté bloqueado en el centro */
.round-icon-btn i {
    display: block;
    line-height: 1;
}
/* Título Grande y Pesado */
.step-big-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 30px;
    line-height: 1.2;
    text-align: left;
}

/* Input estilo Uber */
.uber-input {
    width: 100%;
    background-color: #f3f3f3; /* Gris muy suave */
    border: 2px solid transparent;
    border-radius: 12px; /* Bordes redondeados */
    padding: 18px 20px;  /* Input alto y cómodo */
    font-size: 1.1rem;
    color: #000;
    outline: none;
    transition: all 0.3s ease;
}

.uber-input:focus {
    background-color: #fff;
    border-color: #000; /* Borde negro al escribir */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Botón Negro Sólido */
.uber-black-btn {
    background-color: #000;
    color: #fff;
    border-radius: 12px;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    margin-top: 20px;
    transition: transform 0.1s;
}
.uber-black-btn:active {
    transform: scale(0.98);
}

/* Separador "o continúa con" */
.divider-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: #757575;
    font-size: 0.85rem;
    margin: 30px 0 20px 0;
}
.divider-text::before, .divider-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}
.divider-text::before { margin-right: 10px; }
.divider-text::after { margin-left: 10px; }

/* Grid para botones sociales */
.social-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 14px;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    transition: background-color 0.2s;
}
.social-btn:hover {
    background-color: #f9f9f9;
}
.social-btn i {
    font-size: 1.2rem;
}

/* Animación suave de entrada */
.animate-fade-up {
    animation: fadeInUp 0.4s ease-out;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Texto legal pequeño */
.auth-terms-mini {
    font-size: 0.75rem;
    color: #999;
    text-align: left;
    margin-top: auto;
    padding-top: 20px;
}


/* ================================================== */
/* === ESTILOS OTP "SILICON VALLEY" (Paso 3 V2) === */
/* ================================================== */

/* Agrupar texto centrado o alineado */
.text-center-group {
    margin-bottom: 40px;
}

/* Título refinado */
.step-big-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    color: #1a1a1a;
}

/* Descripción del correo elegante */
.step-description {
    font-size: 1rem;
    color: #717171;
    line-height: 1.6;
}

/* Email destacado pero no invasivo */
.highlight-email {
    color: #000;
    font-weight: 600;
}

/* Botón "Cambiar" sutil */
.btn-text-edit {
    background: none;
    border: none;
    color: #006eff; /* Azul enlace */
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    margin-left: 5px;
    padding: 0;
}
.btn-text-edit:hover {
    text-decoration: underline;
}

/* --- INPUTS MODERNOS (Estilo Apple/Airbnb) --- */
.code-input-container.premium-otp-v2 {
    display: flex;
    justify-content: space-between;
    gap: 12px; /* Un poco más de espacio */
    margin-bottom: 40px;
}

.modern-otp-box {
    width: 100%;
    height: 72px;
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
    
    /* Fondo blanco con borde sutil */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px; /* Muy redondeado */
    color: #000;
    
    /* Sombra suave por defecto */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    
    outline: none;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    -moz-appearance: textfield;
}

/* Estado Focus (El toque mágico) */
.modern-otp-box:focus {
    border-color: #000; /* Borde negro */
    border-width: 2px;  /* Un poco más grueso */
    transform: translateY(-4px); /* Se levanta */
    box-shadow: 0 12px 24px rgba(0,0,0,0.1); /* Sombra más fuerte */
}

/* Cuando hay error */
.modern-otp-box.input-error {
    border-color: #ff4444 !important;
    background-color: #fff8f8;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* --- REENVÍO MODERNO --- */
.resend-container-v2 {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 15px 20px;
    border-radius: 12px;
}

.resend-container-v2 p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.resend-link-modern {
    background: none;
    border: none;
    color: #000;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.resend-link-modern:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: scale(1.02);
}


/* Contenedor de los pasos de registro (y login si quieres) */
#register-steps-container, 
.auth-form-container {
    width: 100%;
    max-width: 450px; /* Mantiene el ancho máximo en PC */
    margin: 0 auto;   /* Centrado en PC */
    
    /* AQUÍ ESTÁ LA CLAVE PARA EL CELULAR: */
    padding-left: 24px !important;  /* Aire a la izquierda */
    padding-right: 24px !important; /* Aire a la derecha */
    
    box-sizing: border-box; /* Asegura que el padding no expanda el ancho total */
}

/* Asegurar que los inputs y botones respeten ese espacio */
.uber-input, 
.uber-black-btn, 
.social-btn,
.modern-otp-box {
    width: 100% !important; /* Ocupan el 100% del espacio DISPONIBLE (restando el padding) */
    max-width: 100%;
    box-sizing: border-box;
}

/* Ajuste específico para el header de la flecha atrás */
.step-header-minimal {
    padding-left: 0; /* Ya tiene padding el contenedor padre */
    padding-right: 0;
    margin-left: -10px; /* Compensación visual para que la flecha se vea alineada con el borde */
}


/* ================================================== */
/* === ESTILOS PASSWORD PREMIUM (Paso 4) === */
/* ================================================== */

/* Ajuste para que el input de texto se vea igual a los de OTP pero alineado a la izq */
.password-input-text {
    text-align: left; /* Texto a la izquierda */
    padding-left: 20px;
    padding-right: 50px; /* Espacio para el ojo */
    font-size: 1.5rem; /* Letra grande */
    font-weight: 500;
    letter-spacing: 1px; /* Un poco de aire entre letras (ocultas) */
}

/* Contenedor relativo para posicionar el ojo */
.premium-password-container {
    position: relative;
    margin-bottom: 30px;
}

/* Botón del ojo flotante - CORREGIDO */
.eye-btn-floating {
    position: absolute;
    right: 0; /* Pegado a la derecha */
    top: 0;   /* Pegado arriba */
    bottom: 0; /* Pegado abajo (ocupa toda la altura) */
    
    /* Ancho suficiente para ser fácil de tocar */
    width: 60px; 
    
    background: none;
    border: none;
    color: #757575;
    cursor: pointer;
    font-size: 1.2rem;
    
    /* Esto centra el ícono perfectamente en el medio de la altura */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: color 0.2s;
    z-index: 5;
}

.eye-btn-floating:hover {
    color: #000;
}

/* Lista de Requisitos Moderna */
.modern-req-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Si no caben, bajan */
    gap: 15px;
    margin-bottom: 20px;
}

.modern-req-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #757575;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* El puntito indicador */
.req-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e0e0e0; /* Gris por defecto */
    transition: background-color 0.3s ease, transform 0.3s;
}

/* ESTADO: CUMPLIDO (Valid) */
.modern-req-list li.valid {
    color: #008a05; /* Verde oscuro */
}

.modern-req-list li.valid .req-dot {
    background-color: #00c853; /* Verde brillante */
    transform: scale(1.2); /* Crece un poco */
    box-shadow: 0 0 0 2px rgba(0, 200, 83, 0.2); /* Brillo verde */
}

/* Ocultamos los iconos antiguos del JS para usar los dots */
.modern-req-list li i {
    display: none; 
}

/* Estado deshabilitado/esperando del botón reenviar */
.resend-link-modern:disabled {
    color: #999;
    background-color: #f0f0f0;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Estilo del contador de tiempo */
.timer-countdown {
    font-weight: 700;
    color: #000; /* O el color de acento */
    margin-left: 5px;
}

/* Contenedor del botón Siguiente */
.fixed-bottom-btn-container {
    margin-top: 40px; /* Espacio mínimo desde el contenido de arriba */
    margin-bottom: 20px; /* Espacio vital desde el borde inferior */
    width: 100%;
}

/* Ajuste para pantallas muy cortas (móviles apaisados o ventanas pequeñas) */
@media (max-height: 600px) {
    .fixed-bottom-btn-container {
        margin-top: 20px;
        margin-bottom: 10px;
    }
}



/* ================================================== */
/* === INPUTS "LEVEL GOD" (Diseño Premium) === */
/* ================================================== */

/* El contenedor (necesario para posicionar la línea divisoria) */
.input-with-icon-wrapper {
    position: relative;
    margin-bottom: 25px; /* Más aire entre inputs */
    /* Esto permite pintar la línea divisoria con ::after */
}

/* El Input - Ahora Blanco, Flotante y Limpio */
.uber-input-iconized {
    width: 100%;
    background-color: #ffffff; /* Fondo blanco puro */
    border: 1px solid #e8e8e8; /* Borde sutil casi invisible */
    border-radius: 16px;
    
    /* Espacio calculado: Icono + Separador + Aire */
    padding: 22px 20px 22px 65px !important; 
    
    font-size: 1.15rem;
    color: #000;
    font-weight: 600; /* Texto con peso para que se lea bien */
    outline: none;
    
    /* Sombra suave permanente (Efecto Elevado) */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
}

/* Estado Focus - "Pop" Effect (Magia visual) */
.uber-input-iconized:focus {
    border-color: #000; /* Borde negro sólido */
    box-shadow: 0 12px 24px rgba(0,0,0,0.1); /* La sombra crece */
    transform: translateY(-3px); /* El input se "levanta" físicamente */
}

/* El Icono */
.input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: #b0b0b0; /* Gris claro inicial */
    transition: color 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

/* --- EL DETALLE DE LUJO: LÍNEA SEPARADORA --- */
/* Creamos una línea vertical fina entre el icono y el texto */
.input-with-icon-wrapper::after {
    content: '';
    position: absolute;
    left: 52px; /* Posición exacta entre icono y texto */
    top: 18px;
    bottom: 18px;
    width: 1px;
    background-color: #e8e8e8; /* Línea gris sutil */
    transition: background-color 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

/* --- MICRO-INTERACCIONES (Cuando tocas el input) --- */

/* 1. El icono se pone negro */
.input-with-icon-wrapper:focus-within .input-icon {
    color: #000;
}

/* 2. La línea separadora se pone negra para conectar visualmente */
.input-with-icon-wrapper:focus-within::after {
    background-color: #000;
}


/* ================================================== */
/* === ESTILOS LEGALES PREMIUM (Paso 6) === */
/* ================================================== */

/* Contenedor del Icono Heroico */
.legal-hero-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.legal-icon-circle {
    width: 100px;
    height: 100px;
    background-color: #f3f3f3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #000;
    
    /* Animación de flotación suave */
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); box-shadow: 0 5px 15px 0px rgba(0,0,0,0.05); }
    50% { transform: translateY(-10px); box-shadow: 0 25px 15px 0px rgba(0,0,0,0.02); }
    100% { transform: translateY(0px); box-shadow: 0 5px 15px 0px rgba(0,0,0,0.05); }
}

/* Ajustes de texto centrado */
.text-center { text-align: center; }
.step-description.text-center { margin-left: auto; margin-right: auto; max-width: 300px; }

/* --- TARJETA DE CONSENTIMIENTO --- */
.legal-consent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* Efecto al pasar el mouse o tocar */
.legal-consent-card:hover {
    border-color: #000;
    transform: scale(1.01);
}

/* Si está activo (seleccionado) */
.legal-consent-card:has(input:checked) {
    border-color: #000;
    background-color: #fafafa;
}

/* Textos dentro de la tarjeta */
.legal-text-content {
    padding-right: 20px;
}
.legal-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
}
.legal-subtitle {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

/* Links con estilo Apple (Negro y Bold) */
.legal-subtitle a {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* --- SWITCH ESTILO iOS/APPLE --- */
.ios-toggle-wrapper {
    position: relative;
    width: 54px;
    height: 32px;
    flex-shrink: 0; /* No se aplasta */
}

.ios-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.ios-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e0e0e0; /* Gris apagado */
    transition: .4s;
    border-radius: 34px;
}

.ios-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Estado Activo */
.ios-checkbox:checked + .ios-slider {
    background-color: #000; /* Negro Uber/Apple */
}

.ios-checkbox:checked + .ios-slider:before {
    transform: translateX(22px);
}

/* ================================================== */
/* === AJUSTES PASO TRABAJADOR V2 (Sin fugas) === */
/* ================================================== */

/* Icono de Martillo (Oficios) */
.input-with-icon-wrapper:focus-within .fa-hammer {
    color: #000;
    transform: translateY(-50%) rotate(-15deg); /* Pequeña animación al escribir */
}

/* Icono de Estrella (Frase) */
.input-with-icon-wrapper:focus-within .fa-star {
    color: #FFD700; /* Dorado al escribir */
}

/* Campo Seguro (Teléfono) */
.secure-field .input-icon {
    font-size: 1.1rem; /* Candado un poco más chico */
}

/* Cuando enfocas el teléfono, el candado se pone verde (seguridad) */
.secure-field:focus-within .fa-lock {
    color: #28a745; 
}

/* Aseguramos que el textarea se comporte bien (Reutilizando lo anterior) */
textarea.premium-textarea {
    resize: none;
    height: auto;
    min-height: 70px; 
    padding-top: 24px !important;
    line-height: 1.4;
    font-family: inherit;
}

/* ================================================== */
/* === PIN UBER REAL (Cuadrado negro con palo) === */
/* ================================================== */

#map-center-marker {
    /* 1. El Cuadrado Negro */
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 0; /* Cuadrado perfecto */
    
    /* Posicionamiento en el centro exacto */
    position: absolute;
    top: 50%;
    left: 50%;
    /* Importante: El transform sitúa la punta del palo en el centro */
    transform: translate(-50%, -100%); 
    
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombra suave */
    
    /* Quitamos el icono de FontAwesome viejo */
    font-size: 0 !important; 
}

/* 2. El Círculo Blanco adentro */
#map-center-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}

/* 3. El "Palo" Negro abajo */
#map-center-marker::before {
    content: '';
    position: absolute;
    top: 100%; /* Justo debajo del cuadrado */
    left: 50%;
    transform: translateX(-50%);
    width: 4px;  /* Grosor del palo */
    height: 20px; /* Largo del palo */
    background-color: #000;
}

/* Animación de rebote */
.location-select-mode #map-center-marker {
    animation: pinDrop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pinDrop {
    0% { transform: translate(-50%, -180%); opacity: 0; }
    100% { transform: translate(-50%, -100%); opacity: 1; }
}


/* ================================================== */
/* === SMART BAR UBICACIÓN (Fusión Input/Display) === */
/* ================================================== */

/* Contenedor Principal */
.smart-location-bar {
    position: relative;
    z-index: 20; /* Encima de todo */
}

/* El Input Unificado */
.smart-location-bar .input-group {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Cuadrado redondeado estilo Maps */
    padding: 5px 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra suave */
    transition: all 0.2s ease;
    height: 50px; /* Altura cómoda */
}

/* Efecto al activar */
.smart-location-bar .input-group:focus-within {
    border-color: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* El icono de la izquierda (Pin/Lupa) */
#smart-bar-icon {
    font-size: 1.2rem;
    color: #000; /* Negro fuerte */
    margin-right: 10px;
    width: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* El texto del input */
#fix-location-search-input {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Puntos suspensivos si es largo */
}

#fix-location-search-input::placeholder {
    color: #999;
    font-weight: 400;
}

/* Animación de carga en el icono */
@keyframes spin { 100% { transform: rotate(360deg); } }
.fa-spinner { animation: spin 1s linear infinite; }



/* Estilos Modal Oferta Interactiva */
.offer-control-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.btn-circle-outline {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: white;
    color: #333;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-circle-outline:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    transform: scale(1.05);
}

.btn-circle-outline:active {
    transform: scale(0.95);
}

.offer-value-display {
    text-align: center;
    min-width: 120px;
}

.offer-value-display span {
    display: block;
    font-size: 2.5rem; /* Grande y legible */
    color: #000;
}

/* --- Módulo 2: Audio Bio --- */
.btn-record-bio {
    background-color: var(--color-bg-element);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-interactive);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-record-bio:hover {
    background-color: var(--color-bg-element-hover);
}

.btn-record-bio.recording {
    background-color: var(--color-error);
    color: white;
    border-color: var(--color-error);
    animation: pulse-record 1.5s infinite;
}

@keyframes pulse-record {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ================================================== */
/* === CRONÓMETRO EN VIVO (Módulo 3) === */
/* ================================================== */

.active-job-timer-container {
    background-color: #000;
    color: #fff;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border: 1px solid #333;
}

.timer-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 5px;
}

.live-timer-display {
    font-family: 'Courier New', monospace; /* Fuente monoespaciada tipo reloj */
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-success); /* Verde neón */
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    line-height: 1;
}

.timer-pulse {
    animation: pulse-green 1s infinite;
}

@keyframes pulse-green {
    0% { text-shadow: 0 0 10px rgba(0, 255, 0, 0.3); }
    50% { text-shadow: 0 0 20px rgba(0, 255, 0, 0.6); }
    100% { text-shadow: 0 0 10px rgba(0, 255, 0, 0.3); }
}


/* ARREGLO SCROLL Y PIN */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Esto es correcto para una app tipo mapa */
    position: fixed; /* Evita el rebote en iOS/Android */
}

#map-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}

/* El Pin Negro Fijo */
.map-center-marker {
    position: fixed; /* FIXED es la clave */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%); /* La punta en el centro */
    z-index: 1000; /* Por encima del mapa pero debajo de modales */
    pointer-events: none; /* Que no bloquee el click al mapa */
    font-size: 2.5rem; /* Tamaño */
    color: #000; /* Negro */
    /* Sombra para que se vea en cualquier mapa */
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: none; /* Se activa con JS cuando toca */
}



/* ========================================= */
/* === ESTILOS BILLETERA PREMIUM (v2) === */
/* ========================================= */

/* 1. Header Alineado Perfectamente */
.wallet-header-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    background-color: var(--color-bg-base); /* Fondo gris claro base */
    border-bottom: none; /* Sin línea divisoria para look limpio */
}
.header-left, .header-right {
    width: 40px; /* Espacio reservado igual a ambos lados */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Fondo y Espaciado */
.wallet-content {
    padding: var(--space-4);
    background-color: var(--color-bg-base);
    /* Gradiente sutil de fondo */
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

/* 3. Tarjeta Virtual "Black Card" */
.wallet-card-container {
    margin-top: var(--space-2);
    margin-bottom: var(--space-8);
    perspective: 1000px;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25)); /* Sombra difusa de lujo */
    transition: transform 0.3s ease;
}
.wallet-card-container:active {
    transform: scale(0.98); /* Efecto de toque */
}

.virtual-card {
    position: relative;
    width: 100%;
    height: 210px;
    border-radius: 24px; /* Más redondeado */
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    overflow: hidden;
    
    /* Fondo Negro Mate con Ruido (Textura) */
    background-color: #111;
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.15) 0%, transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.05) 0%, transparent 40%);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Chip Realista */
.card-chip {
    width: 45px;
    height: 32px;
    background: linear-gradient(135deg, #e0cba8 0%, #fbf5b7 40%, #d4af37 100%);
    border-radius: 6px;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.virtual-card .fa-wifi {
    font-size: 1.8rem;
    transform: rotate(90deg);
    opacity: 0.5;
}

/* Tipografía Tarjeta */
.card-balance small {
    font-size: 0.75rem;
    opacity: 0.6;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}
.card-balance span {
    font-size: 2.4rem; /* Números grandes */
    font-weight: 700;
    letter-spacing: -0.5px; /* Kerning moderno */
    font-family: 'Inter', sans-serif; /* Asegurar fuente limpia */
}
.card-holder span {
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.card-logo {
    font-style: italic;
    font-weight: 900;
    font-size: 1.6rem;
    opacity: 1;
}

/* 4. Botones de Acción (Clean) */
.wallet-actions {
    display: flex;
    justify-content: space-evenly; /* Mejor distribución */
    margin-bottom: var(--space-8);
}
.wallet-action-btn {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: transform 0.1s;
}
.wallet-action-btn:active { transform: scale(0.9); }

.icon-circle {
    width: 56px; height: 56px;
    border-radius: 20px; /* Cuadrado redondeado (iOS style) */
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
    background-color: #fff;
}
.wallet-action-btn:hover .icon-circle {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Colores específicos de iconos */
.icon-circle.green i { color: #10B981; }
.icon-circle.red i { color: #EF4444; }
.icon-circle.blue i { color: #0077FF; }

.wallet-action-btn span {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* 5. Lista de Movimientos (Minimalista) */
.wallet-history-section h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
    padding-left: var(--space-2);
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio entre items */
}

.transaction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background-color: #ffffff;
    border-radius: 16px; /* Muy redondeado */
    border: none; /* Sin bordes */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Sombra sutil */
    transition: transform 0.1s;
}
.transaction-item:active { transform: scale(0.99); }

.trans-icon {
    width: 42px; height: 42px;
    border-radius: 50%; /* Circular */
    display: flex; align-items: center; justify-content: center;
    margin-right: 16px;
    font-size: 1rem;
    background-color: #f5f5f5; /* Gris por defecto */
}
/* Iconos con fondos específicos se definen inline en JS, esto es base */

.trans-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trans-title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}
.trans-date {
    font-size: 0.75rem;
    color: #999;
}

.trans-amount {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.5px;
}
.trans-amount.positive { color: #00c853; }
.trans-amount.negative { color: #212121; }

/* Skeletons para la billetera */
.transaction-item.skeleton-loader {
    background-color: #fff;
    border: 1px solid #eee;
    animation: none; /* El brillo lo pone la clase global */
}



/* ================================================== */
/* === GESTOS SWIPE (CORREGIDO ALINEACIÓN) === */
/* ================================================== */

/* El item de la lista (Contenedor Padre) */
.swipe-container-li {
    position: relative;
    overflow: hidden; 
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff; /* Fondo blanco por defecto */
}

/* Capa de Fondo (Iconos de Acción) */
.swipe-background {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between; /* Extremo a extremo */
    align-items: center;
    padding: 0 25px;
    z-index: 0; /* DETRÁS de la tarjeta */
    pointer-events: auto;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    transition: background-color 0.2s ease; /* Transición suave de color */
}

/* Icono Izquierda (Aparece al jalar a la DERECHA -> BORRAR) */
.swipe-icon-left { 
    display: none; 
    align-items: center; 
    gap: 8px; 
    color: #EF4444; /* Rojo */
} 

/* Icono Derecha (Aparece al jalar a la IZQUIERDA -> ENVIAR) */
.swipe-icon-right { 
    display: none; 
    align-items: center; 
    gap: 8px; 
    color: #10B981; /* Verde */
    margin-left: auto; /* Forzar a la derecha */
}

/* La Tarjeta (Frente) */
.worker-job-card {
    position: relative;
    z-index: 2; /* ENCIMA del fondo */
    background-color: var(--color-bg-surface);
    width: 100%;
    height: 100%;
    touch-action: pan-y; 
    transform: translate3d(0,0,0); 
    transition: transform 0.1s linear; 
}

/* Animaciones de salida */
.worker-job-card.animate-swipe-right {
    transition: transform 0.3s ease-out !important;
    transform: translateX(120%) !important;
}

.worker-job-card.animate-swipe-left {
    transition: transform 0.3s ease-out !important;
    transform: translateX(-120%) !important;
}

/* Animación de retorno (Rebote suave) */
.worker-job-card.reset-position {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    transform: translate(0, 0) !important;
}
/* ================================================= */
/* === MODAL DE PAGO "BLACK CARD" (Estilo Apple) === */
/* ================================================= */

/* Fondo oscuro elegante para este modal específico */
#payment-qr-modal .modal-content {
    background: linear-gradient(180deg, #1c1c1e 0%, #000000 100%);
    color: #ffffff;
    padding: 0; /* Control total del padding */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Header transparente sobre fondo negro */
#payment-qr-modal .modal-header {
    background-color: transparent;
    border-bottom: none;
    z-index: 2;
}

#payment-qr-modal .modal-header h2 {
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.5px;
}
#payment-qr-modal .modal-close-btn {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
}




.payment-card-body {
    padding: 20px 30px 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* El Monto (Hero) */
.payment-amount-hero {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -2px;
    margin-bottom: 30px;
    text-shadow: 0 4px 20px rgba(0,119,255,0.4); /* Glow azul iBlup */
}
.payment-amount-hero span {
    font-size: 1.5rem;
    font-weight: 400;
    color: #888;
    vertical-align: super;
}


.qr-premium-container {
    background-color: #fff;
    padding: 15px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    margin-bottom: 30px;
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.qr-premium-container img {
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply; /* Truco para que el QR se funda mejor */
}



/* Logo iBlup en el centro del QR */
/* Logo iBlup en el centro del QR */
.qr-logo-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    
    /* 1. Tamaño Reducido (Menos invasivo) */
    width: 32px; 
    height: 32px;
    
    /* 2. Tu pedido: Opacidad y Fusión */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco casi sólido */
    opacity: 0.65; /* El logo entero un poco transparente */
    
    border-radius: 8px;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Truco visual: que no bloquee el clic por si acaso */
    pointer-events: none; 
}

/* El Token Numérico (Estilo OTP Apple) */
.payment-token-display {
    font-family: 'Courier New', monospace; /* Monospaced para tabular */
    font-size: 2.2rem;
    color: #fff;
    letter-spacing: 5px;
    font-weight: 700;
    margin-bottom: 10px;
    opacity: 0.9;
}
.payment-instruction {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 30px;
}
.btn-ios-done {
    background-color: #0077FF; /* Azul iBlup */
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 16px 0;
    width: 100%;
    border-radius: 14px;
    transition: transform 0.1s;
}
.btn-ios-done:active {
    transform: scale(0.98);
    opacity: 0.9;
}












.payment-amount-display {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: var(--space-4) 0;
}

.qr-container {
    background: white;
    padding: 15px;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: var(--space-4);
}
.qr-container img {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

.payment-code-container {
    background-color: var(--color-bg-element);
    padding: 15px;
    border-radius: 8px;
    border: 2px dashed #ccc;
    margin-bottom: var(--space-4);
}
.payment-code-display {
    font-family: monospace;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 5px;
    color: var(--color-accent-primary);
}

.icon-btn.history-btn {
    margin-right: 10px;
}


/* ========================================= */
/* === CONTROLES DE PRECIO (STEPPER - SOFT UI) === */
/* ========================================= */

.job-card-price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 5;
}

/* Contenedor invisible (solo agrupa) */
.price-stepper-wrapper {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio aireado entre elementos */
    background: transparent; /* Sin fondo */
    padding: 0;
    border: none;
}

/* Columna central: Precio y Moneda */
.price-value-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Ancho fijo para que no baile al cambiar números */
}

/* El Número Grande */
.price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

/* La Moneda Pequeña abajo */
.price-currency {
    font-size: 0.65rem;
    color: #9CA3AF; /* Gris suave */
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2px;
}

/* BOTONES MINIMALISTAS (La clave del diseño) */
.stepper-btn {
    width: 32px;
    height: 32px;
    
    /* Forma: Cuadrado muy redondeado (Squircle) */
    border-radius: 10px; 
    
    /* Fondo: Gris extremadamente sutil (casi blanco) */
    background-color: #F3F4F6; 
    border: none; /* Sin bordes */
    
    /* Icono: Gris claro */
    color: #D1D5DB; 
    
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    transition: all 0.2s ease;
    
    /* Importante para toques */
    pointer-events: auto; 
}

/* Hover: Se oscurece un poquito y el icono se ve más */
.stepper-btn:hover {
    background-color: #E5E7EB;
    color: #9CA3AF;
    transform: translateY(-1px);
}

/* Active: Efecto de presión */
.stepper-btn:active {
    transform: scale(0.95);
    background-color: #D1D5DB;
}

/* Color sutil al cambiar (Opcional, si quieres feedback visual) */
.price-value.modified {
    color: #000; /* Se mantiene negro o cambia sutilmente */
    animation: popNumber 0.2s ease;
}

@keyframes popNumber {
    50% { transform: scale(1.1); }
}

/* Ajuste para el badge de duración debajo */
.job-card-indicators {
    margin-top: 8px;
    opacity: 0.6;
}
.indicator-badge {
    background: #F3F4F6;
    color: #6B7280;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}



/* ========================================= */
/* === ESTILOS BID SHEET (Oferta Rápida) === */
/* ========================================= */

#quick-bid-sheet {
    /* 1. Posicionamiento Fijo (pegado abajo) */
    position: fixed;
    bottom: 0;
    
    /* 2. CENTRADO PERFECTO */
    left: 50%;
    transform: translateX(-50%) translateY(100%); /* Centrado X, Oculto Y */
    
    /* 3. ANCHO CONTROLADO (Igual que los otros modales) */
    width: 100%; 
    max-width: var(--modal-max-width); /* Respeta el límite de 500px */
    
    /* Estilos Visuales */
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.15);
    z-index: 2000 !important; /* Encima de todo */
    
    /* Evitar desbordes */
    box-sizing: border-box; 
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Estado Activo (Visible) */
#quick-bid-sheet.active {
    /* Mantiene el centrado (-50%) y sube a 0 */
    transform: translateX(-50%) translateY(0); 
}

/* Ajuste del contenido interno */
#quick-bid-sheet .modal-content {
    width: 100%; /* Ocupa todo el espacio disponible */
    box-sizing: border-box; /* El padding no aumenta el ancho */
    overflow-x: hidden; /* Evitar scroll horizontal accidental */
}

/* Grid de botones (asegurar que quepan) */
.quick-bid-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; /* Reducir un poco el gap para pantallas pequeñas */
    width: 100%;
}

/* Botón de Precio Individual */
.bid-option-btn {
    background-color: #f3f3f3;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 12px 5px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bid-option-btn small {
    font-size: 0.6rem;
    color: #666;
    font-weight: 400;
    margin-top: 2px;
}

/* Estado Seleccionado */
.bid-option-btn.selected {
    background-color: #000;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.bid-option-btn.selected small {
    color: #ccc;
}

/* Botón Lápiz (Editar) */
.bid-option-btn.edit-mode {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #000;
}
.bid-option-btn.edit-mode:hover {
    background-color: #f9f9f9;
    border-color: #000;
}

/* Animación de entrada */
#quick-bid-sheet.active {
    
}

/* ================================================= */
/* === BOTÓN OFERTA: TEXTO VISIBLE + EFECTO REFLEJO === */
/* ================================================= */

#btn-submit-quick-bid {
    /* 1. Arreglar visibilidad del texto */
    color: #ffffff !important; /* Texto blanco forzado */
    background-color: #000000; /* Fondo negro puro */
    font-weight: 800;          /* Letra bien gruesa */
    letter-spacing: 0.5px;
    border: none;
    
    /* 2. Preparar el efecto */
    position: relative;
    overflow: hidden; /* Para que el brillo no se salga del botón */
    z-index: 1;
    
    /* Sombra suave para darle volumen */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* El Reflejo de Luz (La Magia) */
#btn-submit-quick-bid::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Empieza fuera a la izquierda */
    width: 100%;
    height: 100%;
    
    /* El degradado que crea el efecto de luz */
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2), /* Brillo suave */
        rgba(255, 255, 255, 0.5), /* Punto más brillante */
        rgba(255, 255, 255, 0.2), /* Brillo suave */
        transparent
    );
    
    /* Inclinación para que se vea dinámico */
    transform: skewX(-20deg);
    
    /* La animación infinita */
    animation: shineEffect 6s infinite;
    pointer-events: none; /* Click a través del brillo */
}

/* Animación del Reflejo */
@keyframes shineEffect {
    0% {
        left: -150%; /* Inicio */
    }
    60% {
        left: 150%; /* Pasa rápido por el botón */
    }
    100% {
        left: 150%; /* Espera un rato antes de volver a pasar */
    }
}

/* Efecto al presionar (Feedback táctil) */
#btn-submit-quick-bid:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ========================================================= */
/* === LIMPIEZA MODAL CATEGORÍA (Sin botones, sin fondo) === */
/* ========================================================= */

/* 1. Ocultar botones internos (X y Atrás) en el modal de categoría */
#worker-category-modal .modal-header .modal-back-btn,
#worker-category-modal .modal-header .modal-close-btn {
    display: none !important;
}

/* 2. Centrar el título ya que no hay botones a los lados */
#worker-category-modal .modal-header h2 {
    width: 100%;
    text-align: center;
    padding: 0; /* Quitar padding lateral extra */
}

/* 3. Asegurar que el modal parezca flotante (sin bordes rectos abajo si quieres) */
/* Opcional: si quieres que flote un poco sobre el menú */
#worker-category-modal {
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15); /* Sombra más suave */
}
/* Estilo Invertido para el botón del mapa (Negro) */
.map-header-btn.inverted {
    background-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Ocultar el botón de cerrar DENTRO de la tarjeta de fijar ubicación */


/* Ocultar el botón de cerrar DENTRO de la tarjeta de fijar ubicación */
#blup-fix-location-modal .overlay-close-btn,
#blup-fix-location-modal .modal-close-btn {
    display: none !important;
}



/* ========================================================= */
/* === BOTONES ESTILO UBER / APPLE (Minimalismo Puro) === */
/* ========================================================= */

/* Contenedor del Footer */
.premium-actions {
    padding: 16px 20px; /* Espaciado generoso */
    background-color: #fff; /* Fondo blanco limpio */
    /* Sombra superior sutilísima, como si flotara */
    box-shadow: 0 -4px 20px rgba(0,0,0,0.03); 
    border-top: none; /* Quitamos bordes duros */
}

.action-row {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio perfecto entre botones */
    width: 100%;
}

/* Botón Principal (Elegir Blup) */
.uber-style-btn {
    flex-grow: 1; /* Ocupa todo el espacio posible */
    height: 52px; /* Altura estándar de botones móviles cómodos */
    background-color: #000000; /* Negro absoluto */
    color: #ffffff;
    border: none;
    border-radius: 12px; /* Redondeado moderno, no exagerado */
    font-size: 1.05rem;
    font-weight: 600; /* Peso medio-alto */
    letter-spacing: -0.3px; /* Kerning ajustado */
    transition: transform 0.1s ease, background-color 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra suave */
}

.uber-style-btn:disabled {
    background-color: #f2f2f2; /* Gris muy claro */
    color: #a0a0a0; /* Texto gris */
    box-shadow: none;
    cursor: default;
}

.uber-style-btn:active:not(:disabled) {
    transform: scale(0.98); /* Efecto de presión sutil */
    background-color: #1a1a1a;
}

/* Botón Secundario (Icono Distancia/Ajustes) */
/* Botón Secundario (Icono Distancia/Ajustes) */
.uber-style-icon-btn {
    width: 52px; 
    min-width: 52px; /* <--- ESTO EVITA QUE SE APLASTE */
    height: 52px;
    background-color: #f2f2f2;
    color: #000;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color 0.2s, transform 0.1s;
    flex-shrink: 0; /* Asegura que no se encoja en Flexbox */
    margin-left: 10px; /* Un poco de aire extra */
}

.uber-style-icon-btn:hover {
    background-color: #e0e0e0; /* Un poco más oscuro al hover */
}

.uber-style-icon-btn:active {
    transform: scale(0.95);
}

.uber-style-icon-btn i {
    opacity: 0.8; /* Icono no totalmente negro para suavidad */
}



/* Cuando la lista de trabajos está visible, OCULTAR A LA FUERZA los modales previos */
#worker-job-list-screen.active ~ .modal#blup-fix-location-modal,
#worker-job-list-screen.active ~ .modal#worker-category-modal,
#worker-job-list-screen.active ~ .modal#worker-distance-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 1. Si estoy en el HOME, prohibido mostrar Categoría o Fijar Ubicación */
#home-screen.active ~ .modal#worker-category-modal,
#home-screen.active ~ .modal#blup-fix-location-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Si la tarjeta de CATEGORÍA está activa, prohibido ver la de FIJAR UBICACIÓN debajo */
#worker-category-modal.active ~ #blup-fix-location-modal {
    display: none !important;
}


/* ======================================================= */
/* === ESTILOS PAGO "GOD TIER" (Fintech/Cyberpunk) === */
/* ======================================================= */

/* 1. CONTENEDOR FULLSCREEN (Fondo Vivo) */
/* 1. CONTENEDOR FULLSCREEN (Limitado al App Container) */
.modal.payment-fullscreen-modal {
    position: absolute !important; /* CAMBIO CLAVE: Absolute en vez de Fixed */
    inset: 0 !important; /* Top, Right, Bottom, Left = 0 */
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important; /* Quitar transformaciones de modales normales */
    
    /* Fondo Degradado Financiero */
    background: radial-gradient(circle at 50% 0%, #1a1f35 0%, #000000 70%) !important;
    
    /* Z-Index Supremo */
    z-index: 9999 !important; 
    
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

@keyframes auroraBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. BOTÓN CERRAR (Glass) */
.payment-close-btn {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(10px);
    transition: background 0.2s;
}
.payment-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 3. CONTENIDO */
.payment-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    padding-top: 80px;
}

/* 4. MONTO HERO (Efecto Cromo) */
.pay-amount-container {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
}
.pay-amount-container .currency {
    font-size: 1.5rem;
    font-weight: 500;
    margin-right: 8px;
    color: #888;
}
.pay-amount-container .amount {
    font-family: 'Inter', sans-serif;
    font-size: 4rem; /* Gigante */
    font-weight: 800;
    letter-spacing: -2px;
    
    /* Gradiente de Texto (Efecto Metálico) */
    background: linear-gradient(to bottom, #ffffff, #a5a5a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Glow sutil */
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

.pay-status-text {
    color: #00ff9d; /* Verde Neón */
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0, 255, 157, 0.1);
    padding: 8px 16px;
    border-radius: 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(0, 255, 157, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 5. TARJETA QR (El Protagonista) */
.qr-card-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.8),
        inset 0 0 0 1px rgba(255,255,255,0.05); /* Borde interno brillante */
    margin-bottom: 40px;
    transition: transform 0.3s ease;
}
/* Efecto flotante */
.qr-card-glass:active {
    transform: scale(0.98);
}

.qr-white-box {
    background-color: #fff;
    padding: 12px;
    border-radius: 20px;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Para contener el láser */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.qr-white-box img {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --- ANIMACIÓN LÁSER --- */
.qr-scanner-line {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #0077FF; /* Azul iBlup */
    box-shadow: 0 0 10px #0077FF, 0 0 20px #0077FF;
    top: 0;
    left: 0;
    z-index: 2;
    animation: scanMove 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: 0.8;
}

@keyframes scanMove {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.scan-hint {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    margin-top: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.scan-hint i {
    animation: pulseIcon 2s infinite;
}
@keyframes pulseIcon {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* 6. CÓDIGO NUMÉRICO */
.code-display-container {
    text-align: center;
}
.code-label {
    display: block;
    font-size: 0.7rem;
    color: #666;
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
}
.security-code {
    font-family: 'Courier New', monospace;
    font-size: 2.2rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 6px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* 7. FOOTER Y BOTÓN */
.payment-footer {
    width: 100%;
    padding: 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

.btn-premium-done {
    width: 100%;
    background: #0077FF;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 18px;
    border-radius: 18px;
    border: none;
    box-shadow: 
        0 4px 0 #0056b3, /* Borde 3D inferior */
        0 10px 20px rgba(0, 119, 255, 0.3);
    transition: all 0.1s;
    cursor: pointer;
    position: relative;
    top: 0;
}
.btn-premium-done:active {
    top: 4px; /* Efecto de presión real */
    box-shadow: 
        0 0 0 #0056b3, 
        0 5px 10px rgba(0, 119, 255, 0.2);
}

/* ======================================================= */
/* === ESTILOS ESCÁNER PREMIUM (Cobro) === */
/* ======================================================= */

/* Ajuste del wrapper para modo scanner */
.payment-content-wrapper.scanner-mode {
    justify-content: flex-start; /* Alinear arriba para dar espacio al teclado */
    padding-top: 80px;
}

.scanner-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.scanner-subtitle {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    margin-bottom: 30px;
}

/* --- EL VISOR (Viewport) --- */
.scanner-viewport {
    position: relative;
    width: 280px;
    height: 280px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 30px;
    overflow: hidden; /* Recortar esquinas del video */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    margin-bottom: 40px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Capa de Video (Librería) */
.qr-video-layer {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Hack para limpiar estilos que pone la librería html5-qrcode */
#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 30px;
}

/* Placeholder (Antes de activar cámara) */
.camera-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    z-index: 5;
}
.btn-activate-camera {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.btn-activate-camera:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* --- UI SUPERPUESTA (Marco y Láser) --- */
.scanner-overlay-ui {
    position: absolute;
    inset: 0;
    pointer-events: none; /* Dejar pasar clics */
    z-index: 4;
}

.scan-frame {
    position: absolute;
    top: 20px; left: 20px; right: 20px; bottom: 20px;
    /* Borde sutil general */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.5); /* Oscurecer alrededor */
}

/* Esquinas Brillantes (Reticle) */
.scan-frame .corner {
    position: absolute;
    width: 20px; height: 20px;
    border-color: #0077FF; /* Azul Neón */
    border-style: solid;
    border-width: 0;
    box-shadow: 0 0 10px rgba(0, 119, 255, 0.6);
}
.scan-frame .tl { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 12px; }
.scan-frame .tr { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 12px; }
.scan-frame .bl { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 12px; }
.scan-frame .br { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 12px; }

/* Láser de Escaneo */
.scanner-laser {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #00ff9d; /* Verde éxito */
    box-shadow: 0 0 4px #00ff9d, 0 0 15px #00ff9d;
    top: 50%;
    animation: laserScan 2s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes laserScan {
    0% { top: 10%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 90%; opacity: 0; }
}

/* --- ENTRADA MANUAL (Estilo PIN Bancario) --- */
.manual-entry-container {
    width: 100%;
    text-align: center;
}
.manual-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 700;
}
.manual-input-wrapper {
    position: relative;
    width: 200px;
    margin: 0 auto;
}
#claim-code-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 4px;
    padding: 10px 0;
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0; /* Importante para iOS */
}
#claim-code-input:focus {
    border-bottom-color: #0077FF;
}
#claim-code-input::placeholder {
    color: rgba(255,255,255,0.1);
}



/* ================================================= */
/* === EFECTOS DE PAGO EXITOSO (Lluvia de Monedas) === */
/* ================================================= */

/* Contenedor del QR cuando es exitoso */
.qr-premium-container.success-state {
    border-color: #00c853;
    box-shadow: 0 0 30px #00c853;
    animation: pulseSuccess 0.5s ease-in-out;
}

/* El Check Gigante que reemplaza al QR */
.payment-success-icon {
    font-size: 5rem;
    color: #00c853;
    display: none; /* Oculto por defecto */
    animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Monedas Cayendo */
.falling-coin {
    position: fixed;
    top: -50px;
    font-size: 24px;
    color: #FFD700; /* Dorado */
    z-index: 10000; /* Encima de todo */
    pointer-events: none;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
    animation: fall linear forwards;
}

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

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

@keyframes scaleUp {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* REGLA SUPREMA: Si la hoja de oferta está abierta, mata el modal de ubicación */
#quick-bid-sheet.active ~ #blup-fix-location-modal,
#quick-bid-sheet[style*="display: block"] ~ #blup-fix-location-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}



/* ================================================================ */
/* === JOB DETAILS: ULTRA PREMIUM (Apple/Uber Style) === */
/* ================================================================ */

/* 1. CONTENEDOR FULL SCREEN */
/* 1. CONTENEDOR PRINCIPAL (Forzar sobre todo) */
#job-details-modal {
    /* Posición fija respecto a la VENTANA, no al contenedor */
 position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important; /* Centrar en PC */
    transform: translateX(-50%) !important; /* Centrar en PC */
    
    width: 100% !important;
    max-width: var(--modal-max-width) !important; /* Ancho máximo de celular (500px) */
    height: 100% !important;
    max-height: 100% !important;
    
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 2000; /* Encima de todo */
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,0.2); /* Sombra elegante en PC */
}

/* 2. HEADER FLOTANTE (Glassmorphism) */
#job-details-modal .modal-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-top: env(safe-area-inset-top);
    height: auto;
    min-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#job-details-modal .modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    margin: 0;
    opacity: 0; /* Oculto inicialmente, aparece al scrollear si quieres */
    transition: opacity 0.2s;
}

/* Botón Cerrar (Círculo Gris) */
#job-details-modal .modal-close-btn {
    position: relative;
    top: auto; right: auto; transform: none;
    background: rgba(0,0,0,0.05);
    color: #000;
    width: 36px; height: 36px;
    margin-right: 15px;
}

/* 3. CONTENIDO SCROLLABLE */
#job-details-modal .modal-content {
    padding: 0;
    padding-bottom: 100px; /* Espacio para el footer fijo */
    overflow-y: auto;
    background-color: #F5F5F7;
    padding-top: 60px; /* Espacio para el header */
}

/* --- SECCIONES INTERNAS --- */

/* Hero Visual (Icono 3D o Mapa) */
.jd-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 10px 20px;
    background: #fff;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    margin-bottom: 20px;
}

.jd-icon-container {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jd-icon-img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}

.jd-title {
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    color: #1d1d1f;
    line-height: 1.2;
    margin-bottom: 5px;
    padding: 0 10px;
}

.jd-category-badge {
    font-size: 0.8rem;
    color: #86868b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.jd-price-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    letter-spacing: -1px;
}
.jd-price-unit {
    font-size: 1rem;
    color: #86868b;
    font-weight: 500;
}

/* CRONÓMETRO (Estilo Apple Clock) */
.jd-timer-card {
    background: #fff;
    margin: 0 20px 20px 20px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.03);
}

.jd-timer-label {
    font-size: 0.75rem;
    color: #86868b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.jd-timer-display {
    font-family: 'SF Mono', 'Courier New', monospace; /* Fuente de reloj */
    font-size: 3.5rem;
    font-weight: 300;
    color: #000;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
}
.jd-timer-display.active {
    color: #00C853; /* Verde cuando corre */
}

/* Tarjeta de Perfil (Usuario) */
.jd-profile-card {
    background: #fff;
    margin: 0 20px 20px 20px;
    padding: 15px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    text-decoration: none; /* Si es link */
    color: inherit;
}

.jd-avatar {
    width: 50px; height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.jd-user-info h4 {
    margin: 0; font-size: 1rem; font-weight: 600; color: #000;
}
.jd-user-role {
    font-size: 0.8rem; color: #86868b;
}
.jd-profile-arrow {
    margin-left: auto; color: #d1d1d6;
}

/* Detalles Grid */
.jd-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.jd-detail-box {
    background: #fff;
    padding: 15px;
    border-radius: 18px;
}
.jd-label {
    font-size: 0.75rem; color: #86868b; font-weight: 600; margin-bottom: 5px; display: block;
}
.jd-value {
    font-size: 0.95rem; color: #1d1d1f; font-weight: 500;
}

/* Descripción Larga */
.jd-description {
    background: #fff;
    margin: 0 20px 20px 20px;
    padding: 20px;
    border-radius: 20px;
}
.jd-description p {
    color: #424245; line-height: 1.5; font-size: 0.95rem; margin: 0;
}

/* 4. FOOTER DE ACCIONES (Sticky, Grande) */
#job-details-modal .modal-actions {
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 15px 20px;
    padding-bottom: max(15px, env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    z-index: 20;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}

/* Botones Premium */
.btn-action-primary {
    flex-grow: 2; /* Ocupa más espacio */
    background-color: #000;
    color: #fff;
    height: 54px;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn-action-secondary {
    flex-grow: 1;
    background-color: #F2F2F7;
    color: #000;
    height: 54px;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* Colores de estado */
.btn-action-primary.stop { background-color: #FF3B30; } /* Rojo Stop */
.btn-action-primary.chat { background-color: #007AFF; } /* Azul Chat */







/* ================================================= */
/* === BARRA DE PUBLICACIÓN (Estilo FB/X) === */
/* ================================================= */

.create-post-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--color-bg-surface);
    padding: 12px 16px;
    margin-bottom: 10px; /* Separación con el feed */
    border-bottom: 1px solid var(--color-border-divider);
    border-top: 1px solid var(--color-border-divider);
    /* Opcional: si quieres que parezca tarjeta flotante: */
    /* border-radius: 12px; margin: 0 10px 10px 10px; border: 1px solid var(--color-border-subtle); */
    cursor: pointer;
    transition: background-color 0.2s;
}

.create-post-container:active {
    background-color: var(--color-bg-element);
}

.create-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-subtle);
}

.create-post-input {
    flex-grow: 1;
    background-color: var(--color-bg-element); /* Fondo gris claro para el input falso */
    border-radius: 20px;
    padding: 10px 15px;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    border: 1px solid transparent;
}

.create-post-actions {
    display: flex;
    align-items: center;
}

.create-action-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ajuste para modo oscuro si lo usas */
@media (prefers-color-scheme: dark) {
    .create-post-input {
        background-color: #2a2a2a;
        color: #b0b0b0;
    }
}


/* Esto obliga al contenedor a tener su propia barra de scroll */
#home-scroll-container {
    height: 100%;           /* Ocupa el espacio disponible */
    overflow-y: auto;       /* Activa el scroll interno */
    display: block;
    position: relative;
    /* Importante para móviles */
    -webkit-overflow-scrolling: touch; 
}

/* frontend/css/style.css */

/* 1. OCULTAR LA BARRA ANTIGUA (Pero mantenerla en el DOM para que el código JS siga funcionando) */
#create-post-trigger {
    display: none !important; /* Oculto visualmente */
}

/* 2. BOTÓN FLOTANTE "NUEVO POST" (Estilo Twitter/X) */
/* frontend/css/style.css */

/* BOTÓN FLOTANTE "NUEVO POST" */
.fab-create-post {
    /* --- CAMBIO CRÍTICO AQUÍ --- */
    /* Antes: position: fixed; */
    position: absolute; 
    /* --------------------------- */
    
    bottom: calc(var(--bottom-nav-height) + 20px + env(safe-area-inset-bottom));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-accent-primary);
    color: #ffffff;
    border: none;
   /* box-shadow: 0 4px 15px rgba(0, 119, 255, 0.4);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 90;
    
    /* Mantener las transiciones */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* Efecto al pulsar */
.fab-create-post:active {
    transform: scale(0.90);
    box-shadow: 0 2px 8px rgba(0, 119, 255, 0.3);
}

/* El icono del lápiz */
.fab-create-post i {
    pointer-events: none; /* Para que el click vaya al botón */
}

/* 3. CLASE PARA EL EFECTO BLUR (Cuando se abre el modal) */
/* Esto se aplicará al contenedor principal cuando el modal esté abierto */
body.modal-open #app-container > *:not(.modal) {
    filter: blur(5px);
    transition: filter 0.3s ease;
}


/* ================================================= */
/* === EFECTO HIDE ON SCROLL (Mejorado v2) === */
/* ================================================= */

/* 1. Transición Base (Sincronizada para ambos) */
.bottom-nav,
.fab-create-post {
    /* La duración (0.3s) es la misma para que terminen al mismo tiempo */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* 2. Efecto para la BARRA DE NAVEGACIÓN (Deslizar hacia abajo) */
.bottom-nav.scroll-hidden {
    /* Se mueve hacia abajo el 100% de su altura */
    transform: translateY(100%) !important;
}

/* 3. Efecto para el LÁPIZ (Encogerse/Minimize) */
.fab-create-post.scroll-hidden {
    /* En lugar de moverse, se escala a 0 (desaparece hacia su centro) */
    transform: scale(0) !important;
    
    /* También le bajamos la opacidad para que se desvanezca suavemente */
    opacity: 0;
}

/* frontend/css/style.css */

/* 1. BARRA DE BÚSQUEDA TIPO UBER */
.home-search-bar-container {
    background-color: #f3f3f3; /* Gris claro de fondo */
    border-radius: 50px;       /* Forma de píldora completa */
    padding: 6px 8px 6px 20px; /* Padding asimétrico */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--space-4);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    cursor: pointer;
    color: #333;
}

.search-input-wrapper i {
    font-size: 1.1rem;
    color: #000;
}

.search-placeholder {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
}

/* El botón blanco a la derecha (Pill Button) */
.search-bar-action-btn {
    background-color: #ffffff;
    border: none;
    border-radius: 40px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.1s;
}
.search-bar-action-btn:active {
    transform: scale(0.95);
}


/* 2. ESTILOS DEL BLUP HUB (Grid de 10 cosas) */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 20px;
    padding-bottom: 40px;
}

.hub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    cursor: pointer;
}

.hub-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px; /* Cuadrado redondeado estilo iOS */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    color: white; /* Iconos blancos */
}

.hub-item:active .hub-icon {
    transform: scale(0.9);
}

.hub-item span {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Colores para los iconos */
.c-blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.c-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.c-green { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.c-orange { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.c-black { background: linear-gradient(135deg, #434343 0%, #000000 100%); }
.c-gold { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
.c-teal { background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%); }
.c-red { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); }
.c-pink { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); }
.c-gray { background: #e0e0e0; color: #555; } /* Excepción color texto */

/* Contenedor relativo para posicionar la bandera */
.input-smart-container {
    position: relative;
    width: 100%;
}

/* La bandera y el código +51 */
.prefix-flag {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
    border-right: 1px solid #e0e0e0;
    z-index: 10;
    pointer-events: none; /* Para que el clic pase al input */
}

.prefix-flag img {
    width: 24px;
    border-radius: 4px;
}

.prefix-flag span {
    font-weight: 600;
    color: #000;
    font-size: 1rem;
}

/* Cuando la bandera está visible, el input necesita padding a la izquierda */
.input-smart-container.has-phone input {
    padding-left: 95px !important; /* Espacio para la bandera */
    transition: padding 0.2s ease;
}


/* frontend/css/style.css */

/* Contenedor de la bandera y el prefijo */
.prefix-flag {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre bandera y numero */
    padding-right: 10px;
    border-right: 1px solid #e0e0e0; /* Línea separadora */
    z-index: 10;
    pointer-events: none;
    height: 60%; /* Altura de la línea divisoria */
}

/* La imagen de la bandera */
.prefix-flag img {
    width: 24px; /* Tamaño fijo */
    height: auto;
    border-radius: 3px; /* Bordes un poquito redondeados */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra suave */
    object-fit: cover;
    display: block;
}

/* El texto +51 */
.prefix-flag span {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
    line-height: 1;
}

/* Input con espacio a la izquierda */
.input-smart-container.has-phone input {
    padding-left: 100px !important; /* Espacio suficiente para no pisar la bandera */
}   



/* ================================================== */
/* === HEADER CON ISLA DINÁMICA (Estilo iOS) === */
/* ================================================== */

.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Espacio entre secciones */
    padding: 10px 15px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background-color: var(--color-bg-base);
    border-bottom: none; /* Quitamos borde para look más limpio */
}

/* Ajuste Logo */
.home-header-left .home-logo {
    height: 32px; /* Un poco más discreto */
    width: auto;
}

/* Ajuste Derecha */
.home-header-right {
    display: flex;
    gap: 5px;
}

/* --- LA ISLA DINÁMICA --- */
.home-header-center {
    flex-grow: 1; /* Ocupa el espacio central */
    display: flex;
    justify-content: center;
}

.dynamic-search-pill {
    background-color: #495057;
    width: 100%;
    max-width: 110px;
    height: 38px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 4px;
    padding-left: 15px;
    cursor: pointer;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.dynamic-search-pill:active {
    transform: scale(0.98);
}

/* Icono Lupa */
.dynamic-search-pill .search-icon {
    color: #ffffff;
    font-size: 1.1rem;
    margin-right: 10px;
}

/* Texto "Buscar amigos" */
.dynamic-search-pill .search-text {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600; /* Letra gruesa */
    flex-grow: 1; /* Empuja el botón azul a la derecha */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El Botón Azul (Seguidores) */
.island-blue-btn {
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 50%;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s;
    /* box-shadow: 0 2px 5px rgba(0, 122, 255, 0.4); */
}

.island-blue-btn:hover {
    background-color: #0062cc;
}

/* Badge Rojo de Notificaciones */
.island-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #FF3B30; /* Rojo Apple */
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000000; /* Borde negro para separarlo del azul */
    padding: 0 3px;
}

/* Opcional: Brillo superior estilo cristal */
.dynamic-search-pill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
    border-radius: 50px 50px 0 0;
    pointer-events: none;
}

/* ================================================ */
/* === NUEVOS ESTILOS: CARRUSELES HOME (FB/IG) === */
/* ================================================ */

/* Contenedor Horizontal General */
.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 5px 16px 20px 16px; /* Espacio abajo para sombra */
    scrollbar-width: none; /* Ocultar barra scroll Firefox */
    -ms-overflow-style: none;
}
.horizontal-scroll-container::-webkit-scrollbar { display: none; } /* Ocultar Chrome */

/* --- TARJETA DE USUARIO SUGERIDO --- */
.suggestion-user-card {
    min-width: 140px;
    width: 140px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-divider);
    border-radius: 12px;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex-shrink: 0; /* No encoger */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.suggestion-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    border: 1px solid var(--color-border-subtle);
}

.suggestion-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-bottom: 2px;
}

.suggestion-role {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-bottom: 12px;
}

.btn-follow-small {
    background-color: var(--color-accent-primary); /* Azul */
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}
.btn-follow-small:active { transform: scale(0.95); }

/* Botón cerrar "x" pequeña */
.suggestion-close {
    position: absolute; top: 5px; right: 5px;
    color: var(--color-text-tertiary); background: none; border: none;
    font-size: 1rem; cursor: pointer; padding: 5px;
}

/* --- TARJETA PREEL (REEL) --- */
.horizontal-scroll-container.preels-mode {
    gap: 8px;
}

.preel-card-mini {
    min-width: 110px;
    width: 110px;
    height: 180px; /* Formato vertical */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    background-color: #000;
}

.preel-card-mini img, 
.preel-card-mini video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.preel-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
}

.preel-user-name {
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}

.preel-icon {
    position: absolute;
    top: 8px; right: 8px;
    color: #fff;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}











/* ================================================= */
/* === MODAL AUDIO ULTRA PREMIUM (Estilo Spotify) === */
/* ================================================= */

/* Fondo del modal con gradiente sutil y blur */
.audio-sheet {
    background: linear-gradient(180deg, #1c1c1e 0%, #000000 100%) !important;
    border-radius: 30px 30px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
}

.audio-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    height: 100%;
    justify-content: space-between; /* Distribuir espacio */
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- VISUALIZADOR DE ONDAS (Barras Animadas) --- */
.audio-visualizer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 80px; /* Más alto */
    width: 100%;
    margin-bottom: 20px;
}

.bar {
    width: 6px;
    height: 10px;
    background-color: #3e3e3e; /* Gris apagado */
    border-radius: 4px;
    transition: height 0.1s ease, background-color 0.2s;
}

/* Estado Reproduciendo: Barras azules y bailando */
.audio-visualizer-container.playing .bar {
    background-color: #007AFF; /* Azul iBlup */
    animation: bounce 1s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% { height: 10px; }
    50% { height: 60px; } /* Más alto */
}

/* Ritmo aleatorio para las barras */
.bar:nth-child(odd) { animation-duration: 0.8s; }
.bar:nth-child(even) { animation-duration: 1.1s; }
.bar:nth-child(3n) { animation-duration: 0.9s; }

/* --- TEXTOS --- */
#audio-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

#audio-modal-status {
    font-size: 0.9rem;
    color: #8E8E93; /* Gris Apple */
    margin-bottom: 30px;
    font-weight: 500;
}

/* --- CONTROLES PRINCIPALES --- */
.audio-control-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* Botón Play Gigante */
.audio-main-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff; /* Blanco puro */
    color: #000; /* Icono negro */
    font-size: 2rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px; /* Ajuste visual del triángulo */
    box-shadow: 0 10px 30px rgba(255,255,255,0.2);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.audio-main-btn:active {
    transform: scale(0.9);
}

/* Estado Grabando (Rojo pulsante) */
.audio-main-btn.recording {
    background-color: #FF3B30;
    color: #fff;
    padding-left: 0;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    animation: pulseRed 1.5s infinite;
}

@keyframes pulseRed {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255, 59, 48, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* Anillo de Progreso (SVG) */
.progress-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg); /* Centrar y rotar */
    pointer-events: none;
    width: 100px; /* Tamaño fijo igual al SVG */
    height: 100px;
}
.progress-ring__circle {
    transition: stroke-dashoffset 0.1s linear;
    stroke-linecap: round;
    stroke: rgba(255,255,255,0.1); /* Gris base */
}
.audio-control-wrapper.active .progress-ring__circle {
    stroke: #007AFF; /* Azul progreso */
}

.audio-secondary-actions {
    display: flex;
    justify-content: space-between; /* Separados a los extremos */
    width: 100%;
    margin-top: 30px;
    padding: 0 30px; /* Margen lateral para que no peguen al borde */
}

/* Estilo Base Botón de Texto */
.audio-text-btn {
    background: transparent; /* Sin fondo de círculo */
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 12px; /* Rectángulo redondeado suave al hover */
    transition: background-color 0.2s, opacity 0.2s;
    
    /* IMPORTANTE: Resetear tamaños fijos que rompían el diseño */
    width: auto !important; 
    height: auto !important;
}

.audio-text-btn:active {
    opacity: 0.7;
    transform: scale(0.98);
}

/* Variación: ELIMINAR (Rojo) */
.audio-text-btn.btn-delete {
    color: #FF453A; /* Rojo Apple Dark Mode */
}
.audio-text-btn.btn-delete:hover {
    background-color: rgba(255, 69, 58, 0.1); /* Fondo rojo muy sutil */
}

/* Variación: CERRAR (Gris Claro) */
.audio-text-btn.btn-cancel {
    color: #98989D; /* Gris texto secundario */
}
.audio-text-btn.btn-cancel:hover {
    color: #FFF; /* Blanco al hover */
    background-color: rgba(255, 255, 255, 0.1);
}

/* Variación: GUARDAR (Verde) */
.audio-text-btn.btn-save {
    color: #30D158; /* Verde Neón */
}
.audio-text-btn.btn-save:hover {
    background-color: rgba(48, 209, 88, 0.1);
}








/* --- PULL TO REFRESH (Estilo Instagram) --- */
.pull-refresh-container {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.2s ease;
    background-color: transparent;
}

.pull-refresh-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8) rotate(0deg);
    transition: opacity 0.2s, transform 0.2s;
}

/* Cuando soltamos y está cargando */
.pull-refresh-container.refreshing {
    height: 50px;
}
.pull-refresh-container.refreshing .pull-refresh-spinner {
    opacity: 1;
    animation: spin 0.8s linear infinite;
}

/* Estilo Botón "Subir nuevo" / "Publicar" en Perfil */
#add-portfolio-button {
    width: 100%;
    margin: 10px 0;
    padding: 12px;
    border-radius: 8px;
    background-color: #f0f2f5; /* Gris suave */
    color: #000;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}
#add-portfolio-button:hover {
    background-color: #e4e6eb;
}



















/****** SIPINN!!!!! LOADIN NO ELIMIANR! 




/* --- 14. Indicadores y Skeletons --- */
/*.loading-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: var(--z-loading); }
.loading-spinner { border: 4px solid var(--color-bg-element); border-radius: 50%; border-top-color: var(--color-accent-primary); width: 40px; height: 40px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
*/

/* FORZAR QUE EL LOADER DEL VISOR NAZCA OCULTO */
#portfolio-viewer-image-loader,
#story-viewer-loader {
    display: none !important;
}

/* Solo mostrarlo cuando tenga una clase específica que pondremos con JS si falla */
.loading-active #portfolio-viewer-image-loader,
.loading-active #story-viewer-loader {
    display: block !important;
}


/* Lista de Usuarios (Seguidores) */
.user-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-divider);
    transition: background-color 0.1s;
}
.user-list-item:hover {
    background-color: var(--color-bg-surface-hover);
}

.user-list-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
    overflow: hidden;
    cursor: pointer;
}

.user-list-info img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.user-list-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-list-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-list-role {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* Botón Seguir/Siguiendo en la lista */
.btn-follow-list {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 90px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

/* Estado: No siguiendo (Azul/Negro) */
.btn-follow-list[data-following="false"] {
    background-color: var(--color-accent-primary);
    color: #fff;
}

/* Estado: Siguiendo (Gris/Borde) */
.btn-follow-list[data-following="true"] {
    background-color: transparent;
    border-color: var(--color-border-interactive);
    color: var(--color-text-primary);
}



/* Modales de Información (Sheets) */
.info-sheet {
    border-radius: 24px 24px 0 0;
    max-height: 85vh;
}

/* Iconos Grandes */
.level-icon-wrapper, .email-icon-wrapper {
    width: 80px; height: 80px;
    border-radius: 50%;
    background-color: #f5f5f7;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto;
    color: #8e8e93;
}
.level-icon-wrapper.gold {
    background-color: #FFF9C4; color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    animation: pulseGold 2s infinite;
}
.email-icon-wrapper.verified {
    background-color: #E6F7EE; color: #00C851;
}
@keyframes pulseGold {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* Barra de Progreso Nivel */
.level-progress-container {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
    margin: 20px 0;
    text-align: left;
}
.level-progress-labels {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; font-weight: 600; color: #333;
    margin-bottom: 8px;
}
.level-progress-bar {
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    border-radius: 4px;
    transition: width 1s ease-out;
}

/* Lista Beneficios */
.level-benefits {
    text-align: left;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
}
.level-benefits h4 { margin-top: 0; font-size: 0.95rem; }
.level-benefits ul { padding: 0; list-style: none; margin: 0; }
.level-benefits li { font-size: 0.9rem; color: #555; margin-bottom: 8px; display: flex; gap: 10px; }
.level-benefits li i { color: #00C851; }

/* Status Pill Email */
.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 5px;
}
.status-pill.pending { background-color: #FFF3CD; color: #856404; }
.status-pill.verified { background-color: #D4EDDA; color: #155724; }


/* ========================================================= */
/* === FIX MODAL CATEGORÍA (Minimalismo Puro) === */
/* ========================================================= */

/* Fondo Blanco Total */
#blup-category-modal {
    background-color: #ffffff !important;
}

/* Header Limpio (Sin borde, sin fondo gris) */
#blup-category-modal .modal-header {
    background-color: #ffffff !important;
    border-bottom: none !important; /* Quitar línea gris */
    padding-bottom: 0 !important;   /* Pegar el contenido un poco más */
}

/* Ocultar el título viejo "2. Tipo de iBlup" para que mande el nuevo */
#blup-category-title {
    display: none !important;
}

/* El contenido también blanco */
#blup-category-modal .modal-content {
    background-color: #ffffff !important;
    padding-top: 10px !important; /* Ajuste fino */
}



/* ========================================================= */
/* === FIXES FINALES DE UI (Minimalismo & Magia) === */
/* ========================================================= */

/* 1. ELIMINAR LA BARRITA GRIS (Handle) */
#blup-category-modal .modal-header::before {
    display: none !important;
}

/* 2. BAJAR LOS BOTONES (Flecha y X) */
/* Le damos altura al header para que los botones tengan espacio */
#blup-category-modal .modal-header {
    min-height: 70px !important; /* Más altura */
    padding-top: 0 !important;
    align-items: flex-start !important; /* Alinear arriba para controlar con top */
}

/* Movemos los botones manualmente hacia abajo */
#blup-category-modal .modal-back-btn,
#blup-category-modal .modal-close-btn {
    top: 25px !important;       /* Los bajamos 25px desde el techo */
    transform: none !important; /* Quitamos el centrado automático para controlarlos nosotros */
}

/* ======================================================== */
/* === SLIDER DE HORAS (Réplica Exacta Referencia) === */
/* ======================================================== */

#blup-hours-modal .modal-content {
    padding: 0; /* El padding lo manejan los contenedores internos */
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Wrapper principal para centrar contenido */
.slider-content-wrapper {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Títulos */
.slider-content-wrapper h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #111827;
    text-align: left;
}

.slider-content-wrapper h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 1rem;
    color: #6b7280;
    font-weight: 400;
    text-align: left;
}

/* --- Contenedor del Slider --- */
.slider-container {
    padding-top: 85px; /* Espacio para etiquetas levantadas */
    position: relative;
    width: 100%;
    margin-bottom: auto; /* Empujar hacia arriba */
}

.svg-track-container {
    width: 100%;
    height: 28px;
    margin-top: 1rem;
    margin-bottom: 2rem;
    cursor: grab;
    position: relative;
}

.slider-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* --- Líneas (Segmentos) --- */
.segment-line {
    stroke-width: 2px;
    stroke-linecap: butt; /* Cuadradas */
    transition: stroke 0.15s ease-in-out;
}

.segment-inactive {
    stroke: #d1d5db;
}

.segment-active {
    stroke: #000000;
}

/* --- Marcadores (Círculos) --- */
.slider-marker {
    position: absolute;
    bottom: 14px;
    left: 0; /* Se ajusta con JS */
    transform: translate(-50%, 50%) scale(1);
    width: 28px;
    height: 28px;
    background-color: #000000;
    border-radius: 50%;
    cursor: grab;
    z-index: 10;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-marker.dragging {
    cursor: grabbing;
    transform: translate(-50%, 50%) scale(1.1); /* Efecto crecer */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* --- Etiquetas (Burbujas) --- */
.marker-label {
    position: absolute;
    bottom: 43px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000000;
    color: white;
    padding: 11px 20px;
    border-radius: 30px;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: transform 0.1s ease-out;
    min-width: 60px;
    text-align: center;
    z-index: 12;
}

/* Ajustes de alineación lateral (definidos por JS) */
.marker-label.align-left { transform: translateX(-15%); }
.marker-label.align-right { transform: translateX(-85%); }

/* --- EFECTO LEVANTADO (Colisión) --- */
.marker-label.raised {
    transform: translate(-50%, -45px); /* Subir más arriba */
}
.marker-label.raised.align-left { transform: translate(-20%, -45px); }
.marker-label.raised.align-right { transform: translate(-80%, -45px); }

/* --- Línea Vertical Conectora --- */
.marker-line {
    position: absolute;
    bottom: 14px; /* Centro del punto */
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 48px; /* Altura normal */
    background-color: #000000;
    z-index: 5;
    pointer-events: none;
    transition: height 0.25s ease-out, width 0.25s ease-out;
    transform-origin: bottom center;
}

/* Cuando la etiqueta sube, la línea crece */
.marker-label.raised + .marker-line {
    height: 78px; 
    width: 4px;
}

/* --- Footer Minimalista (Flecha izq, Texto der) --- */
/* Ocultamos el footer por defecto del modal y usamos el custom */
#blup-hours-modal .modal-actions {
    display: none; 
}

.bottom-button-container {
    margin-top: auto;
    padding-top: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f3f4f6;
    margin-bottom: env(safe-area-inset-bottom);
}

.back-button-custom {
    background: none;
    border: none;
    padding: 0.6rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 50%;
    display: inline-flex;
    transition: background-color 0.2s, color 0.2s;
}
.back-button-custom:hover {
    color: #111827;
    background-color: #f3f4f6;
}
.back-button-custom svg {
    width: 1.5rem;
    height: 1.5rem;
}

.next-button-custom {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-align: right;
    border: none;
    cursor: pointer;
    background: none;
    color: #1f2937;
    font-size: 1.125rem;
    font-family: 'Poppins', sans-serif;
}
.next-button-custom:hover {
    color: #000000;
}


/* ================================================================ */
/* === LIMPIEZA EXTREMA MODAL HORAS (Diseño Minimalista) === */
/* ================================================================ */

/* 1. Desaparecer el Header estándar completo */
/* Esto elimina: Flecha arriba, Título "Horario de Trabajo", Botón X y la línea divisoria */
#blup-hours-modal .modal-header {
    display: none !important;
}

/* 2. Desaparecer la "Rallita" gris (Handle) del tope */
#blup-hours-modal::before {
    display: none !important;
    content: none !important;
}

/* 3. Ajustes al cuerpo para que se vea como una tarjeta limpia */
#blup-hours-modal {
    /* Asegurar fondo blanco y bordes redondeados arriba */
    background-color: #ffffff !important;
    border-radius: 24px 24px 0 0 !important;
    
    /* Quitar sombras o bordes extraños si los hubiera */
    border: none !important;
}

#blup-hours-modal .modal-content {
    /* Dar un poco de aire arriba ya que quitamos el header */
    padding-top: 40px !important;
    
    /* Asegurar que no haya líneas grises arriba */
    border-top: none !important;
}

/* Ajuste fino para el título grande que inyectamos con JS */
.slider-content-wrapper h1 {
    margin-top: 0 !important;
}



/* ================================================================ */
/* === ESTILOS SLIDER DÍAS (Igual a Horas) === */
/* ================================================================ */

/* Limpieza del modal (igual que horas) */
#blup-days-modal .modal-header,
#blup-days-modal::before {
    display: none !important;
}

#blup-days-modal {
    background-color: #ffffff !important;
    border-radius: 24px 24px 0 0 !important;
    border: none !important;
}

#blup-days-modal .modal-content {
    padding: 0;
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ajustes específicos del track de días */
#daysSvgTrackContainer {
    width: 100%;
    height: 28px;
    margin-top: 3rem; /* Un poco más de aire arriba */
    margin-bottom: 2.5rem;
    cursor: grab;
    position: relative;
}

/* Marcador de Días */
#daysMarker {
    /* Mismos estilos base que slider-marker */
    z-index: 20;
}



/* --- FIX SKELETON GRID TRABAJOS --- */
#worker-job-list-container.view-mode-grid .skeleton-loader.worker-job-card {
    display: none !important; /* Ocultar el skeleton de lista normal si estamos en grid */
}

/* El skeleton en modo grid debe ser un cuadrado perfecto */
#worker-job-list-container.view-mode-grid .skeleton-loader.portfolio-item {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-element);
    animation: loading-skeleton-tempconnect 1.5s ease-in-out infinite;
}



/* ======================================================= */
/* === LISTAS TIPO iOS PARA CONFIGURACIÓN === */
/* ======================================================= */

.ios-list-group {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.ios-list-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1rem;
    color: #000;
    cursor: pointer;
    transition: background-color 0.2s;
}

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

.ios-list-item:active {
    background-color: #e5e5ea;
}

.ios-list-item .ios-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 0.9rem;
}

.ios-list-item span {
    flex-grow: 1;
    text-align: left;
}

.ios-list-item .arrow {
    color: #c7c7cc;
    font-size: 0.9rem;
}   
/* ======================================================= */
/* === ANTI-SOLAPAMIENTO: FILTROS VS UBICACIÓN === */
/* ======================================================= */

/* Si el modal de filtros está abierto, desaparece la tarjeta de ubicación */
body:has(#map-filters-modal.active) #blup-fix-location-modal {
    display: none !important;
}

/* Espacio y elegancia para el modal de Filtros */
#map-filters-modal .modal-header {
    padding-top: 30px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

#map-filters-modal .modal-header h2 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #000 !important;
}

#map-filters-modal .modal-close-btn {
    top: 30px !important;
    right: 20px !important;
    background-color: #f0f0f0 !important;
}


/* ======================================================= */
/* === ESTILOS BILLETERA VIP (RECARGA Y QR) === */
/* ======================================================= */

/* Botones rápidos de monto (Ej: + S/20) */
.btn-quick-amount {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-quick-amount:active {
    background: #10B981;
    color: #fff;
    border-color: #10B981;
    transform: scale(0.95);
}

/* Tarjeta de Mi QR Personal */
.my-personal-qr-card {
    background: linear-gradient(135deg, #1f1f23 0%, #0a0a0c 100%);
    width: 280px;
    border-radius: 30px;
    padding: 30px 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Reflejo estilo tarjeta de crédito */
.my-personal-qr-card::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.1) 0%, transparent 40%, transparent 100%);
    transform: rotate(30deg);
    pointer-events: none;
}

.qr-user-info {
    text-align: center;
    margin-bottom: 25px;
    z-index: 2;
}
.qr-user-info img {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-bottom: 10px;
    object-fit: cover;
}
.qr-user-info h3 {
    margin: 0; font-size: 1.2rem; color: #fff; font-weight: 800;
}
.qr-user-info p {
    margin: 0; font-size: 0.8rem; color: #00ff9d; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}

.qr-code-box {
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    width: 200px; height: 200px;
    position: relative;
    z-index: 2;
}
.qr-code-box img {
    width: 100%; height: 100%; mix-blend-mode: multiply;
}
.qr-logo-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    color: #fff;
    width: 35px; height: 35px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    border: 3px solid #fff;
}

/* ======================================================= */
/* === ESTILOS TARJETAS DE BANCO === */
/* ======================================================= */

.bank-card-item {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: transform 0.1s;
}

.bank-card-item:active {
    transform: scale(0.98);
    background-color: #f9f9f9;
}

.card-icon {
    width: 45px;
    height: 35px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.card-icon.visa {
    background: linear-gradient(135deg, #1434CB 0%, #11289b 100%);
}

.card-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-details strong {
    font-size: 1rem;
    color: #000;
}

.card-details span {
    font-size: 0.8rem;
    color: #888;
    font-family: monospace;
    letter-spacing: 1px;
}

/* ======================================================= */
/* === LAS BOLITAS DE OFERTAS (LIVE BIDDING PRESSURE) === */
/* ======================================================= */

.live-bids-container {
    display: flex;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border-divider);
}

.bids-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 12px;
    font-weight: 600;
}

.bid-bubbles-group {
    display: flex;
    align-items: center;
}

/* La Bolita Base */
.bid-bubble {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #f0f2f5;
    color: #000;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    /* LA MAGIA DEL SOLAPAMIENTO: Margen negativo */
    margin-left: -12px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1;
    transition: transform 0.2s;
}

/* El primero no debe solaparse con la nada */
.bid-bubble:first-child {
    margin-left: 0;
    z-index: 3;
}
.bid-bubble:nth-child(2) { z-index: 2; }
.bid-bubble:nth-child(3) { z-index: 1; }

.bid-bubble:hover {
    transform: translateY(-3px);
    z-index: 10;
}

/* Bolita negra si hay más ofertas que no caben */
.bid-bubble.more-bids {
    background-color: #000;
    color: #fff;
    border-color: #000;
}



/* ========================================================= */
/* === NUEVO DISEÑO: CAJAS DE LOGRO (GAMING / UBER STYLE) === */
/* ========================================================= */

#badge-selection-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Estado Normal (Apagado / Gris) */
.badge-select-btn-v2 {
    background-color: #f3f4f6; /* Gris muy suave */
    border: 2px solid transparent;
    color: #4b5563; /* Gris oscuro para el texto */
    padding: 10px 16px;
    border-radius: 12px; /* Cuadradito moderno */
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* Sombra casi invisible */
}

/* Icono apagado */
.badge-select-btn-v2 i {
    font-size: 1.1rem;
    color: #9ca3af; /* Gris más claro para el icono */
    transition: color 0.3s, transform 0.3s;
}

/* ESTADO SELECCIONADO (Activo / Negro / Neón) */
.badge-select-btn-v2.selected {
    background-color: #000000; /* Negro puro */
    color: #ffffff; /* Texto blanco */
    border-color: #000000;
    transform: translateY(-2px); /* Se levanta un poquito */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2); /* Sombra elegante */
}

/* Magia: El icono se vuelve Verde Neón y salta */
.badge-select-btn-v2.selected i {
    color: #10B981; /* Verde esmeralda tipo Xbox/Uber */
    animation: popBadgeIcon 0.4s ease forwards;
}

@keyframes popBadgeIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}


/* ========================================================================= */
/* === REDISEÑO TOTAL: PERFIL PÚBLICO (NIVEL DIOS - TIPO X/TWITTER) === */
/* ========================================================================= */

/* 1. PORTADA: Más alta y con degradado abajo para que resalte el avatar */
#public-profile-modal .profile-cover-container {
    height: 180px; /* Tamaño perfecto */
    position: relative;
    background-color: #000; /* Por si no carga la imagen */
}
#public-profile-modal .profile-cover-container::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}

/* 2. EL AVATAR: Más grande, con borde grueso y subido hacia la portada */
#public-profile-modal .profile-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -50px; /* ESTO ES LA MAGIA: Sube el avatar hacia la foto de portada */
    padding: 0 20px;
    margin-bottom: 15px;
    z-index: 5;
    position: relative;
}

#public-profile-avatar-img {
    width: 100px !important;
    height: 100px !important;
    border: 5px solid #ffffff; /* Borde blanco grueso que lo recorta de la portada */
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 3. BOTONES DE ACCIÓN: Seguir y Compartir (Alineados a la derecha del avatar) */
#public-profile-actions {
    left: 5rem;
    POSITION: relative;
    display: flex;
    gap: 10px;
}

#public-profile-actions .btn-primary {
    background-color: #000000; /* Negro estilo Uber/X */
    color: #ffffff;
    border: none;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 50px; /* Súper redonditos */
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

#public-profile-actions .btn-primary:active {
    transform: scale(0.95);
}

/* El botón de compartir (El gris del lado) */
#public-profile-actions .btn-secondary {
    background-color: #f0f2f5;
    color: #0f1419;
    border: 1px solid #cfd9de;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
#public-profile-actions .btn-secondary:hover {
    background-color: #e4e6eb;
}

/* 4. INFORMACIÓN DEL USUARIO (Nombre y Rol) */
#public-profile-modal .profile-text-content {
    padding: 0 20px;
    margin-top: 5px;
}

#public-profile-display-name {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #0f1419;
    margin-bottom: 2px !important;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

#public-profile-display-role {
    font-size: 0.95rem;
    color: #536471;
    font-weight: 500;
    text-transform: capitalize;
}

/* 5. LA ISLA DE CONFIANZA: ¡Arreglada y hermosa! */
/* Vamos a quitarla del aire y ponerla sutilmente debajo del nombre */
#public-profile-badges {
    display: inline-flex;
    gap: 8px;
    margin-left: 10px;
    vertical-align: middle;
}

#public-profile-badges .trust-item-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background-color: #f0f2f5;
    position: relative;
    color: #A3A3A3;
}

/* Colores cuando están activos */
#public-profile-badges .icon-id.active { color: #0077FF; background: #e6f0ff; }
#public-profile-badges .icon-medal.active { color: #FFD700; background: #fffbe6; }
#public-profile-badges .icon-email.active { color: #10B981; background: #e6f9f0; }

/* El puntito de alerta pequeño */
#public-profile-badges .trust-status-dot {
    position: absolute;
    top: -2px; right: -2px;
    width: 10px; height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
}
#public-profile-badges .trust-status-dot.alert { background-color: #EF4444; }
#public-profile-badges .trust-status-dot.check { background-color: #10B981; }

/* 6. BIOGRAFÍA Y FECHA */
#public-profile-bio-text {
    margin: 15px 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #0f1419;
}
.profile-details-row {
    color: #536471;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

/* 7. ESTADÍSTICAS (Pubs, Seguidores, Siguiendo) */
#public-profile-stats {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    border-top: 1px solid #eff3f4;
    border-bottom: 1px solid #eff3f4;
    margin-bottom: 10px;
}

#public-profile-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

#public-profile-stats .stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f1419;
    line-height: 1;
}

#public-profile-stats .stat-label {
    font-size: 0.85rem;
    color: #536471;
    font-weight: 500;
    margin-top: 4px;
}

/* 8. EL MENSAJE DE "VACÍO" (Para que no se vea feo) */
#public-portfolio-empty-msg {
    background-color: #f7f9f9;
    border-radius: 16px;
    padding: 40px 20px !important;
    margin: 20px;
    text-align: center;
    color: #536471;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px dashed #e1e8ed;
}

/* ========================================================================= */

/* ========================================================================= */
/* === FIX SUPREMO: PERFIL PANTALLA COMPLETA Y SIN BLUR (NIVEL DIOS) === */
/* ========================================================================= */

/* 1. ELIMINAR EL BLUR MOLESTO DEL FONDO */
.modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Solo oscurece, no marea */
}

/* 2. PERFIL PANTALLA COMPLETA (Cero espacios grises arriba) */
#public-profile-modal, 
#profile-modal {
    height: 100% !important;
    max-height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important; /* Sin bordes curvos, es una pantalla entera */
    margin: 0 !important;
    border: none !important;
}

/* 3. LA ISLA DINÁMICA NEGRA (Estilo iPhone 15 Pro) */
.profile-trust-island-header {
    background-color: #000000 !important; /* Negro puro */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Borde sutil */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; /* Sombra para que flote */
    border-radius: 50px !important; /* Forma de píldora perfecta */
    padding: 6px 18px !important;
    height: 40px !important;
    display: inline-flex !important;
    gap: 15px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Arreglo de los iconos dentro de la isla negra */
.profile-trust-island-header .trust-item-wrapper {
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.5) !important; /* Gris por defecto */
}
/* Colores cuando están activos (brillan sobre el negro) */
.profile-trust-island-header .icon-id.active { color: #3b82f6 !important; text-shadow: 0 0 8px rgba(59,130,246,0.5) !important; }
.profile-trust-island-header .icon-medal.active { color: #fbbf24 !important; text-shadow: 0 0 8px rgba(251,191,36,0.5) !important; }
.profile-trust-island-header .icon-email.active { color: #34d399 !important; text-shadow: 0 0 8px rgba(52,211,153,0.5) !important; }

/* 4. MEJORAR LA PORTADA Y POSICIÓN DEL AVATAR */
.profile-cover-container {
    height: 180px !important; /* Altura perfecta */
    background-color: #1a1a1a !important; 
    border-radius: 0 !important;
}

/* El degradado negro abajo de la portada para que resalte el botón volver y la isla */
.profile-header-fixed {
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%) !important;
    border: none !important;
}
.profile-header-fixed.scrolled {
    background: #ffffff !important; /* Se vuelve blanco al bajar */
    border-bottom: 1px solid #eee !important;
}

/* Empujamos el avatar hacia arriba cortando la portada */
.profile-top-row {
    margin-top: -55px !important; 
    padding: 0 20px !important;
    align-items: flex-end !important;
    margin-bottom: 10px !important;
}

/* Avatar impecable */
#public-profile-avatar-img,
#profile-avatar-img {
    width: 105px !important;
    height: 105px !important;
    border: 4px solid #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* 5. BOTÓN SEGUIR (Negro y elegante) */
#public-profile-follow-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: none !important;
}
#public-profile-follow-btn.btn-secondary {
    background-color: #ffffff !important;
    color: #0f1419 !important;
    border: 1px solid #cfd9de !important;
}





/* ========================================================================= */
/* === FIXES FINALES: HEADER TRANSPARENTE PERFIL PÚBLICO === */
/* ========================================================================= */

/* Que el techo sea 100% transparente al abrir el perfil */
#public-profile-sticky-header {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Solo cuando haces scroll hacia abajo, se pone blanco */
#public-profile-sticky-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #eee !important;
    backdrop-filter: blur(10px);
}

/* El botón de la flecha <- : Gris oscuro translúcido para que se vea sobre cualquier foto */
#public-profile-back-btn {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cuando haces scroll y el fondo se pone blanco, la flecha se pone negra */
#public-profile-sticky-header.scrolled #public-profile-back-btn {
    background-color: #f0f2f5 !important;
    color: #0f1419 !important;
}


/* ========================================================= */
/* === CREADOR DE DESTACADAS (GALERÍA SELECTORA) === */
/* ========================================================= */

.highlight-select-item {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #eee;
    cursor: pointer;
    overflow: hidden;
}

.highlight-select-item img,
.highlight-select-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* El circulito de selección (Estilo iOS/IG) */
.highlight-select-item .select-circle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    background-color: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Efecto Oscuro al seleccionar */
.highlight-select-item.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255,255,255,0.3);
    pointer-events: none;
}

/* Circulito Azul cuando está marcado */
.highlight-select-item.selected .select-circle {
    background-color: #007AFF; /* Azul Apple */
    border-color: #007AFF;
}

/* Icono de video en la esquina inferior */
.highlight-select-item .video-icon {
    position: absolute;
    bottom: 5px;
    right: 8px;
    color: white;
    font-size: 0.8rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}