/* frontend/css/feed.css */

/* --- Estilos Pantalla Feed --- */
#feed-screen .screen-header.feed-header {
    display: flex;
    justify-content: space-between; /* Logo izquierda, Botón derecha */
    align-items: center;
    padding: var(--space-2) var(--space-4); /* Padding usual */
    padding-top: calc(var(--space-2) + env(safe-area-inset-top));
    height: auto; /* Altura automática */
    min-height: 56px; /* Altura mínima */
    border-bottom: 1px solid var(--color-border-divider);
    background-color: var(--color-bg-surface);
    flex-shrink: 0; /* No encoger */
}

#feed-screen .feed-header .home-logo { /* Reutilizar clase logo home */
    height: 30px; /* Ajustar tamaño */
    width: auto;
}

#feed-screen .feed-header #feed-create-post-btn {
    /* Estilos icon-btn */
    background: none;
    border: none;
    color: var(--color-text-primary); /* Color primario */
    font-size: 1.4rem;
    cursor: pointer;
    padding: var(--space-2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}
#feed-screen .feed-header #feed-create-post-btn:hover {
    background-color: var(--color-bg-element);
}

#feed-screen .feed-content {
    padding: 0; /* Quitar padding del main, cada post lo tendrá */
    /* background-color: var(--color-bg-deep); */ /* Fondo más oscuro si se desea */
}

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

/* --- Estilos de una Publicación (Post Item) --- */
.post-item {
    background-color: #f8f9fa /* Fondo de cada post */
    border-bottom 1px solid var(--color-border-divider); /* Separador */
    padding: var(--space-4); /* Padding interno */
    display: flex;
    gap: var(--space-3); /* Espacio entre avatar y contenido */
}

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

/* Columna Avatar */
.post-item-avatar {
    flex-shrink: 0;
}
.post-item-avatar img {
    width: 44px; /* Tamaño avatar */
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-bg-element); /* Placeholder */
}

/* Columna Contenido Principal */
.post-item-main {
    flex-grow: 1;
    overflow: hidden; /* Para truncar texto si es necesario */
}

/* Header del Post (Nombre, Usuario, Tiempo, Opciones) */
.post-item-header {
    display: flex;
    align-items: flex-start; /* Alinear arriba */
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.post-item-author-info {
    display: flex;
    flex-direction: column; /* Nombre arriba, user/tiempo abajo */
    flex-grow: 1;
    overflow: hidden;
}
.post-item-author-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer; /* Para ir al perfil */
    margin-right: var(--space-1); /* Espacio antes del check */
    display: inline-flex; /* Para alinear check */
    align-items: center;
    gap: var(--space-1);
}
.post-item-author-name .verified-badge-post { /* Icono verificación */
    color: var(--color-accent-primary);
    font-size: 0.9em;
}
.post-item-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.post-item-meta .username { /* Opcional si tienes username */
     /* font-weight: var(--font-weight-medium); */
}
.post-item-meta .timestamp::before {
    content: "·"; /* Separador */
    margin: 0 var(--space-1);
}
.post-item-options-btn {
    background: none; border: none; color: var(--color-text-secondary); font-size: 1rem; padding: var(--space-1); cursor: pointer; flex-shrink: 0; margin-left: var(--space-2);
}
.post-item-options-btn:hover { color: var(--color-text-primary); }

/* Contenido del Post (Texto) */
.post-item-content {
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    white-space: normal; /* Respetar saltos de línea */
    /*white-space: pre-wrap;*/ /* Respetar saltos de línea */
    word-wrap: break-word; /* Romper palabras largas */
}
/* Estilo para hashtags y menciones */
.post-item-content a.hashtag,
.post-item-content a.mention {
    color: var(--color-accent-primary); /* Azul */
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}
.post-item-content a.hashtag:hover,
.post-item-content a.mention:hover {
    text-decoration: underline;
}

/* Contenedor Media (Imagen/Video) */
.post-item-media {
    margin-top: var(--space-3);
    border-radius: var(--radius-lg); /* Bordes redondeados */
    overflow: hidden;
    border: 1px solid var(--color-border-divider); /* Borde sutil */
    cursor: pointer; /* Para abrir visor si es necesario */
}
.post-item-media img,
.post-item-media video {
    display: block;
    width: 100%;
    max-height: 400px; /* Limitar altura */
    object-fit: cover; /* Cubrir el área */
    background-color: var(--color-bg-element); /* Fondo mientras carga */
}

/* Preview Trabajo Compartido */
.post-item-shared-job {
    margin-top: var(--space-3);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background-color: var(--color-bg-element); /* Fondo distinto */
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.post-item-shared-job:hover {
    background-color: var(--color-bg-element-hover);
}
.post-item-shared-job .job-preview-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}
.post-item-shared-job .job-preview-details {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap; /* Para que quepan en móvil */
    gap: var(--space-3);
}
.post-item-shared-job .job-preview-details span { white-space: nowrap; }
.post-item-shared-job .job-preview-details .price { color: var(--color-success); }

/* Acciones del Post (Like, Comment, Share) */
.post-item-actions {
    display: flex;
    justify-content: space-around; /* Distribuir espacio */
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    /* border-top: 1px solid var(--color-border-divider); */ /* Separador opcional */
}
.post-action-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary); /* Color gris por defecto */
    font-size: 0.9rem; /* Tamaño icono */
    cursor: pointer;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2); /* Espacio icono-número */
    transition: color 0.2s ease;
    min-width: 60px; /* Ancho mínimo para alinear */
    justify-content: center;
}
.post-action-btn:hover {
    color: var(--color-accent-primary); /* Azul al hover */
}
.post-action-btn.liked {
    color: var(--color-error); /* Rojo si le diste like */
    font-weight: var(--font-weight-semibold); /* Opcional: más grueso */
}
.post-action-btn.liked:hover {
    color: #ff6b6b; /* Rojo más claro al hover */
}
.post-action-btn span { /* Contador */
    font-size: var(--font-size-xs);
    font-weight: normal;
}

/* --- Estilos Modal Crear/Editar Post --- */
#create-edit-post-modal .modal-content {
    padding: var(--space-4);
}
#create-edit-post-form .post-author-info {
    /* Estilos ya definidos inline, se pueden mover aquí */
}
#create-edit-post-form textarea {
    /* Hereda estilos base de textarea */
    min-height: 120px; /* Altura mínima */
    resize: vertical;
    background-color: var(--color-bg-base); /* Fondo base del modal */
    border: none; /* Sin borde */
    padding: 0; /* Sin padding extra */
    font-size: var(--font-size-md); /* Texto más grande */
}
#create-edit-post-form .char-counter {
    /* Estilos ya definidos inline */
}
#create-edit-post-form #post-form-media-preview-container {
    /* Estilos ya definidos inline */
}
#create-edit-post-form #post-form-remove-media-btn {
    /* Estilos ya definidos inline */
}
#create-edit-post-form .post-form-actions {
    /* Estilos ya definidos inline */
}
#create-edit-post-form label[for="post-form-media-input"] {
    /* Hereda .icon-btn */
}
#create-edit-post-form #post-form-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Estilos Modal Detalles Post --- */
#post-details-modal .modal-content {
    padding: 0; /* Sin padding general */
}
#post-detail-original-post-container .post-item {
    border-bottom: none; /* Quitar borde inferior del post original */
}
#post-detail-comments-list-container {
    padding: 0 var(--space-4); /* Padding para comentarios */
}
#post-detail-comments-list-container h4 { /* Título "Comentarios" */
    /* Estilos ya definidos inline */
}
/* Reutilizar estilos .comment-item de portfolioViewer.css si son iguales */
#post-detail-comments-list .comment-item {
    display: flex; gap: var(--space-3);
    padding: var(--space-3) 0; /* Padding vertical */
    border-bottom: 1px solid var(--color-border-divider);
    font-size: var(--font-size-sm); line-height: var(--line-height-snug);
}
#post-detail-comments-list .comment-item:last-child { border-bottom: none; }
#post-detail-comments-list .comment-item .avatar-xs { flex-shrink: 0; width: 32px; height: 32px; }
#post-detail-comments-list .comment-content { flex-grow: 1; }
#post-detail-comments-list .comment-header { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
#post-detail-comments-list .comment-user { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-size: var(--font-size-sm); cursor: pointer;}
#post-detail-comments-list .comment-text { word-wrap: break-word; white-space: pre-wrap; color: var(--color-text-secondary);}
#post-detail-comments-list .comment-footer { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
#post-detail-comments-list .comment-time { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
#post-detail-comments-list .comment-like-btn { /* ... estilos botón like comentario ... */ }
#post-detail-comments-list .comment-delete-btn { /* ... estilos botón borrar comentario ... */ }
#post-detail-comments-empty { /* Mensaje vacío */ }
#post-detail-comments-loader { /* Loader */ }

/* Footer para añadir comentario */
#add-post-comment-form {
    display: flex; align-items: center; gap: var(--space-2);
}
#add-comment-user-avatar { /* Avatar del usuario actual */ }
#add-post-comment-input { /* Textarea comentario */
    flex-grow: 1; border: none; outline: none; background-color: var(--color-bg-element);
    color: var(--color-text-primary); font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
    resize: none; line-height: var(--line-height-tight); max-height: 80px; overflow-y: auto;
}
#add-post-comment-input::placeholder { color: var(--color-text-placeholder); }
#add-post-comment-input:focus { box-shadow: 0 0 0 1px var(--color-accent-primary); }
#add-post-comment-form .btn-send-comment { /* Botón enviar */ }


/* --- Estilos Menú Opciones Post --- */
.post-options-container {
    position: relative; /* Contenedor relativo para menú absoluto */
    flex-shrink: 0; /* Evitar que se encoja */
}

.post-item-options-btn {
    /* Estilos base ya definidos (padding, font-size, color, etc.) */
    /* Asegurar que sea visible */
    opacity: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.post-item-options-btn:hover {
    background-color: var(--color-bg-element); /* Fondo sutil al pasar encima */
    color: var(--color-text-primary);
}

.post-options-menu {
    position: absolute;
    top: 100%; /* Debajo del botón */
    right: 0; /* Alineado a la derecha */
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-divider);
    z-index: 10; /* Encima del contenido del post */
    overflow: hidden;
    min-width: 150px; /* Ancho mínimo */
    padding: var(--space-1) 0; /* Padding vertical pequeño */
    display: none; /* Oculto por defecto */
}

.post-options-menu button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
}
.post-options-menu button:hover {
    background-color: var(--color-bg-surface-hover);
}
.post-options-menu button i {
    color: var(--color-text-secondary);
    width: 1.1em; /* Ancho fijo para alinear texto */
    text-align: center;
    flex-shrink: 0; /* No encoger icono */
}
/* Estilo específico botón eliminar */
.post-options-menu button[data-action="delete-post"] {
    color: var(--color-error);
}
.post-options-menu button[data-action="delete-post"] i {
    color: var(--color-error);
}
.post-options-menu button[data-action="delete-post"]:hover {
    background-color: rgba(239, 68, 68, 0.1); /* Fondo rojo tenue */
}




/* ================================================ */
/* === ESTILOS VISOR VIDEO FEED (Tipo TikTok/IG) === */
/* ================================================ */

/* Base Modal (Hereda de .story-viewer-modal-fullscreen) */
#feed-video-viewer-modal {
    /* background-color: #000; */ /* Ya heredado */
}

.feed-video-viewer-container {
    /* Hereda .story-viewer-container (flex, relative, etc.) */
     /* Fondo transparente para ver video detrás de header/footer */
    background-color: transparent;
}

/* Header Visor Video */
#feed-video-viewer-modal .feed-video-viewer-header {
    position: absolute;
    top: 0; /* Pegado arriba */
    left: 0;
    right: 0;
    z-index: 10; /* Encima del video */
    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)); /* SafeArea */
    /* Gradiente suave arriba para legibilidad */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
    pointer-events: none; /* No bloquear clics en video */
}
#feed-video-viewer-modal .feed-video-author-info {
    /* Hereda .story-user-info */
    pointer-events: auto; /* Hacer clickeable */
    background-color: rgba(0, 0, 0, 0.3); /* Fondo suave */
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    max-width: 70%; /* Evitar que sea muy largo */
}
#feed-video-viewer-modal .feed-video-author-info img {
    width: 28px; height: 28px; /* Avatar pequeño */
}
#feed-video-viewer-modal .feed-video-author-info span {
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#feed-video-viewer-modal .story-viewer-actions {
    pointer-events: auto; /* Hacer botones clickeables */
}
#feed-video-viewer-modal .story-viewer-actions .story-viewer-btn {
     /* Estilo botones header (círculo translúcido) */
     color: rgba(255, 255, 255, 0.9);
     background-color: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(5px);
     border-radius: 50%;
     width: 36px; height: 36px; font-size: 1.1rem;
}

/* Contenedor del Video */
#feed-video-media-container {
    flex-grow: 1; /* Debe ocupar espacio */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 0;
    background-color: #000; /* Fondo negro */
}
#feed-video-media-container video {
    display: block;
    width: 100%; /* Ocupar ancho */
    height: 100%; /* Ocupar alto */
    object-fit: contain; /* Ajustar manteniendo aspecto */
    cursor: pointer; /* Para clic de sonido */
}

/* Sidebar de Acciones */
.feed-video-actions-sidebar {
    position: absolute;
    bottom: var(--space-6); /* Espacio desde abajo */
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); /* SafeArea */
    right: var(--space-3);
    z-index: 10; /* Encima del video */
    display: flex;
    flex-direction: column; /* Acciones apiladas */
    align-items: center;
    gap: var(--space-5); /* Espacio entre botones */
    pointer-events: auto; /* Permitir clics */
}
.icon-action-btn {
    background: none;
    border: none;
    color: #fff; /* Iconos blancos */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    font-size: 1.7rem; /* Iconos grandes */
    cursor: pointer;
    padding: var(--space-1);
    display: flex;
    flex-direction: column; /* Icono arriba, contador abajo */
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease, color 0.15s ease;
    width: 48px; /* Ancho fijo */
    text-align: center;
}
.icon-action-btn:hover {
    transform: scale(1.1);
}
.icon-action-btn .count {
    font-size: var(--font-size-xs); /* Contador pequeño */
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}
/* Estilo Like Activo */
.icon-action-btn.feed-video-like-btn[aria-pressed="true"] i {
    color: var(--color-error); /* Corazón rojo */
}

/* Panel de Comentarios (Estilo Bottom Sheet) */
#feed-video-comments-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65vh; /* Altura del panel */
    max-height: 500px; /* Altura máxima */
    background-color: var(--color-bg-surface); /* Fondo panel */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Redondeado superior */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    z-index: 20; /* Encima de todo menos modales de confirmación */
    display: flex;
    flex-direction: column;
    transform: translateY(100%); /* Oculto abajo */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto; /* Permitir interacción */
}
#feed-video-comments-panel.active {
    transform: translateY(0%); /* Visible */
}
#feed-video-comments-panel .panel-header {
    display: flex;
    justify-content: center; /* Centrar título */
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-divider);
    flex-shrink: 0;
    position: relative; /* Para botón cerrar */
}
#feed-video-comments-panel .panel-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
#feed-video-comments-panel .panel-close-btn {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    /* Heredar estilo .modal-close-btn */
    width: 32px; height: 32px; font-size: 1.2rem; color: var(--color-text-secondary); background-color: var(--color-bg-element); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s;
}
#feed-video-comments-panel .panel-close-btn:hover { background-color: var(--color-bg-element-hover); color: var(--color-text-primary); }

#feed-video-comments-panel .panel-list-container {
    flex-grow: 1;
    overflow-y: auto; /* Scroll para comentarios */
    padding: 0 var(--space-4); /* Padding lateral */
}
#feed-video-comments-panel .panel-list-container::-webkit-scrollbar { width: 5px; }
#feed-video-comments-panel .panel-list-container::-webkit-scrollbar-thumb { background-color: var(--color-border-interactive); border-radius: 3px; }
/* Reutilizar estilos .comment-item */
#feed-video-comments-list .comment-item {
    /* Estilos definidos previamente */
    padding: var(--space-3) 0;
}
#feed-video-comments-empty { /* Mensaje vacío */ }
#feed-video-comments-loader { /* Loader */ }

/* Footer Panel Comentarios (Input) */
#feed-video-comments-panel .panel-footer {
    border-top: 1px solid var(--color-border-divider);
    padding: var(--space-2) var(--space-3); /* Padding más ajustado */
    flex-shrink: 0;
    background-color: var(--color-bg-surface); /* Fondo del footer */
    /* SafeArea se aplica aquí */
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
}
#add-feed-video-comment-form {
    display: flex;
    align-items: flex-end; /* Alinear items abajo si textarea crece */
    gap: var(--space-2); /* Espacio entre avatar, input, botón */
    /* Contenedor Input/Botón con borde redondeado */
    background-color: var(--color-bg-element); /* Fondo gris claro */
    border: 1px solid var(--color-border-interactive); /* Borde sutil */
    border-radius: var(--radius-full); /* Bordes muy redondeados */
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); /* Padding interno (más a la izq por avatar) */
    transition: border-color 0.2s ease;
    flex-grow: 1; /* Hacer que el form ocupe el ancho */
}
#add-feed-video-comment-form:focus-within {
    border-color: var(--color-text-secondary); /* Borde más visible al enfocar */
}
/* Avatar del usuario actual */
#add-feed-comment-user-avatar_viewer {
    width: 32px; /* Tamaño avatar */
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* No encoger */
    align-self: center; /* Centrar verticalmente */
}


/* Textarea para escribir */
#add-feed-video-comment-input_viewer {
    flex-grow: 1; /* Ocupar espacio disponible */
    border: none; /* Sin borde propio */
    outline: none;
    background: none; /* Fondo transparente (el del form ya se ve) */
    color: var(--color-text-primary);
    font-size: var(--font-size-sm); /* Tamaño texto comentario */
    padding: var(--space-2) 0; /* Padding vertical para centrar texto */
    resize: none; /* No permitir resize manual */
    line-height: var(--line-height-tight); /* Ajustar interlineado */
    max-height: 80px; /* Limitar altura máxima */
    overflow-y: auto; /* Scroll si excede altura */
    /* Quitar scrollbar visualmente */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#add-feed-video-comment-input_viewer::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
#add-feed-video-comment-input_viewer::placeholder {
    color: var(--color-text-placeholder);
}

#add-feed-comment-submit-btn_viewer {
    background: none;
    border: none;
    color: var(--color-accent-primary); /* Color azul */
    font-size: 1.4rem; /* Tamaño icono avión */
    cursor: pointer;
    padding: var(--space-2); /* Área de clic */
    flex-shrink: 0;
    align-self: center; /* Centrar verticalmente */
    transition: color var(--transition-duration-fast);
}
#add-feed-comment-submit-btn_viewer:disabled {
    color: var(--color-text-disabled); /* Color gris si deshabilitado */
    cursor: not-allowed;
}
#add-feed-comment-submit-btn_viewer:not(:disabled):hover {
    color: var(--color-accent-primary-hover); /* Oscurecer azul al hover */
}

#add-feed-comment-user-avatar { /* Reutilizar estilo #add-comment-user-avatar */ }
#add-feed-video-comment-input { /* Reutilizar estilo #add-post-comment-input */ }
#add-feed-video-comment-form .btn-send-comment { /* Reutilizar estilo .btn-send-comment */ }

/* Efecto de encogimiento del video cuando se abren comentarios */
#feed-video-viewer-modal.comments-active #feed-video-media-container {
    /* Reducir altura o añadir margen inferior */
    /* Ejemplo: Reducir altura */
    /* height: 35vh; */ /* Ajustar porcentaje */
    /* O añadir padding inferior al contenedor principal */
    padding-bottom: 65vh; /* Altura del panel de comentarios */
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#feed-video-viewer-modal.comments-active .feed-video-actions-sidebar {
    /* Ajustar posición si es necesario */
    bottom: calc(65vh + var(--space-4)); /* Subir la sidebar */
    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Verificar estos estilos */
#post-details-modal .modal-content.scrollable {
    padding: 0; /* Correcto, sin padding general */
    overflow-y: auto; /* Correcto, permite scroll */
    flex-grow: 1; /* Correcto, ocupa espacio */
    /* Asegurarse que NO haya un height o max-height fijo aquí */
}

#post-detail-original-post-container {
     padding: var(--space-4);
     border-bottom: 1px solid var(--color-border-divider);
     /* No debería tener limitación de altura */
     flex-shrink: 0; /* Que no se encoja */
}

#post-detail-comments-list-container {
    padding: 0 var(--space-4);
    /* No debería tener limitación de altura */
    /* flex-grow: 1; */ /* Podría añadirse si queremos que esta parte crezca más */
    /* min-height: 200px; */ /* Podría añadirse altura mínima si se desea */
}
#post-details-modal {
    max-height: 100%;
    height: 100%;
    border-radius: 0px;

}
/* Estilo para botón Guardar activo (cuando ya está guardado) */
.post-action-btn[data-action="save"] i.fas.fa-bookmark {
    color: var(--color-accent-primary); /* Mismo color que el like activo */
    font-weight: var(--font-weight-semibold); /* Hacerlo bold como el like */
}

/* (Opcional) Estilo hover para el botón guardar cuando está activo */
.post-action-btn[data-action="save"]:has(i.fas.fa-bookmark):hover {
    color: var(--color-accent-primary-hover);
}
/* ================================================ */
/* === ESTILOS SUGERENCIAS MENCIÓN (@usuario) === */
/* ================================================ */

/* Contenedor del textarea y la lista de sugerencias */
.mention-input-container {
    position: relative; /* Necesario para posicionar la lista */
}

/* Lista de Sugerencias (similar a resultados búsqueda preels) */
.mention-suggestions-list {
    position: relative;
    bottom: 100%; /* Posicionar ENCIMA del textarea */
    left: 0;
    right: 0;
    background-color: var(--color-bg-surface); /* Fondo */
    border: 1px solid var(--color-border-divider);
    border-radius: var(--radius-md); /* Bordes redondeados */
    box-shadow: var(--shadow-lg); /* Sombra */
    z-index: 150; /* Encima de otros elementos del modal */
    max-height: 180px; /* Altura máxima antes de scroll */
    overflow-y: auto;
    display: none; /* Oculta por defecto */
    margin-bottom: var(--space-1); /* Pequeño espacio sobre el textarea */
}
.mention-suggestions-list.visible {
    display: block; /* Mostrar */
}
.mention-suggestions-list::-webkit-scrollbar { width: 5px; }
.mention-suggestions-list::-webkit-scrollbar-thumb { background-color: var(--color-border-interactive); border-radius: 3px; }

.mention-suggestions-list ul {
    list-style: none; padding: 0; margin: 0;
}

.mention-suggestions-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3); /* Padding ajustado */
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-subtle); /* Separador más tenue */
    transition: background-color 0.1s ease;
}
.mention-suggestions-list li:last-child { border-bottom: none; }
.mention-suggestions-list li:hover,
.mention-suggestions-list li.selected { /* Estilo hover/seleccionado */
    background-color: var(--color-bg-surface-hover);
}
.mention-suggestions-list li img.avatar-xs {
    width: 32px; /* Avatar sugerencia */
    height: 32px;
    flex-shrink: 0;
}
.mention-suggestions-list li .user-info strong { /* Nombre */
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}
.mention-suggestions-list li .user-info small { /* Rol */
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Mensaje Cargando/Vacío */
.mention-suggestions-list .suggestions-message {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: var(--font-size-sm);
}
.mention-suggestions-list .suggestions-message i { margin-right: var(--space-2); }

/* Estilo enlace mención FINAL en el post */
.post-item-content a.mention {
    color: var(--color-accent-primary); /* Azul */
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.post-item-content a.mention:hover {
    text-decoration: underline;
}
/* Ocultar el placeholder span que teníamos antes */
.post-item-content .mention-placeholder {
    display: none;
}

/* frontend/css/feed.css o components.css */

/* --- Estilos Trigger Ordenar Comentarios (en #post-details-modal) --- */
#post-comments-sort-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Para empujar la flecha a la derecha si el texto no ocupa todo */
    width: 100%;
    background: none;
    border: none;
    padding: var(--space-3) 0; /* Mismo padding que el h4 original */
    margin: 0 0 var(--space-2) 0; /* Espacio debajo antes de la lista */
    cursor: pointer;
    text-align: left;
}

#post-comments-sort-trigger h4 {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium); /* Un poco más de peso para indicar interacción */
    margin: 0; /* Resetear margen del h4 */
    flex-grow: 1; /* Permitir que el texto crezca */
}

#post-comments-sort-trigger i.fa-chevron-down {
    font-size: 0.8em;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease-in-out;
    margin-left: var(--space-2); /* Espacio antes de la flecha */
}

/* Opcional: Girar flecha cuando el modal de orden está abierto (se manejará con JS) */
#post-comments-sort-trigger.sort-options-open i.fa-chevron-down {
    transform: rotate(180deg);
}

/* --- Estilos Modal Ordenar Comentarios (#sort-comments-modal) --- */
/* Usa .bottom-sheet para estilo base, aquí ajustes */
#sort-comments-modal .modal-content {
    padding: 0; /* La lista interna manejará el padding */
}

.sort-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sort-options-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4); /* Buen padding para tocar fácil */
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-divider);
    transition: background-color 0.1s ease;
}

.sort-options-list li:last-child {
    border-bottom: none;
}

.sort-options-list li:hover {
    background-color: var(--color-bg-surface-hover);
}

.sort-options-list li span {
    flex-grow: 1; /* El texto ocupa el espacio */
}

.sort-options-list li i.fa-check {
    font-size: 1rem;
    color: var(--color-accent-primary); /* Color del check */
    margin-left: var(--space-4);
    visibility: hidden; /* Oculto por defecto */
}

.sort-options-list li.selected i.fa-check {
    visibility: visible; /* Visible si está seleccionado */
}

.sort-options-list li.selected span {
    font-weight: var(--font-weight-semibold); /* Resaltar texto seleccionado */
    color: var(--color-accent-primary);
}
.comment-item.comment-reply {
    /* border-top: 1px dashed var(--color-border-subtle); */ /* Opcional: separador visual para respuestas */
    /* padding-left: var(--space-4); */ /* Indentación ya se hace con margin-left JS */
}

.comment-footer .comment-action-btn {
    background: none; border: none; padding: 0; margin: 0;
    font-size: 0.85rem; /* Iconos un poco más pequeños */
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex; /* Cambiado a inline-flex */
    align-items: center;
    gap: 4px; /* Espacio entre icono y texto/contador */
    margin-right: var(--space-4); /* Espacio entre botones de acción */
}
.comment-footer .comment-action-btn:last-child {
    margin-right: 0;
}
.comment-footer .comment-action-btn:hover {
    color: var(--color-text-primary);
}
.comment-footer .comment-action-btn i {
    vertical-align: middle; /* Mejor alineación */
}
.comment-footer .comment-action-btn span:not(.comment-like-count) { /* Texto como "Responder" */
    font-size: var(--font-size-xs);
}
.comment-footer .comment-like-btn i.fas { color: var(--color-error); }
.comment-footer .comment-like-count { font-size: var(--font-size-xs); font-weight: normal; }
.comment-footer .comment-delete-btn { color: var(--color-text-tertiary); }
.comment-footer .comment-delete-btn:hover { color: var(--color-error); }


.comment-replies-summary {
    cursor: pointer;
    color: var(--color-accent-primary);
    font-size: var(--font-size-xs);
    margin-top: var(--space-2);
    display: inline-block; /* Para que no ocupe toda la línea */
}
.comment-replies-summary:hover {
    text-decoration: underline;
}
.comment-replies-summary i {
    margin-right: var(--space-1);
}

.comment-replies-list {
    list-style: none;
    padding: 0; /* Asegurar que no haya padding por defecto */
    margin-top: var(--space-2);
    /* Quitar padding-left del UL aquí, el marginLeft del LI lo manejará */
    padding-left: 0;
    /* Quitar el border-left del UL, se puede poner en el LI si se desea una línea por respuesta */
    /* border-left: 2px solid var(--color-border-subtle); */
}
.comment-replies-list .comment-item {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: none; /* Sin borde inferior para respuestas anidadas */
}
.comment-replies-list .comment-item:last-child {
    padding-bottom: 0;
}

.reply-input-container {
    display: none; /* Oculto por defecto */
    align-items: flex-end; /* Alinear items abajo si textarea crece */
    gap: var(--space-2);
    margin-top: var(--space-3); /* Más espacio arriba */
    padding-left: calc(32px + var(--space-3) + var(--space-2)); /* Indentación: avatar_padre + gap_padre + gap_interno */
    /* Contenedor del input y botón con borde redondeado */
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-full); /* Bordes muy redondeados */
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reply-input-container.active {
    display: flex; /* Mostrar como flex */
}
.reply-input-container:focus-within { /* Resaltar cuando el textarea tiene foco */
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 1px var(--color-accent-primary-glow);
}

.reply-input-container .current-user-reply-avatar {
    width: 28px; /* Avatar un poco más pequeño */
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: center; /* Centrar verticalmente con el input/botón */
    background-color: var(--color-bg-element-hover); /* Placeholder */
}

.reply-input-container textarea.reply-input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: none; /* Fondo transparente, el del contenedor ya se ve */
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    padding: var(--space-2) 0; /* Padding vertical para centrar texto en input de 1 línea */
    resize: none;
    line-height: var(--line-height-tight);
    max-height: 80px; /* Limitar altura si crece */
    overflow-y: auto;
    /* Ocultar scrollbar visualmente */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
.reply-input-container textarea.reply-input::-webkit-scrollbar { display: none; }
.reply-input-container textarea.reply-input::placeholder {
    color: var(--color-text-placeholder);
}

.reply-input-container .btn-send-reply {
    background: none;
    border: none;
    color: var(--color-accent-primary);
    font-size: 1.3rem; /* Tamaño icono avión */
    cursor: pointer;
    padding: var(--space-2); /* Área de clic */
    flex-shrink: 0;
    align-self: center; /* Centrar verticalmente */
    border-radius: 50%; /* Para efecto hover circular */
    transition: color var(--transition-duration-fast), background-color var(--transition-duration-fast);
}
.reply-input-container .btn-send-reply:disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    background-color: transparent;
}
.reply-input-container .btn-send-reply:not(:disabled):hover {
    background-color: var(--color-bg-element-hover); /* Fondo sutil al hover */
    color: var(--color-accent-primary-hover);
}

ul.comment-replies-list {
    list-style: none; padding: 0; margin-top: var(--space-2); padding-left: 0; 
    display: none; /* Por defecto, totalmente oculto */
}
ul.comment-replies-list.replies-visible {
    display: block !important; /* Forzar display block cuando está visible */
}
ul.comment-replies-list .no-replies-message,
ul.comment-replies-list .error-message { /* Estilos para mensajes dentro del UL */
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: var(--space-2) 0;
    text-align: left;
    font-style: italic;
    list-style-type: none;
}
ul.comment-replies-list .error-message { color: var(--color-error); }



/* Estilo para cuando un LI de comentario es un reply */
    .comment-item.comment-reply {
        /* border-top: 1px dashed var(--color-border-subtle); */ /* Opcional: separador visual para respuestas */
        /* padding-left: var(--space-4); */ /* Indentación ya se hace con margin-left JS */
    }

    /* Estilos para el footer del comentario (tiempo, like, responder) */
    .comment-footer .comment-action-btn {
        background: none; border: none; padding: 0; margin: 0;
        font-size: 0.85rem; /* Iconos un poco más pequeños */
        color: var(--color-text-secondary);
        cursor: pointer;
        display: inline-flex; /* Cambiado a inline-flex */
        align-items: center;
        gap: 4px; /* Espacio entre icono y texto/contador */
        margin-right: var(--space-4); /* Espacio entre botones de acción */
    }
    .comment-footer .comment-action-btn:last-child {
        margin-right: 0;
    }
    .comment-footer .comment-action-btn:hover {
        color: var(--color-text-primary);
    }
    .comment-footer .comment-action-btn i {
        vertical-align: middle; /* Mejor alineación */
    }
    .comment-footer .comment-action-btn span:not(.comment-like-count) { /* Texto como "Responder" */
        font-size: var(--font-size-xs);
    }
    .comment-footer .comment-like-btn i.fas { color: var(--color-error); } /* Corazón likeado */
    .comment-footer .comment-like-count { font-size: var(--font-size-xs); font-weight: normal; }
    .comment-footer .comment-delete-btn { color: var(--color-text-tertiary); }
    .comment-footer .comment-delete-btn:hover { color: var(--color-error); }


    /* Trigger "Ver/Ocultar Respuestas" */
    .comment-replies-summary {
        cursor: pointer;
        color: var(--color-accent-primary);
        font-size: var(--font-size-xs);
        margin-top: var(--space-2);
        display: inline-block; /* Para que no ocupe toda la línea */
    }
    .comment-replies-summary:hover {
        text-decoration: underline;
    }
    .comment-replies-summary i {
        margin-right: var(--space-1);
    }

    /* Contenedor UL de Respuestas */
    ul.comment-replies-list {
        list-style: none;
        padding: 0; /* Asegurar que no haya padding por defecto */
        margin-top: var(--space-2);
        /* Quitar padding-left del UL aquí, el marginLeft del LI lo manejará */
        padding-left: 0;
        /* Quitar el border-left del UL, se puede poner en el LI si se desea una línea por respuesta */
        /* border-left: 2px solid var(--color-border-subtle); */
        display: none; /* Por defecto, totalmente oculto */
    }
    ul.comment-replies-list.replies-visible {
        display: block !important; /* Forzar display block cuando está visible */
    }

    /* Estilo para mensajes "No hay respuestas" o "Error" dentro del UL */
    ul.comment-replies-list .no-replies-message,
    ul.comment-replies-list .error-message { /* Estilos para mensajes dentro del UL */
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        margin: var(--space-2) 0; /* Margen para separar de otros elementos */
        text-align: left; /* O 'center' si prefieres */
        font-style: italic;
        list-style-type: none; /* Asegurar que no tenga bullets */
    }
    ul.comment-replies-list .error-message { color: var(--color-error); }


    /* Input de Respuesta */
    .reply-input-container {
        display: none; /* Oculto por defecto */
        align-items: flex-end; /* Alinear items abajo si textarea crece */
        gap: var(--space-2);
        margin-top: var(--space-3); /* Más espacio arriba */
        /* Indentación: Avatar Padre + Gap Padre + Gap Interno
           (Si el padre ya tiene marginLeft, esto se suma. Ajustar según necesidad) */
        /* padding-left: calc(32px + var(--space-3) + var(--space-2)); */

        /* Contenedor del input y botón con borde redondeado */
        background-color: var(--color-bg-element);
        border: 1px solid var(--color-border-interactive);
        border-radius: var(--radius-full); /* Bordes muy redondeados */
        padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); /* Izq: avatar, Dcha: botón */
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .reply-input-container.active { /* Se añade con JS para mostrar */
        display: flex; /* Mostrar como flex */
    }
    .reply-input-container:focus-within { /* Resaltar cuando el textarea tiene foco */
        border-color: var(--color-accent-primary);
        box-shadow: 0 0 0 1px var(--color-accent-primary-glow);
    }

    .reply-input-container .current-user-reply-avatar {
        width: 28px; /* Avatar un poco más pequeño */
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        align-self: center; /* Centrar verticalmente con el input/botón */
        background-color: var(--color-bg-element-hover); /* Fondo placeholder */
    }

    .reply-input-container textarea.reply-input {
        flex-grow: 1;
        border: none;
        outline: none;
        background: none; /* Fondo transparente, el del contenedor ya se ve */
        color: var(--color-text-primary);
        font-size: var(--font-size-sm);
        padding: var(--space-2) 0; /* Padding vertical para centrar texto en input de 1 línea */
        resize: none;
        line-height: var(--line-height-tight);
        max-height: 80px; /* Limitar altura si crece */
        overflow-y: auto; /* Scroll si excede altura */
        /* Ocultar scrollbar visualmente */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }
    .reply-input-container textarea.reply-input::-webkit-scrollbar { display: none; }
    .reply-input-container textarea.reply-input::placeholder {
        color: var(--color-text-placeholder);
    }

    .reply-input-container .btn-send-reply {
        background: none;
        border: none;
        color: var(--color-accent-primary);
        font-size: 1.3rem; /* Tamaño icono avión */
        cursor: pointer;
        padding: var(--space-2); /* Área de clic */
        flex-shrink: 0;
        align-self: center; /* Centrar verticalmente */
        border-radius: 50%; /* Para efecto hover circular */
        transition: color var(--transition-duration-fast), background-color var(--transition-duration-fast);
    }
    .reply-input-container .btn-send-reply:disabled {
        color: var(--color-text-disabled);
        cursor: not-allowed;
        background-color: transparent;
    }
    .reply-input-container .btn-send-reply:not(:disabled):hover {
        background-color: var(--color-bg-element-hover); /* Fondo sutil al hover */
        color: var(--color-accent-primary-hover);
    }

    /* --- Estilos para el Preview Comment --- */
.post-item-preview-comment {
    display: flex;
    align-items: flex-start; /* Alinear avatar arriba si el texto es largo */
    gap: var(--space-2);
    padding: var(--space-2) 0; /* Padding vertical, sin horizontal (ya tiene el post) */
    margin-top: var(--space-3); /* Espacio sobre las acciones */
    border-top: 1px solid var(--color-border-subtle); /* Separador sutil */
    font-size: var(--font-size-sm);
    cursor: pointer; /* Indicar que es clickeable para abrir detalles */
}
.preview-comment-avatar {
    width: 24px; /* Avatar más pequeño */
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px; /* Ajuste vertical */
}
.preview-comment-content {
    flex-grow: 1;
    overflow: hidden;
}
.preview-comment-user {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-right: var(--space-1);
    /* Evitar que el nombre del usuario sea clickeable aquí, el área entera lo es */
}
.preview-comment-text {
    color: var(--color-text-secondary);
    line-height: var(--line-height-snug);
    /* No necesita white-space: pre-wrap aquí, backend ya envía con <br> */
    /* Truncamiento se hace en JS, pero CSS puede ayudar si es solo una línea */
    white-space: normal; /* Permitir wrap si el JS no truncó */
    word-break: break-word; /* Romper palabras */
}
/* Opcional: Estilo si se quiere que parezca un enlace para "Ver más" */
.post-item-preview-comment:hover .preview-comment-text {
    /* text-decoration: underline; */
    /* color: var(--color-accent-primary); */
}


/* frontend/css/feed.css */

/* Ajustes para el Feed integrado en Home */
.feed-list-integrated {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: transparent; /* O el color de fondo de tu app */
}

/* Ajuste para los items del post para que se vean bien en el Home */


/* En móvil, quizás quieras que ocupen todo el ancho y no parezcan tarjetas flotantes */
@media (max-width: 768px) {
    .post-item {
        border-radius: 0;
        margin-bottom: var(--space-2);
        box-shadow: none;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid var(--color-border-divider);
    }
}


/* frontend/css/feed.css */

/* 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/feed.css */

/* Contenedor del Mapa */
.feed-interactive-map-wrapper {
    position: relative;
    width: 100%;
    height: 180px; /* Altura generosa */
    background-color: #f0f0f0;
    overflow: hidden;
}

.feed-interactive-map {
    width: 100%;
    height: 100%;
}

/* Loader */
.map-route-loader {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 10;
    display: flex; gap: 8px; align-items: center;
    pointer-events: none;
}



.diamond-shape {
    width: 18px;
    height: 18px;
    background-color: #000; /* Negro */
    border: 3px solid #fff; /* Borde Blanco */
    transform: rotate(45deg); /* Girado 45 grados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Sombra */
    display: flex;
    justify-content: center;
    align-items: center;
}

.diamond-dot {
    width: 4px;
    height: 4px;
    background-color: #fff; /* Punto blanco centro */
    border-radius: 50%;
    /* Contrarrestar rotación si fuera necesario, pero es círculo */
}

/* --- MARCADOR INICIO (EL CÍRCULO BLANCO/NEGRO) --- */
.user-circle-marker {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-shape {
    width: 14px;
    height: 14px;
    background-color: #fff; /* Blanco centro */
    border: 4px solid #000; /* Borde Negro Grueso */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Ajustes tarjeta */
.post-item-shared-job {
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background-color: #fff;
    margin-top: 10px;
}
.job-preview-header {
    padding: 12px 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;
}
.job-preview-footer {
    padding: 10px 15px; border-top: 1px solid #eee; display: flex; justify-content: space-between; font-size: 0.85rem; color: #666;
    position: relative; z-index: 2; background: #fff;
}
/* --- ESTILOS FLOTANTES TIPO UBER --- */

.feed-interactive-map-wrapper.premium-style {
    position: relative; /* Necesario para que floten adentro */
}

/* Estilo base de la pastilla */
.floating-pill {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 5; /* Encima del mapa */
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

/* Precio (Arriba Derecha) */
.floating-pill.price-pill {
    top: 10px;
    right: 10px;
    color: #00c853 !important; /* Verde dinero vibrante */
    font-weight: 800; /* Extra bold */
    border: 1px solid rgba(0, 200, 83, 0.2); /* Borde sutil verde */
}

/* Ruta/Distrito (Abajo Izquierda) */
.floating-pill.route-pill {
    bottom: 10px;
    left: 10px;
    color: #555;
    font-weight: 500;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-pill.route-pill strong {
    font-weight: 800;
    color: #000;
}








/* --- ESTILOS FLOTANTES TIPO UBER (Imagen) --- */


/* Botón Enviar Blup (Azul y Redondo) */
.btn-send-blup-small {
    background-color: #0077FF; /* Azul iBlup */
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.btn-send-blup-small:hover {
    background-color: #005ecb;
}

.job-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}
.footer-user-info {
    color: #666;
    font-size: 0.85rem;
}

/* Etiqueta Pasaje (Abajo Derecha) */
.floating-pill.fare-pill {
    bottom: 10px;
    right: 10px;
    font-size: 0.75rem;
    color: #666;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #eee;
}


/* --- MARCADOR DESTINO (EL CONTENEDOR) --- */
/* Este lo controla el mapa. NO LE PONGAS ANIMACIÓN AQUÍ. */
.destination-diamond-marker {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Posición fija para tocar la línea */
    margin-top: -12px !important; 
    
    position: relative; 
    z-index: 10;
}

/* --- LA CAJA NEGRA (LO DE ADENTRO) --- */
/* Aquí sí aplicamos la animación, pero con cuidado de no romper la rotación */
.diamond-shape {
    width: 18px;
    height: 18px;
    background-color: #000;
    border: 3px solid #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3); 
    
    display: flex;
    justify-content: center;
    align-items: center;

    /* APLICAMOS LA ANIMACIÓN AQUÍ */
    animation: diamondBounce 2s ease-in-out infinite;
}

/* Animamos: Subir y Bajar + Mantener la Rotación */
/* IMPORTANTE: El orden importa. Primero trasladar (subir), luego rotar. */
@keyframes diamondBounce {
    0%, 100% { 
        transform: translateY(0px) rotate(45deg); 
    }
    50% { 
        transform: translateY(-8px) rotate(45deg); /* Sube 8px */
    }
}

.diamond-dot {
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 50%;
}

/* La sombra en el piso (separada para que no flote) */
.destination-diamond-marker::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, 8px); /* Fija en el suelo */
    width: 12px;
    height: 5px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    filter: blur(2px);
    z-index: -1;
    
    /* Animación de la sombra (se achica cuando el rombo sube) */
    animation: shadowBreathe 2s ease-in-out infinite;
}

@keyframes shadowBreathe {
    0%, 100% { transform: translate(-50%, 8px) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, 8px) scale(0.6); opacity: 0.2; }
}


/* Estado Expirado Elegante */
.btn-send-blup-small:disabled {
    background-color: #f3f4f6; /* Gris muy suave */
    color: #9ca3af; /* Texto gris medio */
    border: 1px solid #e5e7eb;
    cursor: not-allowed;
    box-shadow: none;
    font-size: 0.75rem;
    padding: 6px 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* Ocultar nombre redundante */
.job-preview-footer .footer-user-info {
    display: none; 
}

/* Alinear botón a la derecha (o llenar espacio si quieres) */
.job-preview-footer {
    justify-content: flex-end; /* Empuja el botón a la derecha */
    /* O usa 'center' si prefieres el botón al medio */
}

/* Hacer el botón más ancho para que sea fácil de tocar */
.btn-send-blup-small {
    width: 100%; /* Botón ancho completo se ve más moderno */
    justify-content: center; /* Texto centrado */
    padding: 10px 0; /* Más alto */
}



/* Nueva Etiqueta de Título (Arriba Izquierda) */
/* Título y Duración (Arriba Izquierda - ESTILO FIXED) */
.floating-pill.title-pill {
    top: 15px;
    left: 15px;
    
    /* CAMBIO: De Negro a Blanco Vidrio */
    background: rgba(255, 255, 255, 0.95); 
    color: #333; /* Texto gris oscuro */
    border: 1px solid rgba(0,0,0,0.05);
    
    font-size: 0.85rem;
    max-width: 65%; /* Un poco más ancho */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra suave */
}

.floating-pill.title-pill strong {
    color: #000; /* Título negro fuerte */
    font-weight: 700;
}

.floating-pill.title-pill .pill-separator {
    margin: 0 6px;
    color: #ccc;
}

.floating-pill.title-pill .duration-text {
    color: #666; /* Duración en gris */
    font-weight: 500;
    /* Opcional: icono de reloj pequeño con CSS */
}

.floating-pill.title-pill small {
    opacity: 0.9;
    font-weight: 400;
    white-space: nowrap;
}

/* Ajuste del Mapa para ser Full Card */
.feed-interactive-map-wrapper.premium-style {
    height: 180px; /* Un poco más alto para lucir */
    /* Como quitamos el header, el mapa debe tener bordes redondos arriba */
    border-top-left-radius: 16px; 
    border-top-right-radius: 16px;
}

/* El footer (botón) ahora solo tiene bordes redondos abajo */
.job-preview-footer {
    border-top: none; /* Se ve mejor limpio */
    padding: 0; /* Quitamos padding para que el botón toque los bordes si quieres */
    /* O mantenemos padding si prefieres el botón flotando */
    padding: 10px;
}

.btn-send-blup-small {
    width: 100%; /* Botón ancho completo */
    height: 44px;
    font-size: 1rem;
    border-radius: 12px; /* Redondeado suave */
    justify-content: center;
}

.job-preview-footer {
    padding: 12px; /* Un poco más de aire */
    background: #fff;
    border-top: none; /* Sin línea divisoria para que se funda con el mapa */
}

.btn-send-blup-small {
    width: 100%; /* Ocupar todo el ancho */
    height: 48px; /* Más alto, más fácil de tocar (dedo gordo friendly) */
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px; /* Curva suave moderna */
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25); /* Sombra azul brillante */
}

/* ================================================== */
/* === MAGIA: DOBLE TOQUE PARA DAR LIKE (INSTAGRAM) === */
/* ================================================== */

/* El contenedor de la imagen/video debe ser relativo para contener el corazón */
.post-item-media {
    position: relative;
    /* Ya tienes el border-radius y overflow hidden en tu CSS, así que no los repito */
}

/* El corazón gigante flotante (Inicialmente oculto) */
.heart-pop-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 80px; /* Gigante */
    color: rgba(255, 255, 255, 0.9); /* Blanco casi opaco */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para que resalte en fotos claras */
    pointer-events: none; /* Que el click pase a través de él */
    z-index: 10;
    opacity: 0;
}

/* La clase que dispara la animación con JS */
.heart-pop-animation.animate {
    animation: likeHeartPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* La animación: Sube rápido, rebota un poquito, y se desvanece hacia arriba */
@keyframes likeHeartPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -80%) scale(0.8); opacity: 0; }
}