/* ============================================================
   Correprop Gestor — estilo clásico inspirado en archlinux.org
   Barra superior oscura con menús, acento azul #1793d1,
   contenido sobrio sobre fondo con patrón de viviendas.
   ============================================================ */
:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --ink: #222c38;
    --muted: #6b7480;
    --line: #d9dde3;
    --brand: #1793d1;      /* azul Arch */
    --brand-d: #0f77ab;
    --bar: #333333;        /* barra superior */
    --bar-ink: #dddddd;
    --ok: #16a34a;
    --warn: #d97706;
    --danger: #dc2626;
    --radius: 4px;
    --shadow: 0 1px 2px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg) url('pattern.svg') repeat;
    font-size: 14px;
    display: flex; flex-direction: column;
}
a { color: var(--brand-d); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0; font-weight: 600; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; font-weight: 600; }
.muted { color: var(--muted); }
.mt { margin-top: 1rem; }

/* ------------------------------------------------------------
   Logo: "correprop" grande con "Gestor" al costado inferior derecho
   ------------------------------------------------------------ */
.logo {
    position: relative; display: inline-block;
    font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
    color: #fff; text-decoration: none; line-height: 1;
    padding-right: 2.9rem; padding-bottom: .5rem;
}
.logo:hover { text-decoration: none; }
.logo .logo-sub {
    position: absolute; right: 0; bottom: 0;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    color: var(--brand); font-style: italic;
}
.logo.logo-dark { color: var(--ink); }

/* ------------------------------------------------------------
   Barra superior clásica (archbar) con menús desplegables
   ------------------------------------------------------------ */
.archbar { background: var(--bar); box-shadow: 0 2px 4px rgba(0,0,0,.25); position: sticky; top: 0; z-index: 50; }
.archbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 1rem;
    display: flex; align-items: center; gap: 1.25rem; min-height: 52px;
}
.mainnav { display: flex; align-items: stretch; flex: 1; }
.mainnav > .nav-item { position: relative; display: flex; }
.mainnav a.nav-link {
    color: var(--bar-ink); font-weight: 600; font-size: .88rem;
    padding: 1rem .8rem; display: flex; align-items: center; gap: .3rem;
}
.mainnav a.nav-link:hover { color: #fff; text-decoration: none; background: #404040; }
.mainnav a.nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--brand); }
.caret { font-size: .6rem; opacity: .7; }

.dropdown {
    display: none; position: absolute; top: 100%; left: 0; min-width: 210px;
    background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand);
    box-shadow: 0 6px 16px rgba(0,0,0,.18); padding: .35rem 0; z-index: 60;
}
.nav-item:hover .dropdown, .nav-item.open .dropdown { display: block; }
.dropdown a { display: block; padding: .55rem .95rem; color: var(--ink); font-size: .86rem; }
.dropdown a:hover { background: #eef6fb; color: var(--brand-d); text-decoration: none; }
.dropdown .sep { border-top: 1px solid var(--line); margin: .35rem 0; }

.user-box { display: flex; align-items: center; gap: .7rem; color: var(--bar-ink); font-size: .82rem; }
.user-box .user-rol { color: var(--brand); font-weight: 600; }
.user-box a { color: var(--bar-ink); }
.user-box a:hover { color: #fff; }

/* Encabezado de página (título bajo la barra) */
.pagehead { background: rgba(255,255,255,.85); border-bottom: 1px solid var(--line); }
.pagehead-inner {
    max-width: 1200px; margin: 0 auto; padding: .8rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pagehead h1 { color: var(--brand-d); }

/* Contenido */
.content { max-width: 1200px; width: 100%; margin: 0 auto; padding: 1.4rem 1rem 2.5rem; flex: 1; }

/* Pie clásico */
.appfooter { background: var(--bar); color: #9aa2ab; font-size: .78rem; margin-top: auto; }
.appfooter-inner { max-width: 1200px; margin: 0 auto; padding: .8rem 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.appfooter a { color: var(--bar-ink); }

/* ------------------------------------------------------------
   Cards y grillas
   ------------------------------------------------------------ */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.15rem 1.25rem; margin-bottom: 1.25rem;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; gap: .75rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card > h2, .card-head h2 { border-bottom: 2px solid #e7eaee; padding-bottom: .45rem; }
.card-head h2 { border-bottom: none; padding-bottom: 0; }
.card-head { border-bottom: 2px solid #e7eaee; padding-bottom: .5rem; margin-bottom: .9rem; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.grid-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 900px) { .grid-2, .grid-2c { grid-template-columns: 1fr; } }

/* Tarjetas de estadísticas */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.card.stat { text-align: center; padding: 1rem; border-top: 3px solid var(--brand); margin-bottom: 0; }
.stat-num { font-size: 1.75rem; font-weight: 700; color: var(--brand-d); }
.stat-label { color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    background: #fff; border: 1px solid #c6ccd4; color: var(--ink);
    padding: .48rem .85rem; border-radius: var(--radius); font-size: .85rem; font-weight: 600;
    text-decoration: none; transition: .12s;
}
.btn:hover { background: #f0f2f5; text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand-d); color: #fff; }
.btn-primary:hover { background: var(--brand-d); }
.btn-danger { background: #fff; border-color: #f3b4b4; color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: .28rem .55rem; font-size: .78rem; }
.btn-block { width: 100%; justify-content: center; }
.inline { display: inline; }
.right { margin-left: auto; }

/* Alertas */
.alert { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.alert-success { background: #f0fdf4; color: #14532d; border-color: #bbe7c8; }
.alert-error { background: #fef2f2; color: #991b1b; border-color: #f3c1c1; }
.alert-warn { background: #fffbeb; color: #92400e; border-color: #f5dfa8; }

/* ------------------------------------------------------------
   Tablas
   ------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f7f8fa; border-bottom: 2px solid var(--line); }
.table tbody tr:hover { background: #f9fbfd; }
.table-kv th { width: 140px; color: var(--muted); }
.table-docs td { padding: .4rem .45rem; }
.table-docs select, .table-docs input { font-size: .8rem; padding: .3rem; }
.w-90 { width: 90px; }

/* Badges */
.badge {
    display: inline-block; padding: .14rem .5rem; border-radius: 3px;
    font-size: .72rem; font-weight: 600; background: #e8f4fb; color: #0f5e8c;
}
.badge-ok { background: #ecfdf5; color: #065f46; }
.badge-alta, .badge.badge-alta { background: #fef2f2; color: #991b1b; }
.badge-media { background: #fffbeb; color: #92400e; }
.badge-baja { background: #f1f5f9; color: #475569; }
.badge-portal { background: #eefbf3; color: #0c6b3d; border: 1px dashed #79c79b; }
.badge-etapa { position: static; }
/* Etapas v18. Análisis en violeta/índigo, captura en azul, compraventa en
   ámbar/verde, salidas del flujo en gris. */
.etapa-propuesto     { background: #f5f3ff; color: #5b21b6; }
.etapa-lista_captura { background: #eef2ff; color: #3730a3; }
.etapa-precaptura    { background: #eff6ff; color: #1e40af; }
.etapa-capturada     { background: #fefce8; color: #854d0e; }
.etapa-cierre        { background: #fff7ed; color: #9a3412; }
.etapa-cerrada       { background: #ecfdf5; color: #065f46; }
.etapa-finalizado    { background: #f1f5f9; color: #334155; }
.etapa-recontactar   { background: #ecfeff; color: #155e75; }
.etapa-descartada    { background: #f3f4f6; color: #6b7280; }
.badge-archivada { background: #e2e8f0; color: #334155; }
/* Solicitud abierta al gerente (revisión, contacto o cierre) */
.badge-revisar { background: #dc2626; color: #fff; font-weight: 700; }

/* ── Semáforo de los 5 requisitos del acta ──────────────────────────────
   Un punto por requisito, en el orden de Propiedad::REQUISITOS. El detalle
   de lo que falta va en el title de la celda. */
.semaforo { line-height: 1; white-space: nowrap; }
.req-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 3px; vertical-align: middle;
}
.req-ok    { background: #16a34a; }
.req-falta { background: #d9dde3; box-shadow: inset 0 0 0 1px #c3c9d2; }

/* Chip con las iniciales del responsable */
.chip-resp {
    display: inline-block; width: 22px; height: 22px; line-height: 22px;
    border-radius: 50%; background: var(--brand); color: #fff;
    font-size: .68rem; font-weight: 700; text-align: center;
    margin-right: .35rem; vertical-align: middle;
}

/* Barra de asignación masiva bajo el listado */
.barra-masiva {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    margin-top: .8rem; padding: .8rem 1rem;
}
.barra-masiva select { min-width: 190px; }

/* Casilla con etiqueta dentro de la barra de filtros */
.chk-inline {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .85rem; color: var(--muted); white-space: nowrap;
}

/* ── Semáforo en la ficha: los 5 requisitos con su nombre ──────────────── */
.semaforo-ficha {
    display: flex; flex-wrap: wrap; gap: .3rem .9rem;
    margin: .5rem 0 0; font-size: .78rem; color: var(--muted);
}
.req-item { display: inline-flex; align-items: center; white-space: nowrap; }

/* ── Solicitudes al gerente ────────────────────────────────────────────── */
.solicitud-abierta {
    border-left: 3px solid var(--danger); background: #fff8f8;
    padding: .7rem .9rem; margin-bottom: .8rem; border-radius: 0 3px 3px 0;
}
.solicitud-abierta p { margin: 0 0 .4rem; }
.solicitud-abierta blockquote {
    margin: 0 0 .6rem; padding-left: .7rem; border-left: 2px solid var(--line);
    color: var(--ink); font-size: .9rem;
}
.resolver-form { display: flex; flex-direction: column; gap: .35rem; max-width: 520px; }
.resolver-form label { font-size: .78rem; color: var(--muted); }
.resolver-form textarea, .resolver-form select { width: 100%; }
.resolver-acciones { display: flex; gap: .4rem; margin-top: .2rem; }

.solicitudes-nuevas { display: flex; flex-wrap: wrap; gap: .5rem; }
.solicitud-nueva {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .5rem .7rem; min-width: 230px; flex: 1 1 230px;
}
.solicitud-nueva > summary { cursor: pointer; font-size: .85rem; font-weight: 600; }
.solicitud-nueva form { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.solicitud-nueva label { font-size: .78rem; color: var(--muted); }
.solicitud-nueva textarea { width: 100%; }
.solicitudes-hist { margin-top: .9rem; font-size: .85rem; }
.solicitudes-hist > summary { cursor: pointer; color: var(--muted); }

/* Leyenda de etapas del listado de propiedades: plegada por defecto para no
   competir con la tabla; al abrirla, una fila por etapa en el orden del flujo. */
.leyenda-etapas { margin: -.4rem 0 1rem; font-size: .82rem; }
.leyenda-etapas > summary {
    cursor: pointer; color: var(--muted); display: inline-block;
    padding: .2rem .1rem; user-select: none;
}
.leyenda-etapas > summary:hover { color: var(--brand-d); }
.leyenda-etapas ul {
    list-style: none; margin: .5rem 0 0; padding: .75rem .9rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .4rem .9rem;
}
.leyenda-etapas li { display: flex; align-items: baseline; gap: .45rem; }
.leyenda-etapas li .badge { flex: 0 0 auto; }

/* Requisitos para enviar la propiedad al gerente (v17): el botón queda
   deshabilitado y al lado se listan los datos que faltan. */
.requisitos-revision {
    margin-top: .5rem; padding: .6rem .8rem; font-size: .84rem;
    background: #fffbeb; border: 1px solid #f5dfa8; border-radius: var(--radius);
    color: #92400e; display: inline-block; max-width: 46rem;
}
.requisitos-revision ul { margin: .3rem 0 .55rem; padding-left: 1.1rem; }
.requisitos-revision li { margin: .1rem 0; }
/* Casilla de confirmación del propietario dentro de la grilla del formulario. */
.check-confirmo { gap: .3rem; }
.check-confirmo > span { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.check-confirmo input[type="checkbox"] { width: auto; margin: 0; }

/* Señales de completitud del formulario de datos: verde = con datos, rojo = sin datos.
   El punto va en la esquina superior derecha de cada campo (los labels son flex-columna). */
form[data-senales] label { position: relative; }
.senal { position: absolute; top: .2rem; right: 0; width: .55rem; height: .55rem; border-radius: 50%; }
.senal-ok    { background: #16a34a; box-shadow: 0 0 0 2px #dcfce7; }
.senal-falta { background: #dc2626; box-shadow: 0 0 0 2px #fee2e2; }

/* Comentarios al costado del formulario de edición */
.comentarios-lateral .card { position: sticky; top: 1rem; }
.comentarios-hilo { max-height: 55vh; overflow-y: auto; padding-right: .25rem; }

/* Panel "Enviar a precaptura" (candidatas, solo gerente) */
.envio-precaptura { border-left: 4px solid #7c3aed; }

/* Leyenda del propietario en el perfil de la propiedad. Rojo = "Propietario no
   existe"; azul = registrado. Pincharla lleva a propietario.php: los datos del
   propietario y las gestiones de cada medio de contacto en tablas (el estado
   activo/inactivo de cada medio lo cambia solo el gerente). */
.propietario-panel { padding: .7rem 1.25rem; }
/* La vista del propietario (registro de contactos) se distingue con un
   fondo levemente más oscuro; conserva el patrón de viviendas. */
body.body-oscuro { background-color: #e6e9ed; }
.leyenda-no-existe { color: var(--danger); text-decoration: underline dotted; text-underline-offset: 3px; }
.leyenda-nombre { color: var(--brand-d); text-decoration: underline dotted; text-underline-offset: 3px; }
a.leyenda-no-existe:hover { color: var(--danger); }
.badge-inactivo { background: #fef2f2; color: #991b1b; }
.medios-lista li { display: block; }
.medio-inactivo-txt { opacity: .65; }
.w-fecha { width: 130px; }
.w-usuario { width: 150px; }

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.form-grid .col-2 { grid-column: span 2; }
.form-grid .col-3 { grid-column: span 3; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } .form-grid .col-2, .form-grid .col-3 { grid-column: span 1; } }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--muted); font-weight: 600; }
label.check { flex-direction: row; align-items: center; gap: .5rem; }
input, select, textarea {
    font: inherit; padding: .48rem .6rem; border: 1px solid #c6ccd4;
    border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #bfe3f5; border-color: var(--brand); }
input[type="checkbox"] { width: auto; }
.form-actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.inline-form input, .inline-form select { width: auto; }

/* Toolbar / filtros */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.filters input, .filters select { width: auto; }

/* ------------------------------------------------------------
   Listas y línea de tiempo
   ------------------------------------------------------------ */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.timeline { list-style: none; margin: 1rem 0 0; padding: 0; }
.timeline li { border-left: 2px solid var(--line); padding: 0 0 1rem 1rem; margin-left: .5rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.timeline-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }

/* ------------------------------------------------------------
   Listado de propiedades (tabla)
   ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.table-props td.acciones { text-align: right; }
.table-props td.acciones form { margin-left: .25rem; }
.table-props td.acciones select { width: auto; font-size: .8rem; padding: .3rem; }
.no-img { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); }
.no-img.tall { height: 200px; border: 1px dashed var(--line); border-radius: var(--radius); }
.prop-price { font-weight: 700; color: var(--brand-d); margin: .4rem 0; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* Aviso del optimizador de imágenes junto al input de archivo */
.nota-imagen { display: block; width: 100%; color: var(--muted); font-size: .78rem; }

/* Detalle */
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.detail-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.detail-actions select { width: auto; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius); }
.price { color: var(--brand-d); }

/* Administrador de imágenes */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.img-item { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.img-item.is-cover { outline: 2px solid var(--brand); }
.img-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.img-item figcaption { display: flex; align-items: center; justify-content: space-between; padding: .35rem; gap: .35rem; }

/* Pestañas */
.tab-nav { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 1.25rem; }
.tab { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: .6rem .9rem; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .85rem; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand-d); border-bottom-color: var(--brand); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Coloreo por estado de fila */
tr.estado-ok, tr.estado-hecha { background: #f0fdf4; }
tr.estado-en_proceso { background: #fffbeb; }
tr.estado-cancelada { opacity: .55; }

/* Filas-formulario (documentos / etapas de cierre) */
.row-edit {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1.3fr 1.2fr 1.2fr .9fr .5fr auto;
    gap: .5rem; align-items: center;
    padding: .45rem .3rem; border-bottom: 1px solid var(--line);
}
.row-edit.cierre { grid-template-columns: .4fr 2fr 1.3fr 1.2fr 2fr auto; }
.row-edit.plantilla { grid-template-columns: .5fr 2.6fr 1.1fr 1.4fr 1fr .7fr .5fr auto; align-items: start; }
.row-edit.plantilla.head { align-items: center; }
.row-edit.head { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--line); background: #f7f8fa; }
.row-edit select, .row-edit input { width: 100%; font-size: .8rem; padding: .3rem .4rem; }
.row-edit label.check { justify-content: center; }
.row-edit.estado-ok { background: #f0fdf4; }
.row-edit.estado-en_proceso { background: #fffbeb; }
@media (max-width: 760px) { .row-edit, .row-edit.cierre { grid-template-columns: 1fr 1fr; } .row-edit.head { display: none; } }

/* ------------------------------------------------------------
   Gráficos (SVG generados por js/charts.js)
   ------------------------------------------------------------ */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .5rem; font-size: .78rem; color: var(--muted); }
.chart-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.chart-empty { color: var(--muted); text-align: center; padding: 1.5rem 0; }

/* Barra de progreso (checklist de cierre, portal) */
.progress { background: #e8ebef; border-radius: 999px; height: 10px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s; }
.progress.ok > span { background: var(--ok); }
.progress-label { font-size: .78rem; color: var(--muted); margin-top: .25rem; }

/* ------------------------------------------------------------
   Login y páginas independientes (fondo oscuro con patrón)
   ------------------------------------------------------------ */
.login-body {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: #23282e url('pattern-dark.svg') repeat;
}
.login-card { background: #fff; padding: 2rem; border-radius: 6px; border-top: 4px solid var(--brand); width: 380px; max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: .9rem; }
.login-card .logo { align-self: center; font-size: 2rem; padding-right: 3.4rem; }
.login-card .logo .logo-sub { font-size: .85rem; }
.login-card .muted { text-align: center; margin: 0 0 .5rem; }
details summary { cursor: pointer; color: var(--brand-d); font-weight: 600; }

/* ------------------------------------------------------------
   Portal del cliente (página pública, solo lectura)
   ------------------------------------------------------------ */
.portal-body { background: var(--bg) url('pattern.svg') repeat; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.portal-bar { background: var(--bar); }
.portal-bar-inner { max-width: 980px; margin: 0 auto; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-bar .who { color: var(--bar-ink); font-size: .85rem; text-align: right; }
.portal-content { max-width: 980px; width: 100%; margin: 0 auto; padding: 1.5rem 1rem 3rem; flex: 1; }
.portal-prop { margin-bottom: 1.5rem; }
.portal-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.portal-head img { width: 220px; height: 150px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.portal-head .no-img { width: 220px; height: 150px; border: 1px dashed var(--line); border-radius: var(--radius); }
.portal-datos { flex: 1; min-width: 240px; }
.portal-datos h2 { border: none; padding: 0; }
.portal-empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }

/* ── v14: badges de tipo de gestión, links y sugerencias de duplicados ── */
.badge-gestion-correo   { background: #e8f4fb; color: #0f5e8c; }
.badge-gestion-llamada  { background: #f5f3ff; color: #5b21b6; }
.badge-gestion-whatsapp { background: #ecfdf5; color: #065f46; }
.badge-gestion-otro     { background: #f1f5f9; color: #475569; }
.link-inactivo { opacity: .55; }
.sugerencia-duplicado {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); list-style: none; margin: 0; padding: .25rem 0;
}
.sugerencia-duplicado a { display: block; padding: .4rem .7rem; font-size: .82rem; color: var(--ink); }
.sugerencia-duplicado a:hover { background: #eef6fb; color: var(--brand-d); text-decoration: none; }