/* ==========================================================================
   BRÚJULA EDITORIAL — prueba de dirección visual
   Unifica tipografía, color y jerarquía en la aplicación operativa. La voz
   editorial de cada cliente continúa perteneciendo a sus propias plantillas.
   ========================================================================== */

:root {
    --ink-950: #162126;
    --ink-900: #162126;
    --ink-800: #2d3a3f;
    --ink-700: #46565b;
    --ink-600: #58676c;
    --ink-500: #68767b;
    --ink-400: #7b878b;

    --paper-000: #ffffff;
    --paper-050: #fafbfa;
    --paper-100: #f4f6f5;
    --paper-200: #e9eeec;
    --line-200: #dde3e1;

    --blue-signal: #155e63;
    --blue-signal-soft: #e7f1f1;
    --brand-warm: #d96b45;

    --state-success: #2e7451;
    --state-success-soft: #e7f2eb;
    --state-warning: #a56722;
    --state-warning-soft: #f7eee1;
    --state-error: #b3424a;
    --state-error-soft: #f7e8e9;
    --state-danger: var(--state-error);

    --font-ui: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Andada Pro', Georgia, serif;
    /* Las antiguas etiquetas mono pasan a una voz editorial sobria. */
    --font-mono: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'IBM Plex Mono', 'SF Mono', monospace;

    --radius-sm: 4px;
    --radius-md: 7px;
    --radius-lg: 10px;
    --shadow-card: none;
}

html,
body {
    background: var(--paper-000);
    color: var(--ink-900);
    font-family: var(--font-ui);
    font-feature-settings: 'ss01' 1, 'tnum' 1;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

/* Marca y navegación: una señal cálida mínima sustituye al cuadrado SaaS. */
.marca-app__simbolo {
    position: relative;
    overflow: visible;
    border-radius: 6px;
    background: var(--blue-signal);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: -.06em;
}

.marca-app__simbolo::after {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-warm);
    content: '';
}

.marca-app {
    letter-spacing: -.01em;
}

.navegacion-grupo__titulo,
.navegacion-recomendaciones__cabecera,
.navegacion-recomendacion__cuerpo small {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: .075em;
}

.navegacion-grupo > a,
.navegacion-principal__pie > a {
    border-radius: 6px;
}

.navegacion-grupo > a.activo,
.navegacion-principal__pie > a.activo {
    background: var(--blue-signal-soft);
    color: var(--blue-signal);
}

.navegacion-grupo > a.activo::before {
    width: 2px;
    border-radius: 0;
    background: var(--blue-signal);
}

.navegacion-principal__crear,
.boton,
.control-link-button,
.control-main button {
    border-radius: 6px;
    font-weight: 600;
}

.navegacion-principal__crear {
    border: 1px solid var(--line-200);
    background: #fff;
    color: var(--ink-900);
    box-shadow: none;
}

.navegacion-principal__crear:hover {
    border-color: var(--blue-signal);
    background: var(--blue-signal-soft);
    color: var(--blue-signal);
}

.boton {
    background: var(--blue-signal);
    color: #fff;
}

.boton:hover {
    background: #104a4e;
}

.boton--secundario,
.dashboard .boton--secundario {
    border-color: var(--line-200);
    background: #fff;
    color: var(--ink-700);
}

.boton--secundario:hover,
.dashboard .boton--secundario:hover {
    border-color: var(--blue-signal);
    background: var(--blue-signal-soft);
    color: var(--blue-signal);
}

.estado-badge {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: .015em;
    text-transform: none;
}

/* Encabezados de producto: la serif queda para marca y superficies públicas. */
.dashboard__cabecera h1,
.notas-gestor__cabecera h1,
.nota-panel__titulo h2,
.nota-revision h2 {
    font-family: var(--font-ui);
    font-weight: 650;
    letter-spacing: -.04em;
}

.dashboard__cabecera h1,
.notas-gestor__cabecera h1 {
    font-size: clamp(30px, 3vw, 36px);
    line-height: 1.08;
}

.dashboard__eyebrow,
.dashboard-panel__eyebrow,
.notas-gestor__eyebrow,
.nota-documento__etiqueta,
.nota-documento__meta-titulo label,
.nota-panel__titulo span {
    color: var(--blue-signal);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .075em;
}

/* Listado de notas: tabla de trabajo, sin estética de tarjeta decorativa. */
.notas-gestor__cabecera {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line-200);
}

.notas-pestanas a {
    color: var(--ink-600);
    font-weight: 550;
}

.notas-pestanas a.activo {
    color: var(--blue-signal);
}

.notas-pestanas a span {
    background: var(--paper-100);
    color: var(--ink-600);
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.notas-herramientas,
.notas-tabla,
.nota-tarjeta {
    border-color: var(--line-200);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.notas-filtros input,
.notas-filtros select,
.notas-filtros button,
.notas-vistas {
    border-radius: 6px;
}

.notas-filtros button {
    background: var(--blue-signal);
    color: #fff;
}

.notas-filtros button:hover {
    background: #104a4e;
}

.notas-tabla thead,
.notas-tabla th {
    background: var(--paper-050);
    color: var(--ink-500);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .055em;
}

.notas-tabla tbody tr:hover {
    background: var(--paper-050);
}

/* Editor: el producto desaparece y deja trabajar al documento. */
.nota-editor-pagina,
.nota-edicion-layout,
.nota-documento {
    background: #fff;
}

.nota-documento {
    padding-top: 28px;
}

.nota-documento__encabezado {
    margin-bottom: 30px;
}

.nota-documento__meta-titulo > #titulo {
    color: var(--ink-950);
    font-family: var(--font-ui);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 650;
    letter-spacing: -.055em;
    line-height: 1.05;
}

.nota-documento__editor .ProseMirror {
    color: var(--ink-900);
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.72;
}

.nota-documento__editor .ProseMirror h1,
.nota-documento__editor .ProseMirror h2,
.nota-documento__editor .ProseMirror h3 {
    font-family: var(--font-ui);
    font-weight: 650;
    letter-spacing: -.035em;
}

.nota-documento__editor .ProseMirror code {
    font-family: var(--font-code);
}

.nota-panel {
    border-color: var(--line-200);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: none;
}

.nota-panel input,
.nota-panel select,
.nota-panel textarea,
.np-inspector input,
.np-inspector select,
.np-inspector textarea {
    border-color: var(--line-200);
    border-radius: 6px;
}

.nota-contexto__enlace,
.nota-contexto__historial button {
    border-radius: 6px;
}

.np-inspector__cabecera,
.np-inspector__seccion > header {
    font-family: var(--font-ui);
}

@media (max-width: 700px) {
    .dashboard__cabecera,
    .notas-gestor__cabecera {
        border-bottom-color: var(--line-200);
    }

    .nota-documento {
        padding-top: 18px;
    }

    .nota-documento__meta-titulo > #titulo {
        font-size: clamp(34px, 9vw, 40px);
        letter-spacing: -.05em;
    }
}