/**
 * Superchat · Estilos de `notes.card`
 *
 * Van con el MODULO, no con el nucleo (CONTRATO.md §4.2): el nucleo se
 * vendoriza a spine-client y alli esta tarjeta no existe.
 *
 * Todo sale de los tokens del design system. Ni un color literal: la tarjeta
 * tiene que verse como app-skeleton sin que nadie la retoque por tema.
 */

.nc-tarjeta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    color: var(--color-text);
    /* Se mide con el minimo que declara el presentador (240px). Por debajo, el
       host ya la habra degradado a texto y esto no llega a pintarse. */
    min-width: 0;
}

/* En el lienzo, el postit aporta el marco, borde y translucidez: la tarjeta no duplica el fondo */
.sc-postit .nc-tarjeta {
    border: none;
    background: transparent;
    padding: 0;
}

/* Fijada y archivada se distinguen por el borde de la izquierda y no por el
   fondo: sobre la carta traslucida del chat, un fondo de color se mezcla con lo
   que haya detras y deja de significar nada. */
.nc-tarjeta.is-fijada    { border-left: 3px solid var(--color-warning, #f59e0b); }
.nc-tarjeta.is-archivada { border-left: 3px solid var(--color-text-secondary); opacity: 0.85; }

.nc-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
}

.nc-titulo {
    margin: 0;
    font-size: var(--font-size-sm, 0.9rem);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.nc-estado {
    flex-shrink: 0;
    font-size: var(--font-size-xs, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.nc-extracto {
    margin: 0;
    font-size: var(--font-size-sm, 0.85rem);
    line-height: 1.45;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
    /* Tres lineas y basta: el contenido entero ya va en el texto del mensaje,
       aqui solo hace falta reconocer de que nota se habla. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nc-pie {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary);
}

.nc-ref { font-variant-numeric: tabular-nums; margin-right: auto; }

.nc-accion {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text-secondary);
    cursor: pointer;
    font: inherit;
    padding: 2px var(--space-2, 0.5rem);
}
.nc-accion:hover { color: var(--color-primary); border-color: var(--color-primary); }
.nc-accion:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── En el lienzo la tarjeta ES la nota (#327) ─────────────────────────── */
/**
 * La misma lectura que la nota abierta en `/notes`: titulo grande arriba, la
 * fila de iconos a su derecha, el contenido entero debajo y la fecha abajo del
 * todo.
 *
 * **Sin copiar el CSS de `views/notes/_card.ejs`.** Aquel trae consigo su
 * comportamiento —`onclick` en linea, arrastre, expansion a pantalla completa—
 * y los `onclick` son justo lo prohibido en un presentador (§5). Lo que se
 * comparte son los tokens, que es lo que hace que las dos se vean de la misma
 * app sin heredar nada.
 */
.nc-tarjeta--nota {
    height: 100%;
    gap: var(--space-3, 0.75rem);
}

.nc-tarjeta--nota .nc-cabecera {
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
}

.nc-tarjeta--nota .nc-titulo {
    font-size: var(--font-size-base, 1rem);
    line-height: 1.25;
}

/* La fila de iconos, arriba a la derecha, como en la nota abierta. */
.nc-acciones {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.nc-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    /* `currentColor` y no un gris a fuego: los iconos van dentro de un postit
       translucido y tienen que seguir al tema, no a un valor. */
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.nc-icono svg { display: block; }
.nc-icono:hover {
    color: var(--color-text);
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.nc-icono--peligro:hover { color: var(--color-error, #ef4444); }
/* El acuse de copiado, que dura un segundo. Ver `botonDeIcono`. */
.nc-icono.is-hecho { color: var(--color-success, #10b981); }
.nc-icono:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/**
 * El contenido entero.
 *
 * `pre-wrap` porque una nota lleva sus saltos de linea y son suyos: convertirlos
 * a `<br>` habria significado montar marcado a partir de texto ajeno, que es lo
 * que este fichero no hace en ningun sitio.
 */
.nc-cuerpo {
    margin: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
    font-size: var(--font-size-sm, 0.9rem);
    line-height: 1.5;
    color: var(--color-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Es un `<button>` cuando hay a donde ir, y un `<p>` cuando no. El mismo
   aspecto en los dos casos: lo que cambia es si se puede pulsar, y eso lo dice
   el cursor y el subrayado al pasar por encima. */
.nc-truncada {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: var(--font-size-xs, 0.75rem);
    font-style: italic;
    color: var(--color-text-secondary);
}
button.nc-truncada { cursor: pointer; }
button.nc-truncada:hover { color: var(--color-primary); text-decoration: underline; }
button.nc-truncada:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.nc-tarjeta--nota .nc-pie { justify-content: flex-end; }

.nc-fecha {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}