/* =========================================================================
   NG INGENIERIA Y SERVICIOS — apariencia del archivo de correo
   archivo.ingenieriang.cl · Kathryn, 2026-10-06

   COMO SE CARGA ESTO, y por que asi:
   Piler tiene un hueco oficial para hojas propias, $config['CUSTOM_CSS'], que
   se imprime en TODAS sus plantillas y se carga DESPUES de la suya. Se define
   en /etc/piler/config-site.php, que piler lee ANTES de fijar sus propios
   valores — por eso este si se puede cambiar y CSS_CODE no.

   NO se toca /assets/css/piler.css. La hoja de piler queda intacta, asi que una
   actualizacion suya no puede romper esto ni al reves.

   LA CACHE: la etiqueta la escribimos nosotros y lleva ?v=N. AL CAMBIAR ESTE
   ARCHIVO HAY QUE SUBIR ESE NUMERO en config-site.php. Es lo unico que hay que
   recordar, y es lo que impide que Cloudflare o el navegador sirvan una version
   vieja — el problema que costo una tarde entera el 2026-10-03.

   El archivo fuente vive en D:\NGarchive\ng.css y se monta en el compose.
   Para volver al aspecto de fabrica: quitar ese montaje y la linea CUSTOM_CSS.
   ========================================================================= */

/* Pieza 1: solo el mecanismo. Sin cambios visuales todavia. */

/* ------------------------------------------------------------------------
   PIEZA 2 — DOS COLUMNAS: la lista a la izquierda, la lectura a la derecha.

   Piler apila los dos paneles en vertical. Aqui se ponen en fila a partir de
   992px de ancho; por debajo se quedan apilados, que es lo correcto en un
   movil o en una tableta en vertical.

   EL DIVISOR SE DEJA FIJO a proposito: el script de piler lo arrastra en
   VERTICAL, y aqui el reparto es horizontal, asi que un arrastre deformaria
   las columnas. Se le quita el raton y queda como separacion.

   NO SE TOCA .searchcontainer: su padding-top de 65px es lo unico que impide
   que la barra fija de arriba tape el buscador.
   ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .container-panes {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
  }
  .container-panes .pane-upper {
    flex: 1 1 62%;
    min-width: 0;
    height: auto !important;
  }
  .container-panes .resizer {
    flex: 0 0 14px;
    cursor: default;
    pointer-events: none;
    background: transparent;
  }
  .container-panes #preview {
    flex: 1 1 38%;
    min-width: 0;
    height: auto !important;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------------
   PIEZA 3 — LOS BOTONES DE LA BARRA DE BUSQUEDA.

   Piler los pinta pegados entre si, uno rojo y dos grises, formando un
   bloque. Aqui pasan a ser tres pastillas separadas con aire entre ellas:

     Buscar              negro del logotipo, texto claro
     Busqueda avanzada   blanco con borde
     Opciones            blanco con borde   ← CON SU TEXTO. Nada de iconos:
                                              decision de Kathryn, 2026-10-06

   Los identificadores son los reales de la plantilla: #button_search,
   #button_expert y #button_options, comprobados en layout-search.tpl.
   El campo de busqueda tambien pasa a pastilla para que todo case.
   ------------------------------------------------------------------------ */

#_search {
  border-radius: 999px;
  padding: 11px 20px;
  border: 1px solid #E6E2DC;
  box-shadow: 0 1px 2px rgba(20,18,17,.05);
}
#_search:focus {
  border-color: #8C7F6C;
  box-shadow: 0 0 0 3px rgba(140,127,108,.15);
  outline: none;
}

.searchcontainer .btn-search,
.searchcontainer .btn-options {
  border-radius: 999px !important;
  margin-left: 10px;
  padding: 10px 22px;
  font-size: .94rem;
  font-weight: 500;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(20,18,17,.05);
  transition: background .15s ease, border-color .15s ease;
}

#button_search {
  background: #141211 !important;
  border-color: #141211 !important;
  color: #FFFFFF !important;
}
#button_search:hover { background: #2A2622 !important; }

#button_expert,
#button_options {
  background: #FFFFFF !important;
  border-color: #E6E2DC !important;
  color: #1E1B19 !important;
}
#button_expert:hover,
#button_options:hover {
  background: #F1ECE4 !important;
  border-color: #C9BDAD !important;
}

/* ------------------------------------------------------------------------
   PIEZA 4 — LA BARRA Y LOS COLORES.

   Paleta sacada del logotipo de NG y de ningun otro sitio:
     #141211  negro calido de las letras
     #C9BDAD  topo del edificio
     #8C7F6C  el mismo topo oscurecido, para que contraste sobre blanco
     #F7F6F4  fondo blanco calido
     #E6E2DC  bordes
     #F1ECE4  fila seleccionada

   LA BARRA DE ARRIBA ES #menu, NO #header, y va en position:fixed. #header es
   el contenedor blanco que la envuelve. Confundirlos fue el fallo del
   2026-10-03 y por eso esta escrito aqui.

   .searchcontainer NO SE TOCA: su padding-top de 65px es lo unico que impide
   que esa barra fija tape el buscador.

   Las filas de resultados son .resultrow, y la seleccionada
   .resultrow.highlighted — comprobado en piler.js, no supuesto.
   ------------------------------------------------------------------------ */

body { background: #F7F6F4; color: #1E1B19; }

/* Piler fuerza minusculas en la barra y los titulos. Con nombres propios y
   asuntos reales eso queda descuidado. */
#menu, #header, #logincontainer, h1, h2, h3 { text-transform: none !important; }

/* --- La barra superior --- */
#menu {
  background: #141211 !important;
  font-size: .95rem !important;
  font-weight: 400 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
#header { background: transparent !important; }

.menulink {
  color: #EDE9E3 !important;
  font-size: .95rem !important;
  margin-left: 4px !important;
  padding: 12px 14px !important;
  border-radius: 8px;
  transition: background .15s ease;
}
.menulink:hover {
  background: rgba(255,255,255,.10) !important;
  color: #FFFFFF !important;
  text-decoration: none;
}
.branding_logo { height: 30px !important; width: auto !important; }

/* --- Los desplegables --- */
.dropdown-menu {
  font-size: .95rem !important;
  text-transform: none !important;
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20,18,17,.05), 0 2px 10px rgba(20,18,17,.04);
  padding: 6px;
}
.dropdown-menu li.dropdown-item,
.dropdown-menu a.dropdown-item {
  border-radius: 7px;
  padding: 8px 12px;
  color: #1E1B19;
}
.dropdown-menu li.dropdown-item:hover,
.dropdown-menu a.dropdown-item:hover {
  background-color: #F1ECE4 !important;
  color: #141211 !important;
}

/* --- Los dos paneles, como tarjetas --- */
.pane-upper, #preview {
  background: #FFFFFF;
  border: 1px solid #E6E2DC !important;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20,18,17,.05), 0 2px 10px rgba(20,18,17,.04);
  overflow: hidden;
}
.pane-upper-content { border: 0 !important; }
.pane-upper-fixed {
  background: #FFFFFF;
  border-top: 1px solid #E6E2DC;
  color: #6F675E;
}

/* --- La tabla: el aire entre filas es lo que mas cambia la sensacion --- */
.pane-upper thead th {
  background: #FFFFFF;
  border-bottom: 1px solid #E6E2DC !important;
  color: #6F675E;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 12px;
}
.pane-upper tbody td {
  padding: 13px 12px;
  border-bottom: 1px solid #F0EDE8 !important;
  vertical-align: middle;
  font-size: .92rem;
}
tr.resultrow { transition: background .12s ease; }
tr.resultrow:hover { background: #FAF8F5; }
tr.resultrow.highlighted {
  background: #F1ECE4 !important;
  box-shadow: inset 3px 0 0 #8C7F6C;
}

/* --- Enlaces --- */
a { color: #8C7F6C; }
a:hover { color: #141211; }

/* --- El panel de lectura --- */
#preview { padding: 20px 24px; }
.messageheader {
  background-color: #FAF8F5 !important;
  border-bottom: 1px solid #E6E2DC !important;
  border-radius: 8px;
  padding: 12px !important;
}

/* --- Modo oscuro: la barra se queda negra --- */
[data-theme="dark"] #menu { background: #0E0D0C !important; }

/* ------------------------------------------------------------------------
   CORRECCION de la pieza 4 (Kathryn, 2026-10-06).
   El `overflow: hidden` que redondea las esquinas dejo el panel de lectura
   SIN BARRA DE DESPLAZAMIENTO: un mensaje largo no se podia leer entero.
   La lista no lo sufria porque su scroll vive en .pane-upper-content.
   Aqui se le devuelve el desplazamiento vertical al panel de lectura.
   ------------------------------------------------------------------------ */
#preview {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ------------------------------------------------------------------------
   AJUSTE (Kathryn, 2026-10-06): el panel de lectura mas ancho.
   Pasa del 62/38 inicial a mitad y mitad. Va al final del archivo para que
   gane sobre el reparto de la pieza 2, que se deja como estaba para no
   perder el comentario que explica el resto del bloque.
   ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .container-panes .pane-upper { flex: 1 1 50% !important; }
  .container-panes #preview    { flex: 1 1 50% !important; }
}

/* ------------------------------------------------------------------------
   LA TABLA DE MENSAJES: anchos fijos y sin tiradores (Kathryn, 2026-10-06).

   ESTANDAR DE INDUSTRIA. En un cliente de correo —Outlook, Gmail, Roundcube,
   Thunderbird— la lista de mensajes NO tiene columnas que el usuario arrastre:
   los anchos los fija la aplicacion. Las columnas arrastrables pertenecen a
   las tablas de datos de un panel de administracion, y alli el estandar es
   table-layout: fixed con anchos declarados, justo para que mover una no
   descoloque a las demas.

   Piler combina lo peor: pone tiradores de 5px (.resizer-search-results, que
   crea resize_result_columns() en piler.js) sobre una tabla de ancho
   automatico. Por eso al arrastrar una columna se movian las vecinas.

   Aqui: tiradores fuera y anchos declarados. El Asunto se queda el espacio
   sobrante, que es la columna que de verdad se lee.
   ------------------------------------------------------------------------ */

.resizer-search-results { display: none !important; }

#results {
  table-layout: fixed;
  width: 100%;
}

/* casilla · num · fecha · de · para · asunto · tamano · avisos · adjunto · nota · etiqueta */
#results th:nth-child(1), #results td:nth-child(1) { width: 34px;  text-align: center; }
#results th:nth-child(2), #results td:nth-child(2) { width: 42px;  text-align: right; color: #9A9188; }
#results th:nth-child(3), #results td:nth-child(3) { width: 104px; white-space: nowrap; }
#results th:nth-child(4), #results td:nth-child(4) { width: 20%; }
#results th:nth-child(5), #results td:nth-child(5) { width: 20%; }
#results th:nth-child(6), #results td:nth-child(6) { width: auto; }
#results th:nth-child(7), #results td:nth-child(7) { width: 72px;  text-align: right; white-space: nowrap; }
#results th:nth-child(n+8), #results td:nth-child(n+8) { width: 34px; text-align: center; }

/* Con anchos fijos hace falta decir que hacer con lo que no cabe: el
   remitente y el destinatario se cortan con puntos suspensivos, como en
   cualquier bandeja de entrada. El asunto si puede ocupar dos lineas. */
#results td:nth-child(4),
#results td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------
   VISOR DE ADJUNTOS EN CAPA (Kathryn, 2026-10-06).
   El comportamiento esta en ng.js; aqui solo su aspecto.
   ------------------------------------------------------------------------ */
.ng-visor {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(20,18,17,.72);
  padding: 24px;
}
.ng-visor.abierto { display: flex; align-items: center; justify-content: center; }

.ng-visor-caja {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  width: min(1100px, 100%);
  height: min(90vh, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ng-visor-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  background: #141211;
  color: #EDE9E3;
}
.ng-visor-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}
.ng-visor-descargar {
  flex: 0 0 auto;
  background: #FFFFFF;
  color: #141211 !important;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: .9rem;
  text-decoration: none;
}
.ng-visor-descargar:hover { background: #F1ECE4; color: #141211 !important; }

.ng-visor-cerrar {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: #EDE9E3;
  font-size: 1.9rem;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}
.ng-visor-cerrar:hover { color: #FFFFFF; }

.ng-visor-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  background: #3A3632;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.ng-visor-pdf { width: 100%; height: 100%; border: 0; display: block; }
.ng-visor-img { max-width: 100%; max-height: 100%; display: block; }

/* Aviso mientras LibreOffice convierte un documento de Office. */
.ng-visor-aviso {
  position: absolute;
  color: #EDE9E3;
  font-size: .95rem;
  letter-spacing: .02em;
}
.ng-visor-cuerpo { position: relative; }

/* ------------------------------------------------------------------------
   LA BARRA DEL PIE DE LA LISTA (Kathryn, 2026-10-06).

   Es #messagelistfooter, con las clases boxfooter y UPPER-pane-fixed. Ojo:
   la hoja de piler define tambien .pane-upper-fixed, con las dos palabras al
   reves, que no la usa nadie. Las reglas que escribi antes para ese nombre no
   hacian nada.

   Las flechas quedaban pegadas al borde y a ras del suelo porque la columna
   izquierda lleva ps-0 y la barra no tiene alto propio. Aqui se le da altura,
   se centra su contenido en vertical y se le pone margen a los lados.
   ------------------------------------------------------------------------ */
#messagelistfooter {
  min-height: 46px;
  align-items: center;
  padding-left: 14px !important;
  padding-right: 14px !important;
  background: #FFFFFF;
  border-top: 1px solid #E6E2DC;
}
#messagelistfooter .functionbox {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 46px;
}
#messagelistfooter .ps-0 { padding-left: 0 !important; }
#messagelistfooter .navlink { padding: 0 3px; }
#messagelistfooter .tagtext { height: 30px; }

/* ------------------------------------------------------------------------
   PANTALLA DE ENTRADA A DOS COLUMNAS (Kathryn, 2026-10-06).

   Izquierda: el titulo y los campos. Derecha: su imagen a sangre con el logo
   encima. El material lo preparo ella y se usa tal cual: ni velos ni filtros.

   TODO ESTO ES CSS. No se toca ninguna plantilla, asi que esta parte no tiene
   la fragilidad de los parches del visor de adjuntos.

   El logo que piler pone sobre el formulario se oculta: va en la imagen.
   En su lugar, un titulo centrado.

   Por debajo de 992px se apila a una sola columna y la imagen desaparece, que
   es lo correcto en un movil: ahi lo que importa es poder escribir el usuario
   y la contrasena sin estorbos.
   ------------------------------------------------------------------------ */
body#loginpage {
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  display: grid;
  grid-template-columns: minmax(400px, 40%) 1fr;
  background: #FFFFFF;
}

body#loginpage #logincontainer {
  grid-column: 1;
  max-width: none;
  width: 100%;
  padding: 40px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* El logo de piler sobre el formulario, fuera: el de la empresa va en la
   imagen de la derecha. */
body#loginpage #logo-lg { display: none !important; }

body#loginpage #logincontainer::before {
  content: "Archivo Ingenieria NG";
  display: block;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 600;
  color: #141211;
  margin-bottom: 30px;
}

/* La columna de la derecha no existe en el HTML: se crea aqui. Lleva dos
   fondos en la misma capa, el logo delante y la fotografia detras. */
body#loginpage::after {
  content: "";
  grid-column: 2;
  background-image: url("/assets/images/ng-logo-med.png"),
                    url("/assets/images/login-bg.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 330px auto, cover;
}

/* La caja del formulario, con el mismo aire que el resto del archivo. */
body#loginpage .form-signin {
  border: 1px solid #E6E2DC;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,18,17,.05), 0 2px 10px rgba(20,18,17,.04);
  padding: 26px 28px 30px;
}

@media (max-width: 991.98px) {
  body#loginpage { grid-template-columns: 1fr; }
  body#loginpage::after { display: none; }
  body#loginpage #logincontainer { padding: 32px 20px; }
}


/* ------------------------------------------------------------------------
   EL MENSAJE A PANTALLA COMPLETA EN EL TELEFONO (Kathryn, 2026-10-07).

   En movil piler no usa el panel lateral: abre el correo en un dialogo,
   #previewMessageModal, y dentro mete EL MISMO div #preview que en el
   escritorio. Como piler le fija height:500px, el texto se cortaba ahi y
   quedaba un hueco muerto debajo.

   Aqui el cuerpo del dialogo reparte el alto disponible y #preview lo ocupa
   entero, con su propio desplazamiento. Se le quitan borde, sombra y esquinas
   porque dentro de un dialogo a pantalla completa no pintan nada.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  #previewMessageModal .modal-content { height: 100%; }

  #previewMessageModal .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 12px !important;
    margin-bottom: 0 !important;
    overflow: hidden;
  }

  #previewMessageModal #preview {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }

  /* El pie del dialogo, sin ocupar mas de lo necesario. */
  #previewMessageModal .modal-footer { padding: 8px 12px; }
}