/* =========================================
   WRENCH — Main Stylesheet
   Active variant: A — Light & Trustworthy (C background)
   ========================================= */

/* -----------------------------------------
   Fonts
   ----------------------------------------- */

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/Cormorant_Garamond/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Glacier';
    src: url('../fonts/glacier-font/GlacierFreeRegular-0vR6d.otf') format('opentype'),
         url('../fonts/glacier-font/GlacierFreeRegular-e90Jp.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 700;
    font-style: italic;
    font-display: swap;
}

/* -----------------------------------------
   Variables
   To switch variant, replace the values
   inside :root with the chosen variant's
   colors from notes.md
   ----------------------------------------- */

:root {
    --color-bg:          #FAFAFA;
    --color-bg-section:  #E8E8E8;
    --color-header:      #3B0764;
    --color-heading:     #3B0764;
    --color-accent:      #C4B5FD;
    --color-accent-text: #8B5CF6;
    --color-btn-primary: #3B0764;
    --color-btn-text:    #FFFFFF;
    --color-link:        #7C3AED;
    --color-text:        #1F2937;
    /* Visitas. Violet is theirs alone now: the calendar palette dropped
       it from the colours it hands out to jobs, so seeing it anywhere on
       the site means "esto es una visita". The dark one marks the day in
       the calendar grid, the plain one everything else. */
    --color-visita:      #7C3AED;
    --color-visita-dark: #4C1D95;
    /* Las estrellas de las valoraciones, en un solo lugar: el dorado se
       repetía a mano en cuatro hojas y en una quinta no estaba, así que
       el desglose por categoría salía del color del texto. */
    --color-star:        #F5A623;
    --color-star-empty:  #D8D2E8;
}

/* -----------------------------------------
   Reset & Base
   ----------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Scrollbars, site-wide. Before this only the chat thread and the
   calendar's upcoming list styled theirs, so the other ~20 scrollable
   areas fell back to the browser default.
   Declared on the universal selector rather than :root because only
   scrollbar-color inherits — scrollbar-width does not, so on :root
   alone every descendant would have gone back to "auto". */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'IBM Plex Sans', sans-serif;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main, .dashboard-wrapper {
    flex: 1;
}

a.site-name strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    line-height: 1;
}

a.site-name {
    text-decoration: none;
    color: inherit;
}

a.site-name:hover {
    color: var(--color-accent-text);
}

/* -----------------------------------------
   Flash message alerts
   ----------------------------------------- */

.alert {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.alert-error {
    background-color: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;
}

.alert-success {
    background-color: #f0fdf4;
    border-color: #16a34a;
    color: #15803d;
}

/* -----------------------------------------
   Toast notifications
   -----------------------------------------
   Reports how an action went without taking up space in the flow, the
   way the .alert blocks above did — those pushed the whole page down
   the moment a message arrived.

   .alert stays for the messages that are page content rather than
   notifications: form validation, and the standing account notices on
   the dashboard and the login page. */

.toast-stack {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Above the popups, which sit at 9999: a toast reporting what just
       happened is worth seeing even with one open. */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    width: min(90vw, 460px);
    /* The strip spans the top of the window, so it must not swallow
       clicks meant for the page. Each balloon takes them back. */
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    line-height: 1.35;
    border-left: 4px solid;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    cursor: default;
    /* Parked above its resting place; .toast--in drops it into view. */
    transform: translateY(calc(-100% - 1rem));
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.toast--in {
    transform: translateY(0);
    opacity: 1;
}

/* Same colours as the inline alerts, so the two read as one system
   while both exist. */
.toast--success {
    background-color: #f0fdf4;
    border-color: #16a34a;
    color: #15803d;
}

.toast--error {
    background-color: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transform: none;
        transition: opacity 0.2s ease;
    }
    .toast--in { transform: none; }
}

/* -----------------------------------------
   Header
   ----------------------------------------- */

header {
    background: linear-gradient(90deg, var(--color-btn-primary), var(--color-link));
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 2rem;
    position: relative;
    z-index: 300;
}

header span,
header strong {
    color: var(--color-btn-text);
    white-space: nowrap;
}

a.site-name strong {
    white-space: nowrap;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    display: inline-block;
    transform: scale(1.25);
    transform-origin: left center;
}

header nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-left: 1rem;
    min-width: 0;
}

header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

header nav ul li a {
    color: var(--color-btn-text);
    text-decoration: none;
}

header nav ul li a:hover {
    color: var(--color-accent-text);
}

header nav ul li button {
    background-color: transparent;
    color: var(--color-btn-text);
    border: 1px solid var(--color-btn-text);
    padding: 0.4rem 1rem;
    cursor: pointer;
}

header nav ul li button:hover {
    background-color: var(--color-accent);
    color: var(--color-header);
    border-color: var(--color-accent);
}

/* -----------------------------------------
   Search Section
   ----------------------------------------- */

main > section:first-child {
    background-color: transparent;
    margin: 2rem 15% 0 15%;
    border-bottom: 1px solid var(--color-accent);
    border-left: 1px solid var(--color-accent);
    border-right: 1px solid var(--color-accent);
    border-top: none;
}

main > section:first-child h1 {
    color: var(--color-heading);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

/* -----------------------------------------
   Profiles Grid
   ----------------------------------------- */

main > section:last-child {
    padding: 2rem;
    background-color: var(--color-bg);
    overflow: hidden;
    margin-top: 3rem;
}

main > section:last-child h2 {
    color: var(--color-heading);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.profiles-viewport {
    overflow: hidden;
    width: 100%;
}

.profiles-track {
    display: flex;
    width: 200%;
    animation: slide-profiles 10s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 5s;
}

@keyframes slide-profiles {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(-50%); }
    100% { transform: translateX(-50%); }
}

.profiles-track > ul {
    width: 50%;
    display: grid;
    list-style: none;
    grid-template-columns: repeat(5, 140px);
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

.profiles-track ul li img {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--color-accent);
    display: block;
    margin: 0 auto;
}

.profiles-track ul li img:hover {
    border-color: var(--color-btn-primary);
}

/* -----------------------------------------
   Footer
   ----------------------------------------- */

footer {
    background: linear-gradient(90deg, var(--color-btn-primary), var(--color-link));
    color: var(--color-btn-text);
    padding: 1rem 2rem;
    font-size: 0.85rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.footer-left {
    font-size: 0.85rem;
    color: var(--color-btn-text);
    margin: 0;
}

.footer-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

.footer-right a {
    color: var(--color-btn-text);
    text-decoration: none;
    font-size: 0.85rem;
}

.footer-right a:hover {
    color: var(--color-accent-text);
}

.footer-right p {
    color: var(--color-btn-text);
    font-size: 0.85rem;
    opacity: 0.6;
}

/* -----------------------------------------
   Job proposal action buttons (shared)
   ----------------------------------------- */

.btn-proposal {
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.btn-proposal--accept {
    background-color: var(--color-btn-primary);
    color: var(--color-btn-text);
}

.btn-proposal--accept:hover {
    background-color: var(--color-link);
    color: var(--color-btn-text);
}

.btn-proposal--refuse {
    background-color: transparent;
    color: #dc2626;
    border: 1px solid #dc2626;
}

.btn-proposal--refuse:hover {
    background-color: #dc2626;
    color: #fff;
}

/* -----------------------------------------
   Global popup overlay (shared across pages)
   ----------------------------------------- */

.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 500;
    justify-content: center;
    align-items: center;
}

.popup-overlay.open {
    display: flex;
}

/* -----------------------------------------
   Zoom cursors
   -----------------------------------------
   A magnifier with a + over anything that opens larger, and one with a
   - over anything that closes back down. The zoom-in/zoom-out keywords
   draw a bare + and - on most platforms, which says nothing about what
   the click will do. Drawn dark over a white halo so both read on a
   photo and on the lightbox's near-black backdrop, with the hotspot on
   the lens. The keyword stays as the fallback. */

:root {
    --cursor-zoom-in:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'><circle cx='10' cy='10' r='6.5'/><path d='M15 15l6 6'/><path d='M10 7v6M7 10h6'/></g><g fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'><circle cx='10' cy='10' r='6.5'/><path d='M15 15l6 6'/><path d='M10 7v6M7 10h6'/></g></svg>") 10 10, zoom-in;
    --cursor-zoom-out: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'><circle cx='10' cy='10' r='6.5'/><path d='M15 15l6 6'/><path d='M7 10h6'/></g><g fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'><circle cx='10' cy='10' r='6.5'/><path d='M15 15l6 6'/><path d='M7 10h6'/></g></svg>") 10 10, zoom-out;
}

/* -----------------------------------------
   Caja de búsqueda
   -----------------------------------------
   El recuadro que envuelve a las tabs y al panel que esté abierto. La
   usan results.php y profesiones.php; el home dibuja el suyo con la
   sección entera, que ya venía con borde. */

.search-box {
    display: flex;
    flex-direction: column;
    width: 1140px;
    max-width: 100%;
    box-sizing: border-box;
    border-left: 2px solid var(--color-accent);
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
}

.search-box .search-panel {
    padding: 1.25rem 1.5rem;
}

/* -----------------------------------------
   Los paneles, en una sola celda
   -----------------------------------------
   Los dos ocupan la misma celda de la grilla, así la caja mide siempre
   lo que el más alto de los dos y no cambia de tamaño al cambiar de
   tab. El que no está elegido se esconde pero sigue ocupando su lugar:
   con display:none la caja se achicaba y todo lo de abajo saltaba.

   visibility (y no opacity) también lo saca del orden de tabulación,
   así que no se llega con el teclado a un campo que no se ve. */

.search-panels {
    display: grid;
}

/* El display se declara acá y no cambia entre elegido y escondido. Un
   selector de dos clases le gana al `[hidden] { display: none }` que
   traen los navegadores, así que el panel escondido se sigue
   maquetando igual y mide lo mismo. Poniéndole `display: block` sólo
   cuando estaba escondido, el panel dejaba de ser flex y perdía los
   espacios entre sus filas: la caja se achicaba 40px al cambiar de tab,
   que es justo lo que esto viene a evitar. */
.search-panels > .search-panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.search-panels > .search-panel[hidden] {
    visibility: hidden;
    pointer-events: none;
}

/* -----------------------------------------
   Tabs de búsqueda
   -----------------------------------------
   La franja de pestañas que encabeza una caja de búsqueda. Vive acá y
   no en la hoja de una página porque la usan dos: results.php y
   profesiones.php, que son las dos mitades del mismo buscador.

   La seleccionada se marca con el degradé del sitio pintado como una
   banda de fondo arriba: un borde no puede llevar un degradé, y
   hacerlo así deja la pestaña exactamente igual de alta elegida que
   sin elegir, así que al cambiar de tab no se mueve nada. */

.search-tabs {
    display: flex;
    gap: 0.25rem;
}

/* Sirve tanto de botón (cuando la tab cambia algo en la misma página)
   como de link (cuando lleva a la otra mitad del buscador).

   Se reparten el ancho en partes iguales: son la cabecera de la caja
   que encabezan, no una fila de botones apoyada contra el margen
   izquierdo. */
.search-tab {
    flex: 1;
    text-align: center;
    background: none;
    /* Los costados los tienen todas, pero transparentes: sólo se pintan
       en la elegida. Poniéndoselos únicamente a esa, las tabs cambiaban
       de ancho 2px al cambiar de tab y todo se corría. */
    border: none;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding: 0.7rem 1.1rem;
    color: var(--color-accent-text);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    background-image: linear-gradient(90deg, var(--color-btn-primary), var(--color-link));
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 0 3px;
    transition: background-size 0.15s ease, color 0.15s ease;
}

.search-tab:hover {
    color: var(--color-heading);
}

.search-tab.active {
    color: var(--color-btn-primary);
    background-size: 100% 3px;
    border-left-color: var(--color-accent);
    border-right-color: var(--color-accent);
}

/* La tab de la punta no dibuja el costado que da al borde de la caja:
   la franja va pegada a él, así que ahí ya hay una línea y la del tab
   caía justo al lado — dos de 1px contiguas, que es el borde doble.
   Del lado de adentro sí la dibuja, así que la elegida sigue teniendo
   una línea de cada lado. */
.search-tabs .search-tab:first-child {
    border-left-color: transparent;
}

.search-tabs .search-tab:last-child {
    border-right-color: transparent;
}

/* -----------------------------------------
   Profile popup
   -----------------------------------------
   Holds profile.php in embed mode at 80% of the window, so a profile can
   be read without leaving the page you are on. Used by chat.php,
   trabajo.php and results.php, which is why it lives here rather than in
   any one of their stylesheets. The frame carries the profile's own
   scrolling, so the popup itself never scrolls. */

.perfil-popup {
    position: relative;
    width: 80vw;
    height: 80vh;
    background-color: var(--color-bg);
    border: 1px solid var(--color-accent);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

/* results.php opens the larger one: browsing there is about studying a
   portfolio, not glancing at it in the middle of something else. */
.perfil-popup--wide {
    width: 90vw;
    height: 90vh;
}

.perfil-popup-frame {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.perfil-popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    /* Over the frame's own content, which paints its whole area. */
    z-index: 1;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: 1.4rem;
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-accent);
    cursor: pointer;
}

/* Hidden while a photo is open full size inside the frame: the two
   sit in the same corner, and this one paints over the frame. */
.perfil-overlay--photo-open .perfil-popup-close {
    display: none;
}

.perfil-popup-close:hover {
    border-color: var(--color-btn-primary);
    color: var(--color-btn-primary);
}

/* -----------------------------------------
   User greeting (header — all pages)
   ----------------------------------------- */

.user-greeting {
    color: var(--color-btn-text);
    font-size: 0.83rem;
    line-height: normal;
    background-color: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.4rem 1rem;
    display: inline-block;
}

.user-greeting strong {
    color: var(--color-accent);
}

/* -----------------------------------------
   Notification bell (global — all pages)
   ----------------------------------------- */

.notif-bell-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Prevent header nav hover styles bleeding into bell wrapper */
.notif-bell-wrapper:hover {
    background: none !important;
    color: var(--color-btn-text) !important;
    text-decoration: none !important;
}

/* Dropdown resets — scoped tightly, no wildcard */
.notif-dropdown {
    color: var(--color-text);
    background-color: var(--color-bg);
}

.notif-item:hover {
    background-color: #ddd6f3 !important;
}

.notif-item--unread {
    background-color: #ede7ff !important;
}

.notif-item--unread:hover {
    background-color: #ddd6f3 !important;
}

.notif-bell-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-btn-text);
    font-size: 1.4rem;
    padding: 0.2rem 0.4rem;
    position: relative;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease;
    font-family: 'IBM Plex Sans', sans-serif;
}

/* Force monochrome white bell across all browsers */
.notif-bell-btn::first-line {
    color: var(--color-btn-text);
}

.notif-bell-btn {
    -webkit-text-fill-color: var(--color-btn-text);
}

.notif-bell-btn:hover {
    transform: scale(1.15);
    background: none !important;
    border: none !important;
    color: var(--color-btn-text) !important;
}

.notif-bell-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #dc2626;
    color: #fff;
    font-size: 0.55rem;
    font-weight: bold;
    min-width: 13px;
    height: 13px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    pointer-events: none;
}

.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-accent);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.notif-dropdown.open {
    display: block;
}

.notif-dropdown-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-accent);
}

.notif-dropdown-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-heading);
}

.notif-mark-all {
    font-size: 0.75rem;
    color: var(--color-link);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    padding: 0;
}

.notif-mark-all:hover {
    text-decoration: underline;
}

.notif-list {
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-accent);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 0.15s;
    cursor: pointer;
    background-color: #f5f0ff;
}

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

.notif-item:hover {
    background-color: #ede7ff;
}

.notif-item--unread {
    background-color: #ede7ff;
}

.notif-item--unread .notif-item-message {
    font-weight: bold;
    color: var(--color-heading);
}

.notif-icon {
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 0.1rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-btn-primary);
    color: var(--color-btn-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.notif-item-message {
    font-size: 0.85rem;
    color: var(--color-heading) !important;
    line-height: 1.4;
}

.notif-item-time {
    font-size: 0.72rem;
    color: var(--color-link) !important;
    margin-top: 0.2rem;
}

.notif-dropdown-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--color-accent);
    text-align: center;
}

.notif-dropdown-footer a {
    font-size: 0.8rem;
    color: var(--color-link);
    text-decoration: none;
}

.notif-dropdown-footer a:hover {
    text-decoration: underline;
}

.notif-empty {
    padding: 1.25rem 1rem;
    font-size: 0.85rem;
    color: var(--color-accent-text);
    font-style: italic;
    text-align: center;
}

/* -----------------------------------------
   Global popup buttons (shared across pages)
   ----------------------------------------- */

/* -----------------------------------------
   La confirmación del sitio
   -----------------------------------------
   La caja que reemplaza al confirm() del navegador. Misma forma que los
   demás popups: fondo del sitio, la franja violeta arriba y los botones
   abajo a la derecha. */

.veralia-confirm {
    background-color: var(--color-bg);
    width: 90%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 3px solid var(--color-btn-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    /* Parada chica y transparente; --in la trae. */
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.veralia-confirm--in {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .veralia-confirm { transform: none; transition: opacity 0.12s ease; }
    .veralia-confirm--in { transform: none; }
}

.veralia-confirm h3 {
    font-size: 1rem;
    color: var(--color-heading);
    margin: 0;
}

.veralia-confirm-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.veralia-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.btn-popup-cancel {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-text);
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn-popup-cancel:hover {
    border-color: var(--color-btn-primary);
    color: var(--color-btn-primary);
}

.btn-popup-danger {
    background-color: #dc2626;
    color: #fff;
    border: none;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-popup-danger:hover:not(:disabled) {
    background-color: #b91c1c;
}

.btn-popup-danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-popup-primary {
    background-color: var(--color-btn-primary);
    color: var(--color-btn-text);
    border: none;
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn-popup-primary:hover:not(:disabled) {
    background-color: var(--color-link);
}

.btn-popup-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Google Maps link */
.result-map-link {
    color: var(--color-link);
    text-decoration: none;
    font-size: inherit;
}

.result-map-link::before {
    content: '⌖ ';
    font-style: normal;
}

.result-map-link:hover {
    text-decoration: underline;
}

/* =========================================
   Toggle switch (global)
   ========================================= */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--color-accent);
    transition: 0.3s;
    border-radius: 22px;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

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

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

/* -----------------------------------------
   Profession multi-picker (search forms)
   ----------------------------------------- */

.prof-picker {
    position: relative;
    width: 100%;
}

.prof-picker-input {
    /* A <select> and a text <input> with identical padding/border/
       font-size still don't render at exactly the same height (native
       widget chrome), so the height is pinned explicitly here and on
       its sibling <select> elements instead of relying on that match. */
    height: 2.15rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-accent);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: 'IBM Plex Sans', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.prof-picker-input:focus {
    outline: none;
    border-color: var(--color-btn-primary);
}

.prof-picker-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--color-bg);
    border: 1px solid var(--color-accent);
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.prof-picker-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-accent);
    font-size: 0.85rem;
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--color-text);
    cursor: pointer;
}

.prof-picker-option:last-child {
    border-bottom: none;
}

.prof-picker-option:hover {
    background-color: var(--color-bg-section, #f3f0f8);
    color: var(--color-btn-primary);
}

.prof-picker-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Only take up space (and push things below it) once there's actually
   a tag in it — otherwise this empty box's own margin was throwing
   off vertical alignment with sibling fields that have no such box. */
.prof-picker-tags:not(:empty) {
    margin-top: 0.5rem;
}

/* Adentro de la caja de búsqueda, al revés: el lugar de la primera fila
   de profesiones elegidas está reservado desde el principio. Si no, la
   caja crecía al elegir la primera y empujaba los resultados. */
.search-panel .prof-picker-tags {
    min-height: 1.7rem;
    margin-top: 0.5rem;
}

.prof-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-btn-primary);
    color: var(--color-btn-primary);
    background-color: var(--color-bg);
    font-size: 0.78rem;
    white-space: nowrap;
}

.prof-tag-chip button {
    background: none;
    border: none;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}