/* ============================================================
   EDITOR DE TEXTO
   Redacción de documentos dentro del módulo de Documentación.

   El área de escritura se presenta como una hoja de papel sobre un
   fondo apagado: es la referencia que todo el mundo tiene de un
   documento, y deja claro dónde termina el margen antes de imprimir.
   ============================================================ */

/* La vista ocupa el alto disponible para que la hoja se recorra por dentro
   y la cabecera con Guardar no se pierda al bajar. */
.doc-editor-vista {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
}

/* Aviso de si lo escrito está a salvo. Se mira antes de cerrar, así que se
   pone junto al botón y no en un rincón. */
.doc-editor-estado {
    align-self: center;
    margin-right: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
}

.doc-editor-estado.sin-guardar {
    color: #d97706;
}

.editor-contenedor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #eceff1;
}

/* Un documento en el listado: mismo cuerpo que un archivo, con el icono
   centrado porque no tiene miniatura que mostrar. */
.doc-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

/* ── Barra de herramientas ──────────────────────────────────── */

.editor-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
    background: var(--tabla-encabezado-bg, #c1c6c9);
    border-bottom: 1px solid var(--tabla-linea-encabezado, #94a3b8);
    /* Se queda a la vista al recorrer un documento largo: es lo que se
       espera de una barra de formato. */
    position: sticky;
    top: 0;
    z-index: 5;
}

.editor-grupo {
    display: flex;
    gap: 2px;
    padding: 0 6px;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.editor-grupo:first-of-type {
    border-left: none;
    padding-left: 0;
}

.editor-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--tabla-encabezado-texto, #1f2937);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.editor-btn:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 0, 0, 0.12);
}

/* Marca el formato que ya tiene el texto donde está el cursor. */
.editor-btn.activo {
    background: #fff;
    border-color: var(--tabla-linea-encabezado, #94a3b8);
    color: #0a2463;
}

/* Segunda barra, solo mientras el cursor está dentro de una tabla. Va más
   apagada que la principal para que se lea como una capa contextual y no
   como parte fija del editor. */
.editor-barra-tabla {
    background: #dfe3e6;
    border-bottom: 1px solid var(--tabla-linea, #e5e7eb);
    padding: 4px 10px;
    top: 41px;   /* justo debajo de la barra principal, que también es sticky */
    z-index: 4;
}

.editor-barra-titulo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-right: 8px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.editor-estilo {
    height: 28px;
    padding: 0 8px;
    margin-right: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: #fff;
    color: #1f2937;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

/* ── La hoja ────────────────────────────────────────────────── */

.editor-hoja {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

.editor-area {
    max-width: 816px;      /* ancho de una carta a 96 ppp, el del papel real */
    min-height: 1056px;    /* su alto, para que se vea dónde acaba la página */
    margin: 0 auto;
    padding: 72px 84px;    /* márgenes de documento, ~1.9cm a los lados */
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
    color: #1f2937;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    outline: none;
}

.editor-area:focus {
    outline: none;
}

/* ── Contenido del documento ────────────────────────────────── */
/*
 * Se estila el contenido porque el reset del sistema deja los títulos y
 * las listas sin márgenes, y dentro de un documento eso los pega unos a
 * otros. Va acotado a .editor-area para no alterar nada de fuera.
 */

.editor-area p {
    margin: 0 0 10px;
}

.editor-area h1,
.editor-area h2,
.editor-area h3 {
    margin: 18px 0 8px;
    color: #0a2463;
    line-height: 1.3;
}

.editor-area h1 { font-size: 21px; font-weight: 700; }
.editor-area h2 { font-size: 17px; font-weight: 700; }
.editor-area h3 { font-size: 14px; font-weight: 700; }

.editor-area h1:first-child,
.editor-area h2:first-child,
.editor-area h3:first-child {
    margin-top: 0;
}

.editor-area ul,
.editor-area ol {
    margin: 0 0 10px;
    padding-left: 26px;
}

.editor-area li {
    margin-bottom: 3px;
}

.editor-area blockquote {
    margin: 12px 0;
    padding: 6px 14px;
    border-left: 3px solid var(--tabla-linea-encabezado, #94a3b8);
    color: #475569;
    font-style: italic;
}

.editor-area hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid var(--tabla-linea, #e5e7eb);
}

.editor-area a {
    color: #2563eb;
    text-decoration: underline;
}

.editor-area img {
    max-width: 100%;
    height: auto;
}

/* Las tablas del documento usan las mismas variables que las del resto
   del sistema: un documento no inventa su propia apariencia. */
.editor-area table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    font-size: 12px;
}

.editor-area th,
.editor-area td {
    padding: 6px 9px;
    border: 1px solid var(--tabla-linea, #e5e7eb);
    text-align: left;
    vertical-align: top;
}

.editor-area th {
    background: var(--tabla-encabezado-bg, #c1c6c9);
    color: var(--tabla-encabezado-texto, #1f2937);
    font-weight: 700;
    border-bottom: 2px solid var(--tabla-linea-encabezado, #94a3b8);
}

/* Una celda vacía no ocupa alto y la tabla se vuelve imposible de pulsar
   para escribir dentro. */
.editor-area td:empty::after {
    content: '';
    display: inline-block;
    min-height: 1em;
}

/* ── Móvil ──────────────────────────────────────────────────── */
/*
 * La hoja deja de imitar al papel: en un teléfono los márgenes de un
 * documento real se comen la mitad del ancho y no queda sitio para
 * escribir.
 */
@media screen and (max-width: 768px) {
    .editor-hoja {
        padding: 0;
    }

    .editor-area {
        max-width: none;
        min-height: 0;
        padding: 16px;
        box-shadow: none;
        font-size: 14px;
    }

    .editor-barra {
        padding: 5px 6px;
        gap: 2px;
    }

    .editor-grupo {
        padding: 0 3px;
    }
}