/* ==========================================================================
   Cannis — pantallas de cuenta y buscadores (web.pages.*)
   --------------------------------------------------------------------------
   Las pantallas con datos y formularios —buscadores, planes, alta de ONG,
   cartillas por profesión y todo lo de "mi cuenta"— siguen con su markup:
   tienen consultas, validaciones y estados que no conviene tocar de prepo.

   Lo que cambia es cómo se ven. Esta hoja vuelve a pintar las clases que ese
   markup ya usa (`.card`, `.profile-card`, `.table-row`, `.form-group`…) con
   los tokens de marca de institucional.css, que se carga antes.

   Todo va scopeado bajo `.w-paginas` para que no se cruce con el sitio
   institucional ni con el panel.

   Cuando una pantalla se reescriba con el sistema `w-*`, se le sacan estas
   clases y listo: esta hoja es un puente, no un destino.
   ========================================================================== */

.w-paginas {
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

/* ===== Contenedor y cabecera de página ===== */

.w-paginas .container,
.w-paginas .form-container,
.w-paginas .professionals-container {
    width: 100%;
    max-width: var(--w-max);
    margin: 0 auto;
    padding-inline: var(--w-gutter);
}

.w-paginas .header,
.w-paginas .profile-header,
.w-paginas .professionals-header {
    margin-bottom: var(--w-s5);
}

.w-paginas .title,
.w-paginas .profile-name {
    font-family: var(--w-font-titulos);
    margin: 0 0 var(--w-s3);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.14;
}

.w-paginas .subtitle,
.w-paginas .profile-subtitle,
.w-paginas .professionals-subtitle {
    margin: 0;
    max-width: 62ch;
    color: var(--w-text-soft);
    font-size: clamp(1.02rem, 2vw, 1.15rem);
}

.w-paginas .profile-header-content { display: flex; align-items: center; gap: var(--w-s4); flex-wrap: wrap; }
.w-paginas .profile-avatar,
.w-paginas .avatar-initials,
.w-paginas .table-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--w-menta);
    color: var(--w-ink);
    font-size: 1.5rem;
    font-weight: 700;
    overflow: hidden;
}
.w-paginas .table-avatar { width: 46px; height: 46px; font-size: 1.05rem; }
.w-paginas .profile-avatar img,
.w-paginas .table-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Grillas de tarjetas ===== */

.w-paginas .cards-grid,
.w-paginas .profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--w-s3);
}
.w-paginas .profile-grid { grid-template-columns: repeat(2, 1fr); }

.w-paginas .card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--w-transicion), transform var(--w-transicion);
}
.w-paginas .card:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }

/* El resplandor de la 2.0 sobraba: la tarjeta ya se levanta al pasar. */
.w-paginas .card-glow,
.w-paginas .row-glow { display: none; }

.w-paginas .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: var(--w-s3);
    border-radius: 14px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-size: 1.2rem;
}
/* `.card-content` y `.profile-header-info` son envoltorios sin estilo propio:
   se declaran para que quede claro que su falta de reglas es a propósito. */
.w-paginas .card-content { display: flex; flex-direction: column; flex: 1; }
.w-paginas .profile-header-info { min-width: 0; }

.w-paginas .card-title { font-family: var(--w-font-titulos); margin: 0 0 var(--w-s2); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.w-paginas .card-description { margin: 0; color: var(--w-text-soft); font-size: 0.95rem; }

/* ===== Fichas de datos ===== */

.w-paginas .profile-card {
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
.w-paginas .profile-card-header {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    margin-bottom: var(--w-s4);
}
.w-paginas .profile-card-title { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.w-paginas .profile-card-body { display: grid; gap: var(--w-s3); }

.w-paginas .info-group { display: grid; gap: var(--w-s1); }
.w-paginas .info-group.full-width, .w-paginas .info-group.full { grid-column: 1 / -1; }
.w-paginas .info-label {
    color: var(--w-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.w-paginas .info-value { color: var(--w-text); font-size: 1rem; }

.w-paginas .detail-item { display: flex; align-items: baseline; gap: var(--w-s2); color: var(--w-text-soft); }
/* El "•" que separa dos datos en la misma línea. En la 2.0 se pintaba como
   una regla horizontal y quedaba colgando entre renglones. */
.w-paginas .detail-separator { color: var(--w-muted); opacity: 0.6; }
.w-paginas .table-details { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-s2); }

.w-paginas .status-ok { color: var(--w-menta); font-weight: 700; }
.w-paginas .status-missing { color: #ffb4a2; font-weight: 700; }
.w-paginas .field-helper { color: var(--w-muted); font-size: 0.84rem; }

.w-paginas .verified-badge,
.w-paginas .plan-badge,
.w-paginas .results-counter {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s1);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-size: 0.78rem;
    font-weight: 700;
}
/* El contador no es una etiqueta de la primera card: es el encabezado de la
   lista. Con el margen se lee como tal. */
.w-paginas .results-counter {
    background: var(--w-surface-2);
    color: var(--w-text-soft);
    margin-bottom: var(--w-s4);
}

/* ===== Listas (ONGs, direcciones, profesionales) ===== */

/* ===== El directorio: las tarjetas de "Descubrí" =====
   Antes era una lista de bandas horizontales. Ahora son tarjetas: se escanean
   mejor, la foto tiene lugar y la acción queda al pie, separada del dato.

   Ojo con el JS: `buscar_ongs` y `buscar_profesionales` filtran en el
   navegador y tocan el `display` del contenedor. Hoy escriben `''` —devuelven
   el control a la hoja—, pero durante un tiempo escribieron `'flex'` y eso
   convertía esta grilla en una fila horizontal que desbordaba la pantalla. Si
   tocás uno de los dos lados, mirá el otro. */
.w-paginas .ong-list,
.w-paginas .address-list,
.w-paginas .professionals-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--w-s3);
}

.w-paginas .ong-item,
.w-paginas .address-item,
.w-paginas .table-row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--w-s3);
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    overflow: hidden;
    transition: border-color var(--w-transicion), background var(--w-transicion);
}
.w-paginas .ong-item:hover,
.w-paginas .address-item:hover,
.w-paginas .table-row:hover { border-color: var(--w-border-fuerte); background: var(--w-surface-2); }

/* El resplandor vuelve, pero quieto: un halo de menta arriba a la derecha que
   aparece al pasar por encima. Sin movimiento de layout, como el resto. */
.w-paginas .row-glow {
    display: block;
    position: absolute;
    inset: -40% -40% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 242, 156, 0.16), transparent 68%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--w-transicion);
}
.w-paginas .table-row:hover .row-glow { opacity: 1; }

/* El avatar, con anillo: el círculo menta sólido competía con los botones. */
.w-paginas .table-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    box-shadow: 0 0 0 1px var(--w-border-fuerte);
}
.w-paginas .table-avatar .avatar-initials {
    width: 100%;
    height: 100%;
    background: transparent;
    color: inherit;
    font-size: inherit;
}
.w-paginas .verified-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: inline-flex;
    width: 20px;
    height: 20px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--w-menta);
    color: var(--w-ink);
    font-size: 0.62rem;
}

.w-paginas .ong-icon,
.w-paginas .address-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
}
.w-paginas .ong-content, .w-paginas .address-content, .w-paginas .table-info { min-width: 0; flex: 1; }
.w-paginas .ong-name, .w-paginas .table-name, .w-paginas .address-primary {
    font-family: var(--w-font-titulos);
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.25;
    margin-bottom: var(--w-s2);
}
.w-paginas .ong-role, .w-paginas .address-secondary { color: var(--w-muted); font-size: 0.88rem; }

/* Los datos van como chips apilados, uno por renglón: el separador "•" era de
   la lista horizontal y en una tarjeta sobra. */
.w-paginas .table-details { display: flex; flex-direction: column; align-items: flex-start; gap: var(--w-s2); }
.w-paginas .detail-separator { display: none; }
.w-paginas .table-details .detail-item {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s2);
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--w-text-soft);
    font-size: 0.82rem;
    line-height: 1.35;
}
.w-paginas .table-details .detail-item i { color: var(--w-menta); font-size: 0.8em; }

/* La acción, al pie y a ancho completo, separada por una línea. */
.w-paginas .table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s2);
    margin-top: auto;
    padding-top: var(--w-s3);
    border-top: 1px solid var(--w-border);
}
.w-paginas .table-actions .btn-primary { width: 100%; justify-content: center; }

/* ===== Buscadores ===== */

.w-paginas .search-section { margin-bottom: var(--w-s4); }
.w-paginas .search-bar {
    position: relative;
    display: flex;
    align-items: center;
}
.w-paginas .search-icon {
    position: absolute;
    left: var(--w-s3);
    color: var(--w-muted);
    pointer-events: none;
}
.w-paginas .search-input {
    width: 100%;
    padding: 0.95rem 1.15rem 0.95rem 2.9rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: var(--w-surface);
    color: var(--w-text);
    font: inherit;
}
.w-paginas .search-input::placeholder { color: var(--w-muted); }
.w-paginas .search-input:focus { outline: none; border-color: var(--w-menta); background: var(--w-surface-2); }

.w-paginas .filters-row { display: flex; flex-wrap: wrap; gap: var(--w-s2); align-items: center; margin-top: var(--w-s3); }
.w-paginas .filter-select {
    padding: 0.7rem 1rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: var(--w-surface);
    color: var(--w-text);
    font: inherit;
    font-size: 0.92rem;
}
.w-paginas .filter-select option { background: var(--w-navy-2); color: var(--w-text); }
.w-paginas .filter-reset {
    display: inline-flex;
    align-items: center;
    gap: var(--w-s1);
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: transparent;
    color: var(--w-menta);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--w-transicion);
}
.w-paginas .filter-reset:hover { border-color: var(--w-menta); }

/* ===== Formularios ===== */

.w-paginas .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--w-s3); }
.w-paginas .form-group { display: grid; gap: var(--w-s1); }
.w-paginas .form-group.full, .w-paginas .form-group.full-width { grid-column: 1 / -1; }
.w-paginas .form-group label {
    color: var(--w-text-soft);
    font-size: 0.86rem;
    font-weight: 600;
}
.w-paginas .form-group input,
.w-paginas .form-group select,
.w-paginas .form-group textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio-sm);
    background: var(--w-surface);
    color: var(--w-text);
    font: inherit;
}
.w-paginas .form-group input::placeholder,
.w-paginas .form-group textarea::placeholder { color: var(--w-muted); }
.w-paginas .form-group input:focus,
.w-paginas .form-group select:focus,
.w-paginas .form-group textarea:focus {
    outline: none;
    border-color: var(--w-menta);
    background: var(--w-surface-2);
}
.w-paginas .form-group select option { background: var(--w-navy-2); color: var(--w-text); }
.w-paginas .form-actions { display: flex; flex-wrap: wrap; gap: var(--w-s2); margin-top: var(--w-s4); }

/* ===== Botones (los del markup viejo) ===== */

.w-paginas .btn-primary,
.w-paginas .btn-secondary,
.w-paginas .btn-edit,
.w-paginas .btn-details,
.w-paginas .btn-icon,
.w-paginas button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--w-s2);
    padding: 0.8rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--w-transicion), background var(--w-transicion),
                border-color var(--w-transicion), color var(--w-transicion);
}
.w-paginas .btn-primary,
.w-paginas button[type="submit"] { background: var(--w-menta); color: var(--w-ink); }
.w-paginas .btn-primary:hover,
.w-paginas button[type="submit"]:hover { background: #6cf7ad; }

.w-paginas .btn-secondary,
.w-paginas .btn-edit,
.w-paginas .btn-details {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--w-text);
}
.w-paginas .btn-secondary:hover,
.w-paginas .btn-edit:hover,
.w-paginas .btn-details:hover { border-color: var(--w-menta); color: var(--w-menta); }

.w-paginas .btn-edit, .w-paginas .btn-details { padding: 0.55rem 1.05rem; font-size: 0.86rem; }
.w-paginas .btn-icon { width: 42px; height: 42px; padding: 0; border-color: var(--w-border); }

/* ===== Planes ===== */

.w-paginas .billing-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: 999px;
    background: var(--w-surface);
}
.w-paginas .billing-option {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--w-text-soft);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.w-paginas .billing-option.active { background: var(--w-menta); color: var(--w-ink); }

.w-paginas .plan-price { display: flex; align-items: baseline; gap: var(--w-s1); margin-block: var(--w-s3); }
.w-paginas .price-value { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; }
.w-paginas .price-period { color: var(--w-muted); font-size: 0.9rem; }

.w-paginas .plan-features, .w-paginas .features-list { display: grid; gap: var(--w-s2); margin-block: var(--w-s3); }
.w-paginas .feature { display: flex; align-items: flex-start; gap: var(--w-s2); color: var(--w-text-soft); font-size: 0.94rem; }
.w-paginas .feature i { color: var(--w-menta); margin-top: 0.25em; }
.w-paginas .feature.included i { color: var(--w-menta); }

.w-paginas .selected-plan-card {
    padding: var(--w-s4);
    border: 1px solid var(--w-border-fuerte);
    border-radius: var(--w-radio);
    background: var(--w-menta-suave-2);
}

/* ===== Vacíos ===== */

.w-paginas .empty-state {
    padding: clamp(2.5rem, 6vw, 4rem);
    border: 1px dashed var(--w-border);
    border-radius: var(--w-radio);
    text-align: center;
}
.w-paginas .empty-icon { margin-bottom: var(--w-s3); color: var(--w-muted); font-size: 2.2rem; }
.w-paginas .empty-title { margin: 0 0 var(--w-s2); font-size: 1.15rem; font-weight: 700; }
.w-paginas .empty-description { margin: 0 auto; max-width: 46ch; color: var(--w-text-soft); font-size: 0.95rem; }

/* ===== Modales =====

   ⛔ `.modal` y `.modal-overlay` NO comparten regla. Parecen lo mismo y no lo son:

   - `.modal` es un CONTENEDOR que vive siempre en el DOM y arranca CERRADO. Lo
     abre el JS poniéndole `.active` (`public/js/app/profile-edit.js:22`), y
     lleva adentro su propio `.modal-overlay` como zona de cierre.
   - `.modal-overlay` suelto es la raíz de un modal que se monta y se desmonta:
     si está en el DOM, está abierto.

   Cuando los dos compartían una sola regla con `display: flex`, `.w-paginas
   .modal` (0,2,0) le ganaba al `display: none` del componente (0,1,0) y el
   modal de /pacientes/datos quedaba SIEMPRE abierto: `position: fixed` a
   pantalla completa, dos capas de velo superpuestas y `z-index: 120` encima de
   todo. La pantalla se veía apagada y no se podía tocar nada.

   Es el mismo patrón de la NC-01 (`docs/calidad/auditoria/no-conformidades.md`):
   una regla de la hoja compartida que le gana en peso a la del componente. No
   vuelvas a unificar estos dos selectores. */

.w-paginas .modal,
.w-paginas .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    align-items: center;
    justify-content: center;
    padding: var(--w-gutter);
    background: rgba(4, 10, 20, 0.7);
    backdrop-filter: blur(6px);
}

/* El overlay suelto está abierto por el solo hecho de estar en el DOM. */
.w-paginas .modal-overlay { display: flex; }

/* El contenedor arranca cerrado; lo abre el JS.

   El `[hidden]` de acá es sólo la mitad de la garantía: la otra mitad viaja
   en el <head> de la propia vista, porque esta hoja se cachea y puede llegar
   vieja. Ver el @push('styles') de datos_pacientes.blade.php. */
.w-paginas .modal { display: none; }
.w-paginas .modal.active { display: flex; }
.w-paginas .modal[hidden] { display: none; }

/* El overlay que vive DENTRO de un `.modal` es sólo la zona de cierre: el velo
   ya lo pone el contenedor, así que acá no se repite ni el fondo ni el blur. */
.w-paginas .modal .modal-overlay {
    position: absolute;
    z-index: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
}
.w-paginas .modal .modal-content { position: relative; z-index: 1; }
.w-paginas .modal-content {
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-navy-2);
}
.w-paginas .modal-medium .modal-content { max-width: 720px; }
.w-paginas .modal-header {
    display: flex;
    align-items: center;
    gap: var(--w-s3);
    padding: var(--w-s4);
    border-bottom: 1px solid var(--w-border);
}
.w-paginas .modal-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.w-paginas .modal-close {
    margin-left: auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--w-border);
    border-radius: 50%;
    background: transparent;
    color: var(--w-text);
    font-size: 1.1rem;
    cursor: pointer;
}
.w-paginas .modal-body { padding: var(--w-s4); }
.w-paginas .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--w-s2);
    padding: var(--w-s4);
    border-top: 1px solid var(--w-border);
}

/* ===== Integraciones en las pantallas viejas ===== */

.w-paginas .partners-section { margin-top: var(--w-s6); text-align: center; }
.w-paginas .partners-title {
    margin-bottom: var(--w-s3);
    color: var(--w-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.w-paginas .partners-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--w-s4); }
.w-paginas .partners-logos img {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* ===== Responsive ===== */

@media (max-width: 1000px) {
    .w-paginas .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .w-paginas .cards-grid,
    .w-paginas .profile-grid,
    .w-paginas .form-grid { grid-template-columns: 1fr; }
    .w-paginas .btn-primary,
    .w-paginas .btn-secondary,
    .w-paginas button[type="submit"] { width: 100%; }
}