/* Lleva el panel de archivos a los colores del icono.
 *
 * No se toca ningun archivo del programa: el tema define sus colores en
 * variables y aca solo se reescriben esas variables. Por eso una
 * actualizacion de SFTPGo no borra esto ni queda a medias.
 *
 * Hay dos juegos de colores porque la pagina sigue al telefono: si esta en
 * modo claro usa el primero, y si esta en modo oscuro el segundo. El mismo
 * coral no sirve para los dos: sobre blanco hay que oscurecerlo para que el
 * texto se lea, y sobre negro hay que aclararlo.
 */

:root,
[data-bs-theme="light"] {
  --bs-primary: #d9604f;
  --bs-primary-rgb: 217, 96, 79;
  --bs-primary-active: #c25143;
  --bs-primary-light: #fdeeec;
  --bs-component-active-bg: #d9604f;
  --bs-link-color: #c25143;
  --bs-link-color-rgb: 194, 81, 67;
  --bs-link-hover-color: #a8422f;
  /* Los iconos de carpeta y archivo no toman el color de los botones: el
   * tema los pinta con una variable propia, que es la que los dejaba
   * azules aunque todo lo demas ya fuera coral. */
  --bs-text-primary: #d9604f;
  --bs-primary-text-emphasis: #8f3526;
}

[data-bs-theme="dark"] {
  --bs-primary: #f9927f;
  --bs-primary-rgb: 249, 146, 127;
  --bs-primary-active: #fca294;
  --bs-primary-light: #2b1c19;
  --bs-component-active-bg: #f9927f;
  --bs-link-color: #f9927f;
  --bs-link-color-rgb: 249, 146, 127;
  --bs-link-hover-color: #fcb3a6;
  --bs-text-primary: #f9927f;
  --bs-primary-text-emphasis: #fcb3a6;
}

/* El boton principal y el foco de los campos, por si alguna regla del tema
 * trae el color escrito a mano en lugar de tomarlo de la variable. */
.btn.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: var(--bs-primary-active);
  border-color: var(--bs-primary-active);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
}

/* El logo es una imagen cuadrada con fondo propio. El tema ya le fija la
 * altura con sus clases; no hay que pisarla. Una version anterior forzaba
 * el ancho y dejaba el logo enorme, desbordando el encabezado y pisando el
 * texto de al lado.
 * Lo unico que se agrega son las esquinas redondeadas, para que el cuadrado
 * oscuro se lea como el icono de una app y no como una imagen pegada. */
img[alt="Logo"] {
  border-radius: 18%;
}

/* Para esconder cosas NO se usa :has(). Safari lo aplica de mas y llego a
 * dejar invisible la columna de nombres de la tabla de archivos, que no tiene
 * nada que ver con lo que la regla nombraba. Con un selector comun eso no
 * pasa: solo desaparece el enlace que se nombra y nada mas.
 *
 * El acceso al perfil lleva a una pantalla vacia, porque nada de lo que tenia
 * se podia guardar. */
a[href="/web/client/profile"] {
  display: none !important;
}

/* El menu de los tres puntos de cada fila quedaba tapado por la tabla.
 *
 * Los demas menus del panel abren bien; este no, porque vive adentro de una
 * celda y el navegador lo dibuja por debajo de lo que viene despues. En el
 * telefono directamente no se ve, y en pantalla ancha aparece corrido.
 *
 * Se lo sube por encima y se evita que el envoltorio de la tabla lo recorte.
 * Nada de esto cambia donde se posiciona el menu: solo en que capa se dibuja
 * y hasta donde se lo deja asomar.
 *
 * Todo apuntado al cuerpo de la tabla de archivos por su identificador, para
 * que no pueda afectar a ninguna otra parte de la pantalla. */
#file_manager_list_body .menu.menu-sub-dropdown {
  z-index: 1065;
}
/* NO tocar el overflow del contenedor de la tabla: al sacarle el recorte, la
 * tabla ensancha la pagina entera y en el telefono todo queda corrido y
 * cortado. Ya paso una vez. Si el menu volviera a quedar tapado, hay que
 * resolverlo por otro lado, no por aca. */

/* El panel fijo abajo tampoco sirvio: algun ancestro de la tabla tiene una
 * transformacion, y eso hace que "position: fixed" se ancle a ese ancestro en
 * vez de a la pantalla. O sea que el menu sigue atrapado igual.
 *
 * Queda solo la regla de capas, que si funciona: el menu se dibuja por encima.
 * Lo que falta resolver es el recorte, y no por overflow ni por fixed. */

/* ============================================================
   En el telefono, la lista de archivos deja de ser una tabla
   ============================================================

   Una tabla de cuatro columnas no entra en la pantalla de un telefono. Para
   que entre, el programa la mete dentro de un contenedor que se desplaza de
   costado, y ahi empezaban todos los problemas: ese contenedor recortaba el
   menu de cada fila y confinaba su apilamiento, cosas que en iOS no se pueden
   esquivar por mas vueltas que se le de.

   La salida no fue pelear con eso sino sacarle la razon de ser: si el
   contenido entra en el ancho del telefono, no hace falta desplazar nada. Cada
   archivo pasa a ser una linea de lista, con el nombre arriba y el tamanio y la
   fecha debajo en letra chica. Al no haber desplazamiento, el contenedor deja
   de recortar y el menu se ve entero sin ningun parche.

   Todo es visual. No se mueve ningun elemento de lugar, porque el programa
   averigua sobre que archivo actuar por la posicion en el arbol, y moverlo hace
   que las acciones caigan sobre el archivo equivocado. Ya paso una vez. */

@media (max-width: 767.98px) {
  /* La tarjeta que envuelve la lista desaparece, pero el margen de la pagina
     NO: se lo pone el contenedor de afuera, asi vale para todo por igual,
     encabezado incluido. Ponerselo solo al cuerpo de la tarjeta dejaba el
     encabezado pegado al borde, con los iconos tocando el filo de la pantalla. */
  .app-container { padding-left: 16px !important; padding-right: 16px !important; }
  #file_manager_list_container .card,
  .card.card-flush { border: 0 !important; box-shadow: none !important; background: transparent !important; }
  .card-body { padding-left: 0 !important; padding-right: 0 !important; }
  /* El encabezado de la tarjeta trae 27px propios, asi que el buscador y los
     botones quedaban mas adentro que la lista. Todo se alinea con el margen
     de la pagina y con nada mas. */
  .card-header { padding-left: 0 !important; padding-right: 0 !important; }
  /* Aire arriba y abajo, que tambien se habia perdido. */
  .app-content { padding-top: 10px !important; padding-bottom: 24px !important; }
  #kt_app_header .app-container { padding-top: 6px; padding-bottom: 6px; }

  /* La tabla se convierte en lista. Cada fila es una grilla de dos renglones:
     arriba el nombre, abajo tamanio y fecha; a los costados la casilla de
     seleccion y los botones. */
  #file_manager_list thead { display: none; }
  #file_manager_list, #file_manager_list > tbody { display: block; }
  #file_manager_list_body tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "sel nombre nombre acciones"
      "sel tam    fecha  acciones";
    align-items: center;
    column-gap: 12px;
    row-gap: 1px;
    padding: 14px 2px !important;
    margin: 0;
    border: 0 !important;
    border-bottom: 1px solid var(--bs-gray-200) !important;
  }
  #file_manager_list_body tr:last-child { border-bottom: 0 !important; }
  #file_manager_list_body td { border: 0 !important; padding: 0 !important; }
  #file_manager_list_body td:nth-child(1) { grid-area: sel; }
  #file_manager_list_body td:nth-child(2) { grid-area: nombre; min-width: 0; }
  #file_manager_list_body td:nth-child(3) { grid-area: tam; padding-left: 34px !important; }
  #file_manager_list_body td:nth-child(4) { grid-area: fecha; }
  #file_manager_list_body td:nth-child(5) { grid-area: acciones; }

  #file_manager_list_body td:nth-child(2) a {
    white-space: normal; word-break: break-word; font-weight: 600; font-size: 1rem; line-height: 1.25;
  }
  #file_manager_list_body td:nth-child(2) .ki-duotone {
    font-size: 1.5rem !important; margin-right: .6rem !important;
  }
  #file_manager_list_body td:nth-child(3),
  #file_manager_list_body td:nth-child(4) {
    font-size: .8rem; color: var(--bs-gray-600); white-space: nowrap;
  }
  /* El punto separador solo si hay tamanio: las carpetas no tienen. */
  #file_manager_list_body td:nth-child(3):not(:empty)::after {
    content: "·"; margin: 0 6px; color: var(--bs-gray-500);
  }
  #file_manager_list_body td:nth-child(5) .btn { width: 38px; height: 38px; }

  /* Al pie sobran el "mostrando tantos de tantos" y el selector de cuantos por
     pagina. En un telefono no aportan y ocupan lugar. */
  .dt-length, .dt-info { display: none !important; }
  select[id^="dt-length"] { display: none !important; }
  .dt-paging { display: flex; justify-content: center; margin-top: 10px; }

  #kt_filemanager_search_input, .dt-search input { height: 46px; border-radius: 12px; }

  /* Lo que hace que todo lo anterior valga la pena: ya no hace falta desplazar
     de costado, asi que el contenedor deja de recortar el menu. */
  .table-responsive { overflow: visible !important; }
}

/* ============================================================
   Sistema visual: tipografia, tipos de archivo y avisos
   ============================================================ */

/* ---------- Tipografia ----------
   Las mismas tres familias que el manual del servidor, para que el panel y la
   documentacion se vean de la misma casa. Archivo para titulos, Source Sans
   para leer, JetBrains Mono para datos y etiquetas.
   Se declara con la variable del propio tema, asi alcanza a toda la pagina sin
   ir componente por componente. */
:root {
  --bs-font-sans-serif: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}
/* El tema escribe la fuente del cuerpo a mano en body, sin usar su propia
   variable, asi que hay que nombrarlo directo. */
html, body, .fw-normal, .fw-semibold, input, select, textarea, button, .btn,
.form-control, .menu-link, .card, td, th {
  font-family: var(--bs-font-sans-serif) !important;
}

h1, h2, h3, h4, h5, .card-title, .fw-bold, .fw-bolder {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.012em;
}
/* Los numeros de tamanio y fecha alineados en columna se leen mejor asi. */
#file_manager_list_body td:nth-child(3),
#file_manager_list_body td:nth-child(4) { font-variant-numeric: tabular-nums; }

/* ---------- Los archivos, por tipo ----------
   El tema no trae iconos de foto ni de video, asi que se distinguen por color.
   Son los mismos tonos en claro y en oscuro, elegidos para que ninguno compita
   con el coral, que es el color de las acciones. */
#file_manager_list_body tr[data-tipo] td:nth-child(2) i { color: var(--tipo-color) !important; }
#file_manager_list_body tr[data-tipo="foto"]     { --tipo-color: #5aa9c4; }
#file_manager_list_body tr[data-tipo="video"]    { --tipo-color: #8f7bc9; }
#file_manager_list_body tr[data-tipo="audio"]    { --tipo-color: #56a882; }
#file_manager_list_body tr[data-tipo="texto"]    { --tipo-color: #8d99a5; }
#file_manager_list_body tr[data-tipo="planilla"] { --tipo-color: #4f9a6a; }
#file_manager_list_body tr[data-tipo="paquete"]  { --tipo-color: #b58a4a; }
#file_manager_list_body tr[data-tipo="otro"]     { --tipo-color: #8d99a5; }

/* ---------- Lo buscado ----------
   Amarillo no: el panel ya tiene un solo acento y dos colores de resalte se
   pelean. Se usa el mismo coral, mas tenue. */
#file_manager_list_body mark.coincide {
  background: var(--bs-primary-light);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

/* ---------- El tope de subida ----------
   Aparece debajo de la zona de soltar archivos, antes de intentar. */
.aviso-tope {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  background: var(--bs-primary-light);
  color: var(--bs-text-primary);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ---------- Compartir ----------
   El enlace, la contrasena y el vencimiento juntos y con aire, que es como se
   copian de una. */
#form_submit { font-weight: 600; }
.card.shadow-sm { border-radius: 12px; }

@media (max-width: 767.98px) {
  /* En el telefono los avisos y el formulario de compartir tambien van de
     borde a borde, como la lista. */
  .aviso-tope { font-size: 0.84rem; }
  .card-header.bg-light { border-radius: 12px 12px 0 0; }
}

/* ---------- Los nombres, en tinta y no en coral ----------
   El tema los pinta del color de los enlaces, o sea coral. Con los iconos ya
   coloreados por tipo, eso deja la lista con demasiado coral y el ojo no sabe
   donde mirar. El coral se reserva para lo que se toca: los botones y lo
   buscado. El nombre se lee, no se acciona. */
#file_manager_list_body td:nth-child(2) a {
  color: var(--bs-gray-800);
}
#file_manager_list_body td:nth-child(2) a:hover,
#file_manager_list_body td:nth-child(2) a:focus {
  color: var(--bs-text-primary);
}

/* ---------- La pantalla de acceso ----------
   El programa pone el logo y el nombre en dos columnas, uno al lado del otro.
   Apilados y centrados se leen mejor y es lo que pedia la maqueta: primero el
   icono, despues el nombre.
   Cuelga del identificador del formulario, que es lo unico que existe en esta
   pantalla y en ninguna otra. */
#sign_in_form .row {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  margin-bottom: 0.4rem;
}
#sign_in_form .row > [class*="col-"] {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
}
#sign_in_form .row h1,
#sign_in_form .row h2 {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ============================================================
   En el telefono, los dialogos suben desde abajo
   ============================================================

   Un cuadro flotando en el medio de la pantalla es de computadora. En un
   telefono, lo que se espera es un panel que sube desde el borde de abajo:
   queda al alcance del pulgar y no tapa la pantalla entera.

   Es todo apariencia. El dialogo sigue siendo el mismo elemento, en el mismo
   lugar del arbol, con los mismos botones: solo cambia donde se dibuja y como
   entra. */

@media (max-width: 767.98px) {
  .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* Deja ver un poco de la pantalla de atras, que es lo que recuerda que el
       panel se cierra tocando afuera. */
    max-height: 92vh;
    display: flex;
    align-items: flex-end;
  }

  .modal-content {
    width: 100%;
    border: 0;
    /* Solo las esquinas de arriba: las de abajo se van con el borde. */
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    /* El telefono tiene una barra inferior; sin esto los botones quedan
       debajo de ella. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* La manija de arriba. No hace nada, pero es lo que le dice a cualquiera que
     esto es un panel que sube y baja. */
  .modal-content::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--bs-gray-400);
    margin: 10px auto 2px;
    flex: none;
  }

  /* Si el contenido no entra, se desplaza el cuerpo y no el panel entero, para
     que el titulo y los botones queden siempre a la vista. */
  .modal-body { overflow-y: auto; }
  .modal-header { padding-top: 0.6rem; }
  .modal-footer { padding-bottom: 1rem; }

  /* Entra subiendo desde el borde en vez de aparecer en el medio. */
  .modal.fade .modal-dialog { transform: translateY(100%); transition: transform 0.28s ease-out; }
  .modal.show .modal-dialog { transform: translateY(0); }

  /* Los botones del pie, a lo ancho y en el orden en que se tocan: primero el
     que confirma. */
  .modal-footer .btn { flex: 1 1 0; margin: 0; }
  .modal-footer { gap: 0.6rem; flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none; }
}

/* ---------- El ancho del formulario de acceso ----------
   La tarjeta trae anchos fijos para pantalla grande, mediana y chica, pero
   ninguno para la mas chica de todas, asi que en un telefono se encogia al
   tamanio de su contenido y quedaba una columna angosta en el medio.
   Se le da todo el ancho disponible, con un tope para que en una tablet no se
   estire de mas, y se achica el margen de afuera para ganar lugar. */
@media (max-width: 767.98px) {
  .w-sm-400px {
    width: 100% !important;
    max-width: 420px;
  }
  /* El envoltorio del acceso trae 30px de cada lado; 16 alcanzan y le dejan
     mas aire al formulario. */
  .flex-center.flex-column-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   Las pantallas de un enlace compartido
   ============================================================
   Son las que ve alguien de afuera, que no tiene cuenta. Es la primera y a
   veces la unica impresion que se lleva del servidor, asi que conviene que no
   parezca abandonada. */

/* El boton de bajar usa la clase btn-block, que Bootstrap saco en su version 5
   y ya no hace nada. Por eso quedaba del tamanio de su texto, chiquito y
   perdido arriba a la izquierda de una tarjeta casi vacia. */
.btn-block {
  display: block;
  width: 100%;
}

/* El logo y el nombre vienen en dos columnas, uno al lado del otro. Puestos a
   lo ancho se acomodan solos uno debajo del otro, porque la fila ya envuelve.
   Asi no hace falta tocar la fila, que es lo que no se puede seleccionar. */
.col-5.align-items-center,
.col-5.align-items-center + .col-7 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

@media (max-width: 767.98px) {
  /* La tarjeta trae ancho para pantalla grande y mediana, ninguno para la mas
     chica, asi que se encogia al tamanio de su contenido. */
  .card.w-md-450px { width: 100% !important; max-width: 460px; }
  /* El envoltorio trae 40px de cada lado; 16 alcanzan y dejan respirar. */
  .flex-center.flex-column-fluid.p-10 { padding-left: 16px !important; padding-right: 16px !important; }
  /* El titulo y el boton de salir entran justos: que el titulo pueda partirse
     en dos lineas en vez de empujar al boton fuera de la tarjeta. */
  .card-header .card-title { min-width: 0; }
  .card-header .card-title, .card-header h3 { font-size: 1.05rem; line-height: 1.25; }
}