/*
 * Maqueta de la vista de edicion del acta de observaciones.
 *
 * Reemplaza los estilos en linea que la version anterior repartia por el guion. Se declara en
 * _Layout.cshtml con media="screen", de modo que no interviene en la impresion ni en el PDF: la
 * vista de impresion tiene su propia maqueta y no comparte ninguna de estas clases.
 *
 * El contenedor del acta mide 800 px fijos (Formulario.css), asi que la fila util ronda los 770.
 * Sobre ese ancho, la barra del editor de texto enriquecido entra en una sola linea; encajado en
 * una columna parcial se partia en tres y descuadraba la fila completa.
 */

/* ---------- La observacion como bloque ---------- */

.acta-detalle {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 7px 0;
    padding: 0;
}

.acta-cabecera {
    background-color: #f4f4f4;
    border-bottom: 1px solid #ddd;
    padding: 4px 6px;
    overflow: hidden;
}

.acta-cabecera .acta-titulo {
    float: left;
    font-size: 85%;
    font-weight: bold;
    line-height: 22px;
}

.acta-cabecera .acta-ctrls {
    float: right;
}

.acta-cuerpo {
    padding: 6px;
}

/* ---------- Campos ---------- */

.acta-campo {
    margin-bottom: 6px;
}

.acta-etiqueta {
    display: block;
    font-size: 85%;
    font-weight: bold;
    margin-bottom: 2px;
}

/*
 * El area de texto se oculta mientras se muestra la vista previa, pero sigue en el formulario: es
 * la que viaja en el envio. Se oculta con presentacion y nunca deshabilitandola, porque un campo
 * deshabilitado no se envia y se perderia la observacion.
 */
.acta-campo textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
    resize: vertical;
}

.acta-oculto {
    display: none;
}

/* ---------- Vista previa de la observacion ---------- */

/*
 * Muestra el contenido con su formato sin montar el editor. Un acta puede tener decenas de
 * observaciones, y cada instancia del editor es costosa: asi se abre sin ninguna.
 */
/*
 * El alto esta acotado y el contenido se desplaza dentro.
 *
 * Sin tope, una observacion con una tabla pegada desde un procesador de textos estiraba el bloque
 * cientos de pixeles, y un acta con varias se volvia imposible de recorrer. El tope coincide con el
 * alto del editor, de modo que la altura no salta al hacer clic para editar.
 */
.acta-vista {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 6px 8px;
    min-height: 70px;
    max-height: 260px;
    overflow-y: auto;
    cursor: text;
}

.acta-vista:hover {
    border-color: #b4b4b4;
}

.acta-vista--solo-lectura {
    background-color: #fafafa;
    cursor: default;
}

.acta-vista--vacia {
    color: #999;
    font-style: italic;
}

/* Una imagen pegada en la observacion se ajusta al ancho disponible. */
.acta-vista img {
    max-width: 100%;
    height: auto;
}

/* Una tabla traida de un procesador de textos llega con un ancho absoluto que no corresponde. */
.acta-vista table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
}

.acta-vista table td,
.acta-vista table th {
    border: 1px solid #ddd;
    padding: 3px 5px;
    vertical-align: top;
}

/* ---------- La banda de norma y adjunto ---------- */

.acta-banda {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.acta-banda .acta-norma {
    flex: 0 0 70%;
    max-width: 70%;
}

.acta-banda .acta-adjunto {
    flex: 1 1 30%;
}

/* ---------- El editor dentro de la observacion ---------- */

/*
 * El editor ocupa el ancho del bloque. Sin esto hereda el ancho del area de texto que reemplaza y
 * vuelve a quedar estrecho.
 */
.acta-campo .cke_chrome {
    width: 100% !important;
    box-sizing: border-box;
}

/* ---------- El grupo ---------- */

.acta-grupo-cab {
    height: 44px;
}

/*
 * Contenedor del buscador de grupo, centrado en la cabecera.
 *
 * Establece su propio contexto de formato para ocupar el espacio que dejan los botones flotados a
 * la derecha, en lugar de pasar por debajo de ellos.
 */
.acta-grupo-sel {
    overflow: hidden;
    text-align: center;
    padding-top: 6px;
}

/*
 * El ancho del buscador se fija aqui, en la etiqueta que lo envuelve.
 *
 * El contenedor que dibuja el selector es de linea, de modo que un ancho en porcentaje se resolvia
 * contra una etiqueta sin ancho propio: salia distinto en cada grupo y recortaba el texto. Con un
 * ancho definido en la etiqueta, y el selector al 100 % de ella, el resultado es el mismo siempre.
 *
 * El minimo garantiza que el texto de ayuda quepa completo aunque la cabecera sea estrecha.
 */
.acta-grupo-sel > label {
    display: inline-block;
    width: 60%;
    min-width: 320px;
    max-width: 100%;
    text-align: left;
    margin: 0;
}

.acta-grupo-sel .select2-container {
    display: block;
    width: 100% !important;
}

.acta-grupo-aviso {
    display: none;
    font-size: 85%;
    color: #b94a48;
    margin: 2px 0 6px 6px;
}

/* ---------- Campo obligatorio sin llenar ---------- */

/*
 * Marca del campo que falta al intentar guardar. Va en una clase y no en estilos aplicados desde el
 * guion, para que el color viva en la hoja junto al resto de la maqueta.
 *
 * La observacion se escribe en un area de texto que puede estar tapada por la vista previa o por el
 * editor, asi que la marca se aplica tambien a esos dos: el que este a la vista es el que la muestra.
 */
.acta-error {
    border-color: #A90329 !important;
    background-color: #fff0f0 !important;
}

/* El editor pinta su contenido en un marco propio, de modo que solo se le cambia el borde. */
.cke_chrome.acta-error {
    background-color: transparent !important;
}

/* ---------- La observacion enriquecida fuera del acta ---------- */

/*
 * El historial de respuestas a las observaciones muestra la observacion tal como se guardo, dentro de
 * una celda estrecha y en un cuadro de dialogo. Una tabla pegada desde un procesador de textos llega
 * con un ancho absoluto —del orden de 500 puntos— que desborda el cuadro y descuadra la tabla entera.
 *
 * Aqui solo se acota el ancho del contenido. El resto de la presentacion la sigue poniendo la tabla
 * que lo contiene, de modo que estas reglas no cambian nada del acta con texto plano.
 */
/*
 * La tabla que contiene la observacion reparte su ancho por columnas y no por contenido.
 *
 * Es el arreglo que hace falta: por omision una tabla se dimensiona a partir del contenido minimo de
 * sus celdas, y una tabla pegada desde un procesador de textos trae un minimo enorme. La celda crecia,
 * con ella la tabla entera, y el resultado se salia del cuadro de dialogo. Acotar la tabla de dentro
 * no servia de nada: su ancho se resuelve contra la celda, que era justamente la que crecia.
 *
 * Se aplica solo al acta con editor. El acta de texto plano conserva su reparto de siempre.
 */
.acta-tabla-rica {
    table-layout: fixed;
    width: 100%;
}

/* Sin esto, una palabra larga —una direccion, un codigo— vuelve a empujar la columna. */
.acta-tabla-rica > tbody > tr > td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* La observacion es la columna con mas contenido; el resto se reparte lo que queda. */
.acta-tabla-rica > tbody > tr > td:first-child {
    width: 45%;
}

.acta-texto-rico {
    text-align: left;
    /* Ultima red: lo que aun asi no quepa se desplaza dentro de la celda, sin descuadrar la tabla. */
    overflow-x: auto;
}

.acta-texto-rico img {
    max-width: 100%;
    height: auto;
}

.acta-texto-rico table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
}

.acta-texto-rico table td,
.acta-texto-rico table th {
    border: 1px solid #ddd;
    padding: 3px 5px;
    vertical-align: top;
}