/* =========================================================================
   CE Notes - hoja de estilos unica
   Inspiracion: Finder + Apple Notes. Bordes finos, esquinas redondeadas,
   poco ruido visual, acento rosa/magenta.

   Estrategia responsive: en escritorio se ven tres columnas; por debajo de
   860px se muestra una sola, elegida por [data-mobile-view] que escribe el
   servidor. Ver src/Views/layout.php.
   ========================================================================= */

:root {
    --accent:          #ff3366;
    --accent-hover:    #e62e5c;
    --accent-soft:     rgba(255, 51, 102, 0.10);
    --accent-softer:   rgba(255, 51, 102, 0.06);

    --bg-app:          #f2f2f4;
    --bg-pane:         #ffffff;
    --bg-sidebar:      #f7f7f8;
    --bg-subtle:       #f4f4f6;
    --bg-hover:        rgba(0, 0, 0, 0.035);

    --border:          #e4e4e7;
    --border-strong:   #d6d6da;

    --text:            #1c1c1e;
    --text-2:          #66666b;
    --text-3:          #9a9aa0;

    --danger:          #d0342c;
    --success:         #1f9254;

    --radius-sm:       6px;
    --radius:          10px;
    --radius-lg:       14px;

    --shadow-pop:      0 10px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --col-groups:      264px;
    --col-sections:    288px;

    --pane-pad:        34px;
    --topbar-height:   52px;
}

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

/* El atributo hidden tiene que ganar siempre.
 *
 * La regla del navegador es [hidden] { display: none }, con especificidad de un
 * solo atributo: cualquier `.mi-clase { display: flex }` la pisa y el elemento
 * queda visible aunque el JS le ponga hidden. Paso exactamente eso con el
 * filtro de grupos, que ocultaba los items sin que se notara. */
[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
}

/* ------------------------------------------------- rebote elastico de iOS

   Instalada en la pantalla de inicio se veia que TODA la pantalla, encabezado
   incluido, se movia para arriba y para abajo al scrollear. No es que el
   encabezado no estuviera fijo: lo que rebotaba era el documento entero.

   Pasan dos cosas, y hacen falta las dos lineas de defensa:

     1. iOS aplica su rebote elastico al documento aunque no tenga nada que
        scrollear. overscroll-behavior: none lo desactiva.
     2. Cuando un panel de adentro llega al final, el scroll se ENCADENA al
        documento y lo arrastra. overscroll-behavior: contain en cada panel
        corta esa propagacion.

   El scroll real siempre lo hacen los paneles de adentro, nunca el documento:
   por eso body puede ir en overflow hidden.                                  */

html {
    overscroll-behavior: none;
}

body {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Login y error no usan el layout de paneles: son una tarjeta centrada. Se les
   devuelve el scroll del documento, que body apago para el resto de la app. */
.body--centered {
    overflow-y: auto;
}

.suggest,
.pane__scroll,
.checkbox-grid,
.group-list,
.doc,
.timeline,
.summary,
.modal__dialog {
    overscroll-behavior: contain;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
}

p {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
}

code.code {
    padding: 1px 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* ------------------------------------------------------------- layout 3 col */

/* Una sola grilla para todo:
 *
 *   ┌────────────┬──────────────────────────────────┐
 *   │            │  buscador global                 │
 *   │  Grupos    ├───────────────┬──────────────────┤
 *   │ Económicos │ panel grupo   │ contenido        │
 *   └────────────┴───────────────┴──────────────────┘
 *
 * La columna de grupos arranca desde arriba (ocupa las dos filas) y el
 * buscador cubre solo las dos columnas de la derecha.
 */
/* ------------------------------------------------------- areas seguras (PWA)

   Instalada en la pantalla de inicio, la aplicacion ocupa la pantalla entera:
   ya no estan las barras de Safari que antes separaban el contenido del notch
   y de la barra del gesto de inicio. Estas variables valen 0 en un navegador
   normal y en escritorio, asi que se pueden usar sin condicionar nada.        */

:root {
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
}

.shell {
    display: grid;
    grid-template-columns: var(--col-groups) var(--col-sections) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    /* --banner-height lo define body[data-impersonating]: la banda de solo
       lectura ocupa alto real y el shell se acorta, sin tapar nada. */
    height: calc(100vh - var(--banner-height, 0px));
    height: calc(100dvh - var(--banner-height, 0px));
    /* Reserva la franja del notch sin restarla del alto: con box-sizing
       border-box el padding ya va adentro, y restarlo ademas dejaria una banda
       en blanco del mismo alto abajo de todo. */
    padding-top: var(--safe-top);
    /* En horizontal, el notch se come un costado: sin esto la columna de
       grupos queda parcialmente abajo del recorte. */
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    overflow: hidden;
}

.pane--groups {
    grid-column: 1;
    grid-row: 2;
}

.pane--sections {
    grid-column: 2;
    grid-row: 2;
}

.pane--content {
    grid-column: 3;
    grid-row: 2;
}

/* Layout ancho: sin columna del medio. Lo usan las pantallas que no pertenecen
   a un grupo economico, como los resultados de la busqueda global. */
.shell[data-layout="wide"] .pane--sections {
    display: none;
}

.shell[data-layout="wide"] .pane--content {
    grid-column: 2 / -1;
}

/* Al no estar la columna del medio, el panel de contenido pasa a medir casi el
   doble, y un .doc de 860 dejaba la mitad de la pantalla vacia.
 
   Estas pantallas son listados y tablas que cruzan todos los grupos
   —recordatorios, eventos, usuarios, la matriz de permisos, la busqueda—, no
   texto corrido: el ancho las mejora en lugar de complicarlas de leer. El tope
   sigue estando para que en un monitor muy ancho las filas no se estiren
   indefinidamente. */
.shell[data-layout="wide"] .doc {
    max-width: 1280px;
}

/* ------------------------------------------------ barra superior + buscador */

.topbar {
    grid-column: 2 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: var(--topbar-height);
    padding: 9px 16px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------- navegacion principal */

.topnav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.topnav__item {
    padding: 5px 10px;
    font-size: 13px;
    color: var(--text-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* El numerito del asistente: cuantas preguntas esperan respuesta. */
.topnav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    margin-left: 5px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
}

.topnav__item:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.topnav__item.is-active {
    color: var(--accent);
    font-weight: 500;
    background: var(--accent-soft);
}

/* ---------------------------------------------------------------- logo */

/* Celda propia de la grilla: comparte la fila 1 con el buscador, asi los dos
   bordes inferiores quedan alineados sin calcular alturas. */
.brand {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--topbar-height);
    padding: 0 14px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.brand__mark {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
}

.brand__name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--text);
}

.brand:hover .brand__name {
    color: var(--accent);
}

.global-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Se queda con el espacio que sobra a la derecha de la navegacion y se
       centra dentro de el. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 10px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.global-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.global-search__icon {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: var(--text-3);
}

.global-search__input {
    flex: 1;
    min-width: 0;
    padding: 7px 0;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: transparent;
    border: 0;
    outline: none;
}

.global-search__input::-webkit-search-cancel-button {
    display: none;
}

/* Check "Solo en <grupo>" */
.global-search__scope {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 210px;
    padding-left: 8px;
    font-size: 11.5px;
    color: var(--text-2);
    white-space: nowrap;
    border-left: 1px solid var(--border);
    cursor: default;
}

.global-search__scope input {
    margin: 0;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.global-search__scope span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search__scope strong {
    font-weight: 600;
    color: var(--text);
}

.global-search__scope:has(input:checked) {
    color: var(--accent);
}

.global-search__scope:has(input:checked) strong {
    color: var(--accent);
}

.suggest__scope {
    padding: 6px 10px 8px;
    font-size: 11.5px;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.suggest__scope strong {
    color: var(--accent);
    font-weight: 600;
}

.doc__meta-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.global-search__hint {
    flex: 0 0 auto;
    padding: 1px 6px;
    font-family: var(--font);
    font-size: 11px;
    color: var(--text-3);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.global-search:focus-within .global-search__hint {
    display: none;
}

.global-search__clear {
    flex: 0 0 auto;
    padding: 0 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--text-3);
    background: none;
    border: 0;
    cursor: pointer;
}

.global-search__clear:hover {
    color: var(--danger);
}

/* --------------------------------------------------- desplegable de sugerencias */

.suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: min(70dvh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.suggest[hidden] {
    display: none;
}

.suggest__status,
.suggest__empty {
    padding: 12px 10px;
    font-size: 13px;
    color: var(--text-3);
}

.suggest__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.suggest__more {
    display: block;
    margin-top: 4px;
    padding: 9px 10px;
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
    color: var(--accent);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.suggest__more:hover,
.suggest__more.is-selected {
    background: var(--accent-soft);
}

/* --------------------------------------------------------- fila de resultado */

.result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
}

.result:hover,
.result.is-selected {
    background: var(--bg-hover);
}

.result.is-selected {
    background: var(--accent-soft);
}

.result__icon {
    flex: 0 0 auto;
    width: 18px;
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.result__body {
    min-width: 0;
    flex: 1;
}

.result__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.result__title {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result__type {
    flex: 0 0 auto;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-2);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}

.result.is-selected .result__type {
    color: var(--accent);
    background: #fff;
    border-color: transparent;
}

.result__subtitle {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result__snippet {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result mark {
    padding: 0 1px;
    color: var(--accent);
    font-weight: 600;
    background: var(--accent-soft);
    border-radius: 3px;
}

/* --------------------------------------------------- filtros de /search */

.filters {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 6px;
    padding: 12px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filters__label {
    flex: 0 0 auto;
    width: 116px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12.5px;
    color: var(--text-2);
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.chip-filter:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.chip-filter.is-active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 500;
}

.chip-filter__count {
    padding: 0 5px;
    font-size: 11px;
    color: var(--text-3);
    background: var(--bg-subtle);
    border-radius: 999px;
}

.chip-filter.is-active .chip-filter__count {
    color: var(--accent);
    background: #fff;
}

.filters__form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filters__select {
    padding: 4px 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
}

.filters__select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.filters__apply {
    padding: 4px 10px;
    font-size: 12.5px;
}

.filters__clear {
    font-size: 12.5px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Resultados en la pagina /search: mas aire que en el desplegable. */
.result-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.result-list .result {
    padding: 11px 12px;
    border: 1px solid transparent;
}

.result-list .result:hover {
    border-color: var(--border);
    background: var(--bg-subtle);
}

.doc__section-count {
    margin-left: 2px;
    padding: 1px 7px;
    font-size: 10.5px;
    color: var(--text-2);
    background: var(--bg-subtle);
    border-radius: 999px;
}

kbd {
    padding: 1px 5px;
    font-family: var(--font);
    font-size: 11.5px;
    color: var(--text-2);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* Entrada a la que se llego desde un resultado de busqueda. */
.entry.is-highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--border);
}

.pane--groups {
    background: var(--bg-sidebar);
}

.pane--sections {
    background: var(--bg-pane);
}

.pane--content {
    background: var(--bg-pane);
    border-right: 0;
    overflow: hidden;
}

.pane__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 10px;
    min-height: 48px;
}

.pane__title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pane__title--group {
    font-size: 15px;
    color: var(--text);
}

.pane__search {
    padding: 0 14px 10px;
}

.pane__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* El ultimo item de la lista tiene que quedar arriba de la barra del gesto
       de inicio, o no se puede tocar. */
    padding: 4px 8px calc(16px + var(--safe-bottom));
}

.pane__footer {
    padding: 8px;
    border-top: 1px solid var(--border);
}

.pane__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
}

/* Enlace "volver": solo visible en el layout de una columna. */
.mobile-back {
    display: none;
}

/* ------------------------------------------------------------------ inputs */

.search-input {
    width: 100%;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
}

.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field {
    display: block;
    margin-bottom: 14px;
    min-width: 0;
}

.field--inline {
    margin-bottom: 0;
}

.field--grow {
    flex: 1;
}

.field-row {
    display: flex;
    gap: 12px;
}

.field-row > .field {
    flex: 1;
}

.field__label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

.field__optional {
    font-weight: 400;
    color: var(--text-3);
}

.field__input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
}

.field__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__input--area {
    resize: vertical;
    min-height: 68px;
}

.fieldset {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13.5px;
    cursor: default;
}

.checkbox input {
    margin: 3px 0 0;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 2px 12px;
    max-height: 168px;
    overflow-y: auto;
    padding: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------- botones */

.button {
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-pane);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.button:hover:not(:disabled) {
    background: var(--bg-subtle);
}

.button:disabled {
    opacity: 0.45;
    cursor: default;
}

.button--primary {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.button--primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.button--danger {
    color: var(--danger);
    border-color: var(--border-strong);
}

.button--danger:hover:not(:disabled) {
    background: rgba(208, 52, 44, 0.07);
    border-color: rgba(208, 52, 44, 0.35);
}

.button--plain {
    background: transparent;
}

.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    color: var(--accent);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.icon-button:hover {
    background: var(--accent-soft);
}

.ghost-button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
    color: var(--accent);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ghost-button:hover {
    background: var(--accent-soft);
}

.link-button {
    padding: 0;
    font-size: inherit;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* -------------------------------------------------- columna 1: grupos */

.group-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px calc(16px + var(--safe-bottom));
}

.group-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 9px;
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    cursor: default;
}

.group-item:hover {
    background: var(--bg-hover);
}

.group-item.is-active {
    background: var(--accent-soft);
}

.group-item__dot {
    width: 7px;
    height: 7px;
    margin-top: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--border-strong);
}

.group-item.is-active .group-item__dot {
    background: var(--accent);
}

.group-item__body {
    min-width: 0;
}

.group-item__name {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-item.is-active .group-item__name {
    color: var(--accent);
}

.group-item__meta {
    display: block;
    font-size: 11.5px;
    color: var(--text-3);
}

/* ------------------------------------------------ columna 2: secciones */

.section-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 9px 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.section-label--readonly {
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}

.section-label__link {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
}

.section-label__link:hover {
    text-decoration: underline;
}

.section-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
}

.section-item:hover {
    background: var(--bg-hover);
}

.section-item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}

.section-item__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-item--thread .section-item__label {
    white-space: normal;
    overflow: visible;
}

.badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    font-size: 11px;
    color: var(--text-2);
    background: var(--bg-subtle);
    border-radius: 999px;
}

.section-item.is-active .badge {
    color: var(--accent);
    background: #fff;
}

.status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-3);
}

.status-dot--closed {
    background: var(--success);
}

/* --------------------------------------------- columna 3: documento */

.doc {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 26px var(--pane-pad) 60px;
    max-width: 860px;
}

.doc__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.doc__heading {
    min-width: 0;
}

.doc__title {
    font-size: 26px;
    letter-spacing: -0.01em;
}

.doc__meta {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-3);
}

.doc__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.doc__body {
    font-size: 14.5px;
    color: var(--text);
}

/* Dos parrafos seguidos necesitan aire. Antes no hacia falta porque el
   pre-wrap de arriba convertia los saltos del codigo fuente en separacion
   visual; sin el, quedaban pegados. */
.doc__body + .doc__body {
    margin-top: 12px;
}

/* Respetar los saltos de linea es la excepcion, no la regla: vale para el texto
   que escribio una persona y se guardo tal cual (la descripcion de un grupo),
   no para el texto fijo de una plantilla. Cuando estaba en .doc__body, las
   paginas con parrafos escritos en el PHP mostraban la sangria del codigo
   fuente metida adentro del parrafo. */
.doc__body--typed {
    white-space: pre-wrap;
}

.doc__body--muted {
    color: var(--text-3);
}

.doc__section {
    margin-top: 30px;
}

.doc__section-title {
    padding-bottom: 7px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
}

.doc__footer {
    margin-top: 36px;
    padding-top: 12px;
    font-size: 12px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--text-3);
}

.breadcrumb a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumb__sep {
    color: var(--border-strong);
}

.breadcrumb__current {
    color: var(--text-2);
}

/* ------------------------------------------------------------- tarjetas */

.card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card:hover {
    border-color: var(--border-strong);
}

.card__main {
    min-width: 0;
}

.card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.card__title {
    font-size: 15px;
}

.card__line {
    margin-top: 2px;
    font-size: 13px;
}

.card__line--muted {
    color: var(--text-3);
}

.card__line--contact {
    margin-top: 5px;
    font-size: 13px;
    color: var(--text-2);
}

.card__line--contact a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card__sep {
    color: var(--border-strong);
}

.card__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.tag {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    font-size: 11.5px;
    color: var(--text-2);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.tag--accent {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: transparent;
    font-weight: 500;
}

.tag__note {
    color: var(--text-3);
    font-size: 10.5px;
}

.thread-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.thread-card {
    display: block;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.thread-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-subtle);
}

.thread-card__title {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.thread-card__meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-3);
}

.note-card {
    display: block;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.note-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-subtle);
}

.note-card__title {
    font-size: 15px;
}

.note-card__excerpt {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card__meta {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-3);
}

.welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
}

.welcome__title {
    font-size: 24px;
}

.welcome__text {
    max-width: 340px;
    color: var(--text-2);
}

.welcome__meta {
    font-size: 12.5px;
    color: var(--text-3);
}

.welcome__hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-3);
}

.empty-hint {
    padding: 8px 9px;
    font-size: 13px;
    color: var(--text-3);
}

.empty-hint--centered {
    text-align: center;
    padding: 40px 0;
}

/* -------------------------------------------------- editor de notas */

.doc--editor {
    display: flex;
    flex-direction: column;
}

.note-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.note-editor__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.note-editor__title {
    flex: 1;
    min-width: 0;
    padding: 0;
    font: inherit;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    outline: none;
}

.note-editor__title:focus {
    border-bottom-color: var(--accent);
}

.note-editor__content {
    width: 100%;
    min-height: 320px;
    padding: 16px 18px;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    resize: vertical;
}

.note-editor__content:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.note-editor__footer {
    margin-top: 16px;
}

.note-editor__delete {
    margin-top: 20px;
}

/* -------------------------------------------- eventos importantes */

.event-timeline {
    padding-left: 2px;
}

.event-date {
    margin: 26px 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.event-date:first-child {
    margin-top: 6px;
}

.event {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px 10px 0;
    border-left: 2px solid var(--border);
    margin-left: 4px;
    padding-left: 18px;
    position: relative;
}

.event__dot {
    position: absolute;
    left: -5px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg-pane);
}

.event--past .event__dot {
    background: var(--border-strong);
}

.event--past .event__title {
    color: var(--text-2);
}

.event__body {
    flex: 1;
    min-width: 0;
}

.event__title {
    font-size: 14.5px;
}

.event__description {
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-2);
    white-space: pre-wrap;
}

.event__meta {
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-3);
}

/* ------------------------------------------------------ pantalla del hilo */

.thread {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.thread__header {
    flex: 0 0 auto;
    padding: 22px var(--pane-pad) 0;
    border-bottom: 1px solid var(--border);
}

.thread__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.thread__title {
    font-size: 22px;
    letter-spacing: -0.01em;
}

.thread__subtitle {
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--text-3);
}

.thread__tools {
    margin-left: auto;
}

.section-item--all {
    font-weight: 500;
}

.section-item--all .badge {
    font-size: 12px;
    line-height: 1.2;
}

.status-chip {
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
}

.status-chip--closed {
    color: var(--success);
    background: rgba(31, 146, 84, 0.10);
}

.status-chip--archived {
    color: var(--text-2);
    background: var(--bg-subtle);
}

.tabs {
    display: flex;
    gap: 20px;
}

.tab {
    position: relative;
    padding: 8px 1px 10px;
    font-size: 13.5px;
    color: var(--text-2);
    cursor: default;
}

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

.tab.is-active {
    color: var(--accent);
    font-weight: 500;
}

.tab.is-active::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}

/* Contador al lado del nombre de la pestaña. */
.tab__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-3);
    background: var(--bg-subtle);
    border-radius: 999px;
}

.tab.is-active .tab__count {
    color: var(--accent);
    background: var(--accent-soft);
}

/* --------------------------------------------------- indice de evidencias */

.evidence-index {
    padding: 18px var(--pane-pad) 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.evidence-index__list {
    max-width: 780px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.evidence-index__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--border);
}

.evidence-index__item:last-child {
    border-bottom: 0;
}

.evidence-index__icon {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.4;
}

.evidence-index__body {
    /* min-width 0 o un titulo largo sin espacios estira la fila entera. */
    min-width: 0;
    flex: 1 1 auto;
}

.evidence-index__title {
    font-size: 14px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.evidence-index__title:hover {
    color: var(--accent);
}

.evidence-index__title--broken {
    color: var(--text-3);
    text-decoration: line-through;
}

.evidence-index__out {
    margin-left: 5px;
    font-size: 11px;
    color: var(--text-3);
}

.evidence-index__meta {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--text-3);
}

.evidence-index__jump:hover {
    color: var(--accent);
    text-decoration: underline;
}

.tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.tab-panel.is-active {
    display: flex;
}

/* --------------------------------------------------- timeline de mensajes */

.timeline {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px var(--pane-pad) 8px;
    background: var(--bg-subtle);
}

.day-divider {
    display: flex;
    justify-content: center;
    margin: 14px 0 12px;
}

.day-divider span {
    padding: 3px 12px;
    font-size: 11.5px;
    color: var(--text-2);
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* Todas las entradas son del mismo autor: una sola columna, sin lados. */
.entry {
    max-width: 660px;
    margin-bottom: 9px;
    padding: 11px 14px 7px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.025);
}

/* Etiqueta del hilo de origen: solo aparece en el hilo virtual "Todos". */
.entry__thread {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
}

.entry__thread:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entry__content {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.entry__textarea {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    outline: none;
    resize: vertical;
}

.entry__editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}

/* Una ficha que sigue estando pero ya no esta en juego: un contacto que dejo la
   empresa. Se apaga, no se esconde — se la sigue necesitando para consultar. */
.card--inactive .card__title,
.card--inactive .card__line {
    color: var(--text-3);
}

.card--inactive .contact__notes,
.card--inactive .tag-row {
    opacity: 0.65;
}

/* --------------------------------------------------------- asistente virtual */

.chat {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 20px;
}

.chat__turn {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat__from {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-3);
}

.chat__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    color: #fff;
    background: var(--accent);
    border-radius: 50%;
}

.chat__who {
    font-weight: 500;
    color: var(--text-2);
}

.chat__sep {
    color: var(--border-strong);
}

.chat__scope {
    color: var(--text-3);
}

.chat__scope:hover {
    color: var(--accent);
}

.chat__time {
    margin-left: auto;
}

.chat__bubble {
    max-width: 680px;
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: var(--radius);
}

.chat__bubble--assistant {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
}

/* Una pregunta ya respondida: una sola tarjeta, con la pregunta citada arriba y
   la respuesta abajo. Es la misma forma que tiene en el hilo, a proposito: son
   la misma cosa vista en dos lugares. */
.answered {
    padding: 14px 16px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.answered__asked {
    padding-left: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
    border-left: 2px solid var(--border-strong);
}

.answered__asked strong {
    color: var(--text);
    font-weight: 600;
}

.answered__answer {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.answered__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    font-size: 12px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}

.answered__meta a {
    color: var(--text-3);
}

.answered__meta a:hover {
    color: var(--accent);
}

.answered__warn {
    font-style: italic;
}

.answered__time {
    margin-left: auto;
}

.answered__jump {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* En un telefono el pie no entra entero. Se recortan los nombres del grupo y
   del hilo, que son los unicos que pueden ser largos: asi queda en un renglon
   en lugar de partirse en cuatro. */
@media (max-width: 860px) {
    .answered__meta a:not(.answered__jump) {
        max-width: 34%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Respondida ocupa menos: ya no hay nada que hacer con ella. */
.chat__turn--answered {
    gap: 0;
}

.chat__context {
    font-size: 12px;
    font-style: italic;
    color: var(--text-3);
}

/* "Responder" y "Descartar" comparten renglon, pero "Descartar" va posicionado
   en lugar de ser una columna del flujo: asi el formulario, al abrirse, usa el
   ancho completo en vez de quedarse con lo que sobra al costado. Se nota sobre
   todo en un telefono. */
.chat__pending {
    position: relative;
    margin-top: 2px;
    max-width: 680px;
}

.chat__dismiss {
    position: absolute;
    top: 0;
    right: 0;
}

.chat__reply-link {
    display: inline-block;
    font-size: 13px;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}

.chat__reply-link::-webkit-details-marker {
    display: none;
}

.chat__reply-link:hover {
    text-decoration: underline;
}

/* Abierto, el enlace deja de ser lo importante: lo es el formulario. */
.chat__reply[open] .chat__reply-link {
    margin-bottom: 8px;
    color: var(--text-3);
}

/* La sub-burbuja. Se alinea con la del asistente, no con la mia: es la
   respuesta a lo que esta justo arriba. */
.chat__reply-form {
    padding: 12px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.chat__textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    resize: vertical;
}

.chat__textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.chat__reply-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.chat__hint {
    flex: 1;
    font-size: 12px;
    color: var(--text-3);
}

/* En un telefono las burbujas ocupan todo y el pie de respuesta se apila. */
@media (max-width: 860px) {
    .chat__bubble,
    .chat__reply {
        max-width: none;
    }

    .chat__reply-actions {
        flex-wrap: wrap;
    }

    .chat__reply-actions .button {
        width: 100%;
    }
}

/* ------------------------------------------- las dos versiones de una entrada */

/* El interruptor general. Arranca oculto y lo muestra el JavaScript solo si en
   la conversacion hay algo que cambiar. */
.ai-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.ai-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ai-switch__track {
    position: relative;
    width: 34px;
    height: 20px;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background 0.15s ease;
}

.ai-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.ai-switch input:checked + .ai-switch__track {
    background: var(--accent);
}

.ai-switch input:checked + .ai-switch__track::after {
    transform: translateX(14px);
}

/* Que se note cuando se llega con el teclado. */
.ai-switch input:focus-visible + .ai-switch__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* El cartelito de cada entrada. Dice de donde salio lo que estas leyendo. */
.entry__badge {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
}

.entry__badge--ai {
    color: var(--accent);
}

/* El caso que mas importa que se vea: pediste IA y esta no la tiene. */
.entry__badge--missing {
    color: var(--text-3);
    font-style: italic;
}

.entry__action--version {
    color: var(--accent);
}

.entry__editing-what {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-3);
}

.entry__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.entry__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.entry:hover .entry__actions,
.entry:focus-within .entry__actions {
    opacity: 1;
}

.entry__action {
    padding: 2px 7px;
    font-size: 11.5px;
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.entry__action:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.entry__action--danger:hover {
    color: var(--danger);
    background: rgba(208, 52, 44, 0.08);
}

.entry__time {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-3);
    margin-left: auto;
}

.entry__edited {
    font-style: italic;
}

.evidence-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.chip-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 240px;
    padding: 3px 9px;
    font-size: 12px;
    color: var(--text-2);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.chip:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-softer);
}

.chip__icon {
    font-size: 11px;
    line-height: 1;
}

.chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip__out {
    font-size: 10px;
    color: var(--text-3);
}

.chip:hover .chip__out {
    color: var(--accent);
}

.chip--broken {
    color: var(--text-3);
    text-decoration: line-through;
}

.chip--broken:hover {
    color: var(--text-3);
    border-color: var(--border);
    background: var(--bg-subtle);
}

.chip--staged {
    background: var(--accent-softer);
    border-color: var(--accent-soft);
    color: var(--accent);
}

.chip__remove {
    display: none;
    margin-left: 3px;
    padding: 0 3px;
    font-size: 13px;
    line-height: 1;
    color: var(--text-3);
    background: none;
    border: 0;
    cursor: pointer;
}

.chip__remove:hover {
    color: var(--danger);
}

.entry:hover .chip__remove,
.chip--staged .chip__remove {
    display: inline-block;
}

/* ---------------------------------------------------------------- composer */

.composer {
    flex: 0 0 auto;
    /* El ultimo valor suma el alto de la barra del gesto de inicio: sin eso, en
       la aplicacion instalada el campo de texto queda justo abajo y al tocarlo
       se dispara el gesto en vez de abrirse el teclado. */
    padding: 12px var(--pane-pad) calc(16px + var(--safe-bottom));
    background: var(--bg-pane);
    border-top: 1px solid var(--border);
}

.composer__evidence {
    margin-bottom: 10px;
    padding: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.composer__evidence-fields {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.composer__evidence-fields .field__input {
    font-size: 13px;
    padding: 6px 9px;
}

.composer__staged {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.composer__box {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-pane);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
}

.composer__box:focus-within {
    border-color: var(--accent);
}

.composer__input {
    flex: 1;
    min-height: 22px;
    max-height: 180px;
    font: inherit;
    color: var(--text);
    background: transparent;
    border: 0;
    outline: none;
    resize: none;
}

.composer__attach,
.composer__send {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 15px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.composer__attach:hover:not(:disabled) {
    background: var(--accent-soft);
}

.composer__send {
    color: #fff;
    background: var(--accent);
    font-size: 16px;
}

.composer__send:hover:not(:disabled) {
    background: var(--accent-hover);
}

.composer__send:disabled {
    opacity: 0.5;
    cursor: default;
}

.composer__hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-3);
}

/* ----------------------------------------------------------------- resumen */

.summary {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px var(--pane-pad) 60px;
    /* El mismo ancho que .doc, que usan las notas y los contactos: al saltar
       entre pestanias el contenido no cambia de medida. */
    max-width: 860px;
}

.summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.summary__title {
    font-size: 18px;
}

.summary__actions {
    display: flex;
    gap: 8px;
}

.summary__block {
    margin-bottom: 26px;
}

.summary__block-title {
    padding-bottom: 6px;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
}

.summary__text {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.summary__text--muted {
    color: var(--text-3);
}

.summary__textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
    resize: vertical;
}

.summary__textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.summary__footer {
    padding-top: 12px;
    font-size: 12px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}

/* =========================================================================
   Markdown renderizado (.md)
   Lo genera src/Markdown.php. Se usa en mensajes, notas y recordatorios.
   ========================================================================= */

.md > :first-child {
    margin-top: 0;
}

.md > :last-child {
    margin-bottom: 0;
}

.md__p {
    margin: 0 0 0.7em;
    line-height: 1.55;
}

.md__h {
    margin: 1.1em 0 0.4em;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.md__h--1 {
    font-size: 1.24em;
}

.md__h--2 {
    font-size: 1.12em;
}

.md__h--3 {
    font-size: 1em;
    color: var(--text-2);
}

.md__list {
    margin: 0 0 0.7em;
    padding-left: 1.35em;
}

.md__list li {
    margin-bottom: 0.2em;
    line-height: 1.5;
}

/* Sublista: pegada al item padre y con otro marcador, para que el nivel se
   note aunque la sangria sea poca. */
.md__list--nested {
    margin: 0.2em 0 0.3em;
}

.md__list ul.md__list--nested {
    list-style-type: circle;
}

.md__list ul.md__list--nested ul.md__list--nested {
    list-style-type: square;
}

/* La sublista de un checklist ocupa el ancho completo para caer debajo. */
.md__task > .md__list--nested {
    flex-basis: 100%;
    margin-left: 1.35em;
}

/* ------------------------------------------------------------------ tablas */

.md__table-wrap {
    /* Una tabla ancha scrollea sola en vez de estirar la columna. */
    overflow-x: auto;
    margin: 0 0 0.9em;
}

.md__table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13.5px;
}

.md__table th,
.md__table td {
    padding: 6px 10px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.md__table th {
    background: var(--bg-subtle);
    font-weight: 600;
}

.md__table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--bg-subtle) 45%, transparent);
}

/* Con el descendiente delante: ".md__table td" pesa mas que una clase sola y
   dejaria todo alineado a la izquierda. */
.md__table .md__cell--center { text-align: center; }
.md__table .md__cell--right  { text-align: right; }
.md__table .md__cell--left   { text-align: left; }

/* Checklist: el marcador propio de la lista sobra. */
.md__list li.md__task {
    display: flex;
    /* Si el item tiene sublista, es un hijo mas del flex: sin wrap se pondria
       al lado del texto en vez de debajo. */
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px;
    margin-left: -1.35em;
    list-style: none;
}

.md__task input {
    margin: 4px 0 0;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.md__task-done {
    color: var(--text-3);
    text-decoration: line-through;
}

.md__quote {
    margin: 0 0 0.7em;
    padding: 2px 0 2px 12px;
    color: var(--text-2);
    border-left: 2px solid var(--accent-soft);
}

.md__code {
    padding: 1px 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.md__pre {
    margin: 0 0 0.7em;
    padding: 10px 12px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    line-height: 1.5;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.md__pre code {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
}

.md__hr {
    margin: 1.1em 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.md a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.md a:hover {
    text-decoration-thickness: 2px;
}

.md strong {
    font-weight: 600;
}

.md del {
    color: var(--text-3);
}

/* Chuleta de sintaxis */
.cheatsheet {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 14px;
    margin: 16px 0 0;
    font-size: 13px;
}

.cheatsheet dt {
    margin: 0;
}

.cheatsheet dd {
    margin: 0;
    color: var(--text-2);
    align-self: center;
}

/* =========================================================================
   Recordatorios
   ========================================================================= */

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

.reminder {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border);
}

.reminder:last-child {
    border-bottom: 0;
}

.reminder__check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.reminder__check:hover:not(:disabled) {
    border-color: var(--accent);
}

.reminder__check-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.12s ease;
}

.reminder--done .reminder__check {
    background: var(--accent);
    border-color: var(--accent);
}

.reminder--done .reminder__check-dot {
    background: #fff;
}

.reminder__body {
    flex: 1;
    min-width: 0;
}

/* Solo aparece en la vista global, que cruza grupos. */
.reminder__group,
.event__group {
    display: inline-block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
}

.reminder__group:hover,
.event__group:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.reminder__title {
    font-size: 14.5px;
    font-weight: 500;
    word-break: break-word;
}

.reminder--done .reminder__title {
    color: var(--text-3);
    text-decoration: line-through;
}

.reminder__content {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-2);
}

.reminder--done .reminder__content {
    color: var(--text-3);
}

.reminder__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 5px;
    font-size: 12px;
}

.reminder__due {
    font-weight: 500;
    color: var(--text-3);
}

.reminder__due--overdue {
    color: var(--danger);
}

.reminder__due--today {
    color: var(--accent);
}

.reminder__due--soon {
    color: #b26a00;
}

.reminder__due--done,
.reminder--done .reminder__due {
    color: var(--text-3);
    font-weight: 400;
}

.reminder__repeat,
.reminder__completed {
    color: var(--text-3);
}

.reminder .card__actions {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.reminder:hover .card__actions,
.reminder:focus-within .card__actions {
    opacity: 1;
}

/* Aparecer al pasar el mouse no sirve donde no hay mouse: en una pantalla
   tactil las acciones quedaban invisibles pero clickeables, que es lo peor de
   los dos mundos. */
@media (hover: none) {
    .reminder .card__actions {
        opacity: 1;
    }
}

.doc__section--tight {
    margin-top: 22px;
}

.doc__section-title--overdue {
    color: var(--danger);
}

.doc__section-title--today {
    color: var(--accent);
}

.badge--soft {
    color: var(--text-3);
}

/* ------------------------------------------------------- editor de notas */

.note {
    display: flex;
    flex-direction: column;
}

.note__title {
    font-size: 24px;
    letter-spacing: -0.01em;
    word-break: break-word;
    margin-bottom: 16px;
}

.note__rendered {
    font-size: 14.5px;
    line-height: 1.65;
}

.note__delete {
    margin-top: 20px;
}

/* ------------------------------------------------------------- editor */

.editor {
    display: flex;
    flex-direction: column;
}

/* Las dos barras de guardado: la de arriba se pega al hacer scroll para que
   el boton siga a mano en una nota larga. */
.editor__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 34px;
}

.editor__bar--top {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 6px 0 10px;
    background: var(--bg-pane);
}

.editor__bar--bottom {
    margin-top: 14px;
}

/* Conmutador Editor / Codigo. */
.editor__modes {
    display: inline-flex;
    padding: 2px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.editor__mode {
    padding: 4px 14px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius) - 3px);
    cursor: pointer;
}

.editor__mode.is-active {
    color: var(--text);
    background: var(--bg-pane);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

/* Guardar aparece solo cuando hay cambios: sin cambios no hay nada que hacer
   con el boton y solo agrega ruido. */
.editor__save {
    display: none;
    align-items: center;
    gap: 10px;
}

.editor.is-dirty .editor__save {
    display: flex;
}

.editor__dirty {
    font-size: 12px;
    color: var(--accent);
}

/* Barra de herramientas. */
.editor__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 6px 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
}

.editor__group {
    display: flex;
    gap: 2px;
}

.editor__group + .editor__group {
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.editor__tool {
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.editor__tool:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.editor__tool code {
    font-size: 11px;
}

.editor__tool--danger:hover {
    color: var(--danger);
}

.editor__tools--table {
    border-radius: 0;
}

.editor__tools-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
}

.editor__title {
    width: 100%;
    margin-bottom: 4px;
    padding: 0 0 8px;
    font: inherit;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    background: transparent;
    border: 0;
    outline: none;
}

.editor__title:focus {
    border-bottom: 1px solid var(--accent);
    padding-bottom: 7px;
}

.editor__surface,
.editor__source {
    width: 100%;
    min-height: 320px;
    padding: 10px 16px 18px;
    color: var(--text);
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    outline: none;
}

.editor__surface {
    font-size: 14.5px;
    line-height: 1.65;
}

.editor__source {
    display: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.5px;
    line-height: 1.65;
    resize: vertical;
}

/* El modo decide cual de los dos se ve, y si la barra de tablas tiene sentido. */
.editor[data-mode="code"] .editor__surface,
.editor[data-mode="code"] .editor__tools:not(.editor__tools--table) {
    display: none;
}

.editor[data-mode="code"] .editor__source {
    display: block;
}

.editor[data-mode="code"] .editor__tools--table {
    display: none;
}

.editor__title:focus,
.editor__surface:focus,
.editor__source:focus {
    border-color: var(--border-strong);
}

/* Marca la celda donde esta el cursor, que es sobre la que actuan los botones
   de fila y columna. */
.editor__surface td:focus,
.editor__surface th:focus {
    outline: 2px solid var(--accent-soft);
    outline-offset: -2px;
}

.editor__surface .md__table {
    /* Al editar conviene ver los limites de cada celda aunque esten vacias. */
    min-width: 320px;
}

.editor__hint {
    font-size: 12px;
    color: var(--text-3);
}

/* El placeholder del contenteditable: el atributo no existe, se simula. */
.editor__surface:empty::before,
.editor__surface > p:only-child:empty::before {
    content: 'Escribí acá…';
    color: var(--text-3);
}

@media (max-width: 860px) {
    .editor__tools {
        gap: 3px 6px;
    }

    .editor__group + .editor__group {
        padding-left: 6px;
    }
}

.modal__note {
    font-size: 12.5px;
    color: var(--text-3);
    align-self: center;
}

/* ------------------------------------------------------------------ modales */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal[hidden] {
    display: none;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    background: var(--bg-pane);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}

.modal__form {
    padding: 20px;
}

.modal__title {
    margin-bottom: 4px;
    font-size: 16px;
}

.modal__hint {
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--text-3);
}

.modal__hint a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal__title + .field,
.modal__title + .field-row {
    margin-top: 16px;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.modal__actions--split {
    justify-content: space-between;
}

.modal__actions-group {
    display: flex;
    gap: 8px;
}

/* -------------------------------------------------------------------- flash */

.flash-stack {
    position: fixed;
    right: calc(18px + var(--safe-right));
    bottom: calc(18px + var(--safe-bottom));
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
    pointer-events: none;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-3);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    pointer-events: auto;
}

.flash--success {
    border-left-color: var(--success);
}

.flash--error {
    border-left-color: var(--danger);
}

.flash__close {
    flex: 0 0 auto;
    padding: 0 2px;
    font-size: 16px;
    line-height: 1;
    color: var(--text-3);
    background: none;
    border: 0;
    cursor: pointer;
}

/* =========================================================================
   Modo solo lectura (ver la aplicacion como otro usuario)
   ========================================================================= */

body[data-impersonating] {
    --banner-height: 38px;
}

.impersonation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: var(--banner-height);
    padding: 0 16px;
    font-size: 12.5px;
    color: #fff;
    background: var(--accent);
}

.impersonation__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.impersonation__form {
    flex: 0 0 auto;
}

.impersonation__button {
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    background: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.impersonation__button:hover {
    background: rgba(255, 255, 255, 0.88);
}

/* Los controles de escritura se ocultan para no dejar clics muertos.
 *
 * Esto es comodidad, no seguridad: la garantia real es que el router rechaza
 * cualquier POST mientras dure la suplantacion. */
body[data-impersonating] .invite,
body[data-readonly] .invite,
body[data-readonly] .composer,
body[data-readonly] .entry__actions,
body[data-readonly] .doc__toolbar,
body[data-readonly] .summary__actions,
body[data-readonly] .chip__remove,
body[data-impersonating] .composer,
body[data-impersonating] .entry__actions,
body[data-impersonating] .card__actions,
body[data-impersonating] .doc__toolbar,
body[data-impersonating] .pane__footer,
body[data-impersonating] .summary__actions,
body[data-impersonating] .note__delete,
body[data-impersonating] .thread__tools,
body[data-impersonating] .chip__remove,
body[data-impersonating] .icon-button,
body[data-impersonating] .section-label__link + *,
body[data-impersonating] .empty-hint .link-button {
    display: none !important;
}

/* El circulo del recordatorio es parte del diseno de la fila: se deja a la vista
   pero inerte. */
body[data-impersonating] .reminder__check,
body[data-readonly] .reminder__check {
    pointer-events: none;
    opacity: 0.45;
}

/* Invitar a ver el grupo */
.invite {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.invite__hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-3);
}

/* =========================================================================
   Seccion MCP: bloques de codigo copiables, avisos y pasos
   ========================================================================= */

.codeblock {
    position: relative;
    margin: 14px 0;
}

.codeblock pre {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.codeblock__copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-pane);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.codeblock__copy:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.codeblock__copy.is-copied {
    color: #fff;
    background: var(--success);
    border-color: var(--success);
}

.callout {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-3);
    border-radius: var(--radius);
    background: var(--bg-subtle);
}

.callout--accent {
    border-left-color: var(--accent);
    background: var(--accent-softer);
}

.callout__title {
    font-size: 13.5px;
    font-weight: 600;
}

.callout__text {
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-2);
}

.steps {
    margin: 0 0 4px;
    padding-left: 1.4em;
    font-size: 14px;
}

.steps > li {
    margin-bottom: 9px;
    line-height: 1.55;
}

.steps ul {
    margin: 6px 0 0;
    padding-left: 1.2em;
}

.steps ul li {
    margin-bottom: 3px;
    font-size: 13px;
    color: var(--text-2);
}

.cheatsheet--wide {
    grid-template-columns: minmax(150px, auto) 1fr;
    gap: 10px 16px;
}

.cheatsheet--wide dd {
    line-height: 1.5;
}

/* ------------------------------------------------------------------- login */

.login {
    width: 100%;
    max-width: 360px;
    padding: 28px 30px 30px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}

.login__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.login__title {
    font-size: 20px;
    letter-spacing: -0.01em;
}

.login__subtitle {
    margin: 4px 0 20px;
    font-size: 13px;
    color: var(--text-3);
}

.login__flash {
    margin-bottom: 16px;
    padding: 9px 11px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--text-3);
    background: var(--bg-subtle);
}

.login__flash--error {
    color: var(--danger);
    border-left-color: var(--danger);
    background: rgba(208, 52, 44, 0.06);
}

.login__flash--success {
    border-left-color: var(--success);
}

/* Hereda .checkbox: la casilla se alinea con la primera linea, no con el
   centro del bloque de dos lineas. */
.login__remember {
    margin: 2px 0 18px;
}

.login__remember-hint {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--text-3);
}

.login__submit {
    width: 100%;
    margin-top: 4px;
    padding: 10px 14px;
}

/* El boton de Google va en blanco con borde, que es como lo pide la guia de
   marca: el logo a color no se lee bien sobre el fondo oscuro del primario. */
.login__google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
}

.login__google:hover {
    background: var(--bg-subtle);
}

.login__google-mark {
    display: flex;
    flex: 0 0 auto;
}

/* ------------------------------------------- pantalla de consentimiento OAuth */

.login--consent {
    max-width: 440px;
}

.consent__list {
    margin: 0 0 14px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}

.consent__list li + li {
    margin-top: 6px;
}

.consent__list--muted {
    color: var(--text-3);
}

.consent__write {
    margin: 16px 0 0;
    padding: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.consent__form {
    margin-top: 20px;
}

.consent__deny {
    width: 100%;
    margin-top: 8px;
    padding: 10px 14px;
}

.login__note {
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-3);
}

/* --------------------------------------------------------- menu de usuario */

.usermenu {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
}

.usermenu__name {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usermenu__form {
    flex: 0 0 auto;
}

/* El desplegable es solo para pantallas angostas: en escritorio entran todos
   los items en la barra y "Salir" esta siempre a la vista. */
.usermenu__more {
    display: none;
}

.usermenu__logout {
    padding: 4px 9px;
    font-size: 12.5px;
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.usermenu__logout:hover {
    color: var(--danger);
    border-color: rgba(208, 52, 44, 0.35);
    background: rgba(208, 52, 44, 0.06);
}

.tag--muted {
    color: var(--text-3);
}

.tag--danger {
    color: var(--danger);
    background: rgba(208, 52, 44, 0.08);
    border-color: transparent;
    font-weight: 500;
}

/* --------------------------------------------------------------- error page */

.body--centered {
    display: flex;
    /* A proposito sin align-items/justify-content: center y con margin auto en
       el hijo.
       
       Centrar con align-items recorta por arriba cuando el contenido no entra
       (un telefono en horizontal, o el teclado abierto) y deja el boton Entrar
       fuera de alcance para siempre, porque scrollTop no puede ser negativo.
       margin auto centra igual cuando sobra lugar, pero cuando falta se apoya
       arriba y el resto se alcanza scrolleando. */
    min-height: 100%;
    height: auto;
    /* Login y error tambien se ven dentro de la aplicacion instalada: si la
       sesion caduco, esta es la primera pantalla al abrirla. */
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

.body--centered > * {
    margin: auto;
}

.error-page {
    padding: 32px;
    text-align: center;
}

.error-page__status {
    font-size: 44px;
    font-weight: 600;
    color: var(--accent);
}

.error-page__title {
    margin-bottom: 8px;
    font-size: 19px;
}

.error-page__message {
    max-width: 380px;
    margin: 0 auto 20px;
    color: var(--text-2);
}

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

@media (max-width: 1180px) {
    :root {
        --col-groups: 232px;
        --col-sections: 250px;
        --pane-pad: 24px;
    }
}

/* --------------------------------------------------------------- una columna
   Por debajo de 860px se muestra un solo panel. Cual, lo decide el servidor
   con [data-mobile-view] segun la URL, asi que la navegacion y el boton atras
   del navegador funcionan sin JavaScript.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    :root {
        --pane-pad: 16px;
    }

    body[data-impersonating] {
        --banner-height: 54px;
    }

    .impersonation {
        gap: 8px;
        padding: 6px 12px;
        text-align: center;
    }

    .impersonation__text {
        white-space: normal;
        font-size: 11.5px;
    }

    /* Una sola columna: el buscador arriba y debajo el panel activo. */
    .shell {
        display: flex;
        flex-direction: column;
    }

    /* El logo va arriba de todo, y debajo la barra de busqueda. */
    .brand {
        order: -2;
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 16px;
        border-right: 0;
    }

    /* La barra de busqueda se queda: es el acceso rapido en mobile. */
    .topbar {
        order: -1;
        flex: 0 0 auto;
        flex-wrap: wrap;
        min-height: 0;
        gap: 8px;
        padding: 8px 12px;
    }

    /* La navegacion pasa a una fila propia, arriba del buscador. */
    .topnav {
        flex: 1;
        justify-content: space-between;
    }

    .topnav__item {
        padding: 7px 4px;
        font-size: 12.5px;
    }

    .usermenu {
        max-width: none;
    }

    .usermenu__name {
        display: none;
    }

    /* Las secciones de configuracion se mudan al menu: en un telefono los siete
       items no entran, y los ultimos quedaban cortados por el borde. El
       contenedor tiene overflow-x oculto, asi que no habia forma de llegar. */
    .topnav__item--secondary {
        display: none;
    }

    /* "Salir" pasa adentro del menu, junto con esas secciones. */
    .usermenu__form {
        display: none;
    }

    .usermenu__more {
        display: block;
        position: relative;
    }

    .usermenu__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 34px;
        font-size: 15px;
        color: var(--text-2);
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        list-style: none;
    }

    /* El triangulito que ponen los navegadores por su cuenta. */
    .usermenu__toggle::-webkit-details-marker {
        display: none;
    }

    .usermenu__toggle.is-active {
        color: var(--accent);
        border-color: var(--accent);
        background: var(--accent-soft);
    }

    .usermenu__more[open] .usermenu__toggle {
        color: var(--text);
        background: var(--bg-hover);
    }

    .usermenu__panel {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 70;
        min-width: 200px;
        padding: 6px;
        background: var(--bg-pane);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-pop);
    }

    .usermenu__who {
        padding: 8px 10px 10px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
        color: var(--text);
        border-bottom: 1px solid var(--border);
    }

    .usermenu__who span {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 400;
        color: var(--text-3);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 44px es el minimo que recomienda Apple para algo que se toca con el
       dedo; con el padding solo quedaba en 41. */
    .usermenu__link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px;
        font-size: 14px;
        color: var(--text-2);
        border-radius: var(--radius-sm);
    }

    .usermenu__link.is-active {
        color: var(--accent);
        font-weight: 500;
        background: var(--accent-soft);
    }

    .usermenu__panel-form {
        margin-top: 4px;
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }

    .usermenu__panel-logout {
        width: 100%;
        min-height: 44px;
        padding: 10px;
        font-size: 14px;
        text-align: left;
        color: var(--danger);
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .topnav__item {
        flex: 1;
        text-align: center;
        padding: 7px 6px;
        font-size: 13px;
    }

    .global-search {
        max-width: none;
    }

    /* El nombre del grupo ya se ve en el encabezado: alcanza "Solo en este grupo". */
    .global-search__scope {
        max-width: 96px;
        font-size: 11px;
    }

    .global-search__scope strong {
        display: none;
    }

    .global-search__hint {
        display: none;
    }

    .global-search__input {
        padding: 9px 0;
    }

    .suggest {
        max-height: 62dvh;
    }

    .result__title {
        white-space: normal;
    }

    .filters__label {
        width: 100%;
    }

    .filters__form {
        width: 100%;
    }

    .filters__select {
        flex: 1;
        font-size: 16px;
    }

    .result__subtitle {
        white-space: normal;
    }

    /* Las areas de grilla no aplican en el layout de una columna. */
    .pane {
        display: none;
        flex: 1;
        min-height: 0;
        grid-column: auto;
        grid-row: auto;
        border-right: 0;
    }

    .shell[data-mobile-view="groups"] .pane--groups,
    .shell[data-mobile-view="group"] .pane--sections,
    .shell[data-mobile-view="content"] .pane--content {
        display: flex;
    }

    /* En la vista de grupo el panel de secciones ocupa toda la pantalla y la
       vista general del grupo queda accesible desde su encabezado. */
    .shell[data-mobile-view="group"] .pane--sections {
        background: var(--bg-pane);
    }

    .mobile-back {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        padding: 12px 16px 8px;
        font-size: 14px;
        font-weight: 500;
        color: var(--accent);
    }

    .pane__header {
        padding: 6px 16px 10px;
    }

    .pane__title {
        font-size: 15px;
    }

    .pane__title--group {
        font-size: 18px;
    }

    .pane__search {
        padding: 0 16px 10px;
    }

    /* Objetivos de toque mas grandes. */
    .group-item,
    .section-item {
        padding: 11px 10px;
    }

    .group-item__name,
    .section-item {
        font-size: 15px;
    }

    .ghost-button {
        padding: 12px 10px;
        font-size: 15px;
    }

    .icon-button {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    /* Documento y hilo */
    .doc {
        max-width: none;
        padding-top: 8px;
        padding-bottom: 48px;
    }

    .doc__header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .doc__title {
        font-size: 22px;
    }

    .doc__toolbar .button {
        flex: 1;
    }

    .card {
        flex-direction: column;
        gap: 10px;
    }

    .card__actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    /* .card__actions al 100% esta pensado para .card, que aca apila en columna.
       .reminder sigue siendo una fila, asi que se le permite envolver: la
       casilla y el texto quedan en el primer renglon y las acciones bajan al
       segundo, igual que en una tarjeta.

       Sin esto las acciones reclamaban el ancho entero y, como no encogen,
       al cuerpo del recordatorio le quedaban 0px: el titulo salia una letra por
       renglon. */
    .reminder {
        flex-wrap: wrap;
    }

    .card__actions .entry__action {
        padding: 7px 12px;
        font-size: 13px;
        background: var(--bg-subtle);
    }

    .thread__header {
        padding-top: 4px;
    }

    .thread__title {
        font-size: 19px;
    }

    .thread__tools {
        margin-left: 0;
        width: 100%;
    }

    .tabs {
        gap: 18px;
    }

    .tab {
        flex: 1;
        text-align: center;
        font-size: 14px;
        padding: 10px 1px 12px;
    }

    .entry {
        max-width: none;
    }

    /* En pantalla tactil no hay hover: las acciones quedan siempre visibles. */
    .entry__actions {
        opacity: 1;
    }

    .chip__remove {
        display: inline-block;
    }

    .chip {
        max-width: 170px;
    }

    .composer__evidence-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .composer__evidence-fields .button {
        width: 100%;
    }

    .composer__hint {
        display: none;
    }

    .field-row {
        flex-direction: column;
        gap: 0;
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
        max-height: 200px;
    }

    .summary {
        max-width: none;
    }

    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal__dialog {
        max-width: none;
        max-height: 92dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .modal__actions {
        flex-direction: column-reverse;
    }

    .modal__actions .button {
        width: 100%;
        padding: 11px 13px;
    }

    .modal__actions--split {
        flex-direction: column-reverse;
    }

    .modal__actions-group {
        flex-direction: column-reverse;
        width: 100%;
    }

    .flash-stack {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: none;
    }

    /* Evita el zoom automatico de iOS al enfocar un campo. */
    .field__input,
    .search-input,
    .global-search__input,
    .composer__input,
    .entry__textarea,
    .summary__textarea,
    .note-editor__content {
        font-size: 16px;
    }

    body.has-modal {
        overflow: hidden;
    }
}

/* ------------------------------------------------------ matriz de permisos */

.doc__lead {
    max-width: 70ch;
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-2);
}

/* Texto solo para lectores de pantalla: el estado de la celda se ve por color,
   y eso a un lector no le dice nada. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Scrollea la tabla, no la pagina: con muchos usuarios se va a lo ancho. */
.matrix-wrap {
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-pane);
}

.matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.matrix th,
.matrix td {
    padding: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.matrix tr:last-child th,
.matrix tr:last-child td {
    border-bottom: 0;
}

.matrix th:last-child,
.matrix td:last-child {
    border-right: 0;
}

/* La primera columna y el encabezado quedan fijos al scrollear: sin eso se
   pierde de vista de que grupo y de que persona es la celda que se esta
   tocando, que es justo lo que hay que saber para no equivocarse. */
.matrix__corner,
.matrix__group {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 200px;
    max-width: 260px;
    padding: 9px 12px;
    text-align: left;
    vertical-align: middle;
    background: var(--bg-pane);
}

.matrix__corner,
.matrix__user {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 9px 10px;
    background: var(--bg-subtle);
    font-weight: 500;
    white-space: nowrap;
}

.matrix__corner {
    z-index: 4;
    background: var(--bg-subtle);
}

.matrix__user {
    text-align: center;
    min-width: 92px;
}

.matrix__user .matrix__bulk {
    margin-top: 3px;
}

.matrix__user-name {
    display: block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nombre y atajo en el mismo renglon: apilados, diez filas se estiran de mas. */
.matrix__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 400;
}

.matrix__group-label {
    min-width: 0;
}

.matrix__group-name {
    display: block;
    color: var(--text);
}

.matrix__group-name:hover {
    color: var(--accent);
}

.matrix__hint {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-3);
}

/* Atajo de fila y de columna. Discreto: se usa a proposito, no de paso. */
.matrix__bulk {
    flex: 0 0 auto;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.matrix__bulk:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.matrix__cell {
    text-align: center;
    vertical-align: middle;
}

/* La celda entera es el area clickeable: apuntarle a una casilla de 14px en una
   matriz es incomodo. */
.matrix__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 0;
    font-size: 13px;
    color: transparent;
    background: transparent;
    border: 0;
}

.matrix__toggle:hover {
    background: var(--accent-softer);
    color: var(--border-strong);
}

.matrix__toggle.is-on {
    color: #fff;
    background: var(--accent);
}

.matrix__toggle.is-on:hover {
    background: var(--accent-hover);
    color: #fff;
}

/* Mientras el servidor responde. Si falla, el estado vuelve solo. */
.matrix__toggle.is-busy {
    opacity: 0.45;
}

.matrix__fixed {
    display: inline-block;
    padding: 0 8px;
    font-size: 11px;
    color: var(--text-3);
}

@media (max-width: 860px) {
    .matrix__corner,
    .matrix__group {
        min-width: 150px;
        max-width: 170px;
    }
}

/* Nota libre del contacto. Va al final de la ficha, con una barra al costado
   para que se lea como una acotacion y no como otro campo mas. */
.contact__notes {
    margin-top: 8px;
    padding-left: 10px;
    font-size: 13px;
    color: var(--text-2);
    border-left: 2px solid var(--border);
}

.contact__notes > :first-child {
    margin-top: 0;
}

.contact__notes > :last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------- resumen del hilo en Markdown

   El resumen dejo de tener cuatro campos fijos y pasa a ser Markdown libre: cada
   titulo de primer nivel se muestra como una seccion.

   El renderizador mapea # a <h4 class="md__h--1">, porque la pagina ya usa h2 y
   h3 en su propia jerarquia. Por eso se apunta a la clase y no al tag.

   La jerarquia va al reves de como estaba: el TITULO es el que susurra y el
   CUERPO el que habla. Antes los dos eran grises —titulo en --text-3, cuerpo en
   --text-2— y el resumen se leia lavado, porque lo importante estaba mas claro
   que el negro normal de la aplicacion.                                        */

/* El encabezado, el texto, el editor y el pie no llevan ancho propio: llenan el
   contenedor y por eso terminan todos en el mismo punto, que es lo que hace que
   el resumen se vea compuesto y no apretado contra la izquierda.

   Hubo un intento intermedio de ponerle una medida de renglon mas corta que el
   resto de la aplicacion. Se lee mejor de a un renglon, pero el resumen quedaba
   visiblemente mas finito que una nota y el salto entre pestanias se notaba.
   Gana la consistencia: el resumen mide lo mismo que todo lo demas.

*/

.summary__rendered {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
}

.summary__rendered .md__h--1 {
    /* Sin linea abajo: con una por seccion el resumen parecia papel rayado, mas
       pesado que el resto de la aplicacion. Separa el aire, que alcanza. */
    margin: 30px 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
}

.summary__rendered .md__h--1:first-child {
    margin-top: 0;
}

/* Los parrafos de una misma seccion se juntan un poco: son un bloque, no
   apuntes sueltos. */
.summary__rendered .md__p,
.summary__rendered .md__list {
    margin-bottom: 0.55em;
}

.summary__rendered > :last-child {
    margin-bottom: 0;
}

.summary__rendered .md__list li {
    margin-bottom: 0.3em;
    line-height: 1.6;
}

.summary__empty {
    margin: 0;
    font-size: 13px;
    color: var(--text-3);
}

/* Se escribe Markdown a mano: fuente monoespaciada, como el modo Codigo de las
   notas. Los titulos se distinguen del cuerpo aunque no esten renderizados. */
.summary__textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
}