/* ===========================================================================
   WORKSPACE
   El armazon comun a las cuatro aplicaciones: barra superior, rail de iconos
   y el area de contenido.

   En el diseno el workspace se ve como una ventana de 1900 x 830 apoyada
   sobre un lienzo. En la web real esa ventana ES la pagina, asi que ocupa
   todo el navegador.
   =========================================================================== */

.marco {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--superficie);
}

/* ---------------------------------------------------------------------------
   BARRA SUPERIOR
   --------------------------------------------------------------------------- */

.barra {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--espacio-20);
    height: var(--alto-barra);
    padding-right: var(--espacio-16);
    border-bottom: var(--grosor-linea) solid var(--borde);
}

/* El cuadrado con las iniciales, alineado con el rail de abajo */
.barra-marca {
    flex: none;
    align-self: stretch;
    width: var(--ancho-rail);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: var(--grosor-linea) solid var(--borde);
}

/* La teja oscura con la "C" del isotipo, igual que el favicon. */
.marca-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radio-8);
    background-color: var(--tinta);
    color: var(--superficie);
}

.marca-icono svg {
    width: auto;
    height: 13px;
    fill: currentColor;
}

.barra-nombre {
    flex: none;
    white-space: nowrap;
    font-size: var(--texto-13);
    font-weight: var(--peso-semi);
}

.barra-app {
    flex: none;
    white-space: nowrap;
    font-size: var(--texto-13);
    color: var(--texto-suave);
}

/* Buscador */
.buscador {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--espacio-10);
    height: 28px;
    min-width: 280px;
    padding: 0 var(--espacio-10);
    border-radius: 7px;
    background-color: var(--fondo-campo);
}

.buscador input {
    flex: 1;
    min-width: 0;
    /* Ocupa todo el alto de la pastilla para que se pueda tocar entera */
    align-self: stretch;
    padding: 0;
    font-size: var(--texto-13);
    color: var(--tinta);
    background: none;
}

.buscador input::placeholder {
    color: var(--texto-tenue);
}

.buscador input:focus {
    outline: none;
}

/* La pista del atajo de teclado */
.tecla {
    flex: none;
    font-family: var(--fuente-mono);
    display: flex;
    align-items: center;
    height: 19px;
    padding: 0 var(--espacio-6);
    border-radius: 5px;
    background-color: var(--superficie);
    box-shadow: 0 0 0 1px rgba(23, 23, 26, 0.12);
    font-size: var(--texto-11);
    color: var(--texto-medio);
}

/* ---------------------------------------------------------------------------
   CUERPO: RAIL + VISTA
   --------------------------------------------------------------------------- */

.cuerpo {
    flex: 1;
    min-height: 0;
    display: flex;
}

.rail {
    flex: none;
    width: var(--ancho-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-8);
    padding: var(--espacio-14) 0;
    border-right: var(--grosor-linea) solid var(--borde);
}

.rail-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radio-10);
    color: var(--texto-fuerte);
    transition: background-color var(--transicion-rapida);
}

.rail-boton:hover {
    background-color: var(--fondo-hover);
    color: var(--texto-fuerte);
}

/* La aplicacion abierta se marca en negro */
.rail-boton[aria-current="page"] {
    background-color: var(--tinta);
    color: var(--superficie);
}

.rail-boton[aria-current="page"]:hover {
    background-color: var(--tinta);
    color: var(--superficie);
}

/* Los iconos heredan el color del boton */
.rail-boton svg {
    stroke: currentColor;
}


/* El area donde vive cada aplicacion */
.vista {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
}

/* Vistas que se centran y ocupan el alto disponible (sobre mi y contacto) */
.vista-centrada {
    justify-content: center;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   PALETA DE COMANDOS

   El panel de Cmd/Ctrl + K. Es un <dialog> nativo: el navegador se encarga
   del fondo, del foco atrapado dentro y de cerrar con Esc, asi que aqui solo
   queda la pinta.
   --------------------------------------------------------------------------- */

.paleta {
    width: min(560px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 96px));
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: var(--radio-12);
    background-color: transparent;
    /* Un poco por encima del centro: es donde cae la mirada al abrirse */
    margin-top: 12vh;
    overflow: visible;
}

.paleta::backdrop {
    background-color: rgba(23, 23, 26, 0.32);
    backdrop-filter: blur(2px);
}

/* Aparece con el mismo gesto que el resto del workspace: funde y asienta desde
   un 99%. La variable ya trae su curva, asi que aqui no se repite. */
.paleta[open] .paleta-caja {
    animation: aparecer var(--transicion-entrada) backwards;
}

.paleta[open]::backdrop {
    animation: fundir var(--transicion-entrada) backwards;
}

@keyframes fundir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.paleta-caja {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    overflow: hidden;
    border-radius: var(--radio-12);
    background-color: var(--superficie);
    box-shadow:
        0 0 0 1px var(--borde),
        0 24px 48px rgba(23, 23, 26, 0.18);
}

/* --- El campo de arriba --------------------------------------------------- */

.paleta-campo {
    display: flex;
    align-items: center;
    gap: var(--espacio-10);
    flex: none;
    height: 52px;
    padding: 0 var(--espacio-12) 0 var(--espacio-16);
    border-bottom: var(--grosor-linea) solid var(--borde-suave);
    color: var(--texto-tenue);
}

.paleta-campo input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: none;
    font-family: var(--fuente-base);
    font-size: var(--texto-15);
    color: var(--tinta);
}

.paleta-campo input::placeholder {
    color: var(--texto-tenue);
}

.paleta-campo input:focus {
    outline: none;
}

.paleta-cerrar {
    display: flex;
    flex: none;
    padding: var(--espacio-4);
    border: none;
    background: none;
    color: var(--texto-suave);
    cursor: pointer;
}

/* En raton se ensena la tecla que hace lo mismo; en tactil, un aspa. */
.paleta-cerrar-aspa {
    display: none;
}

/* --- La lista ------------------------------------------------------------- */

.paleta-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--espacio-8);
    overscroll-behavior: contain;
}

.paleta-grupo {
    display: flex;
    flex-direction: column;
}

.paleta-grupo[hidden] {
    display: none;
}

.paleta-grupo-titulo {
    padding: var(--espacio-12) var(--espacio-10) var(--espacio-6);
}

.paleta-opcion {
    display: flex;
    align-items: center;
    gap: var(--espacio-12);
    padding: var(--espacio-8) var(--espacio-10);
    border-radius: var(--radio-8);
    color: var(--tinta);
    text-decoration: none;
}

/* El display:flex de arriba gana al del navegador, asi que el atributo hidden
   necesita decirlo aqui para que el filtro esconda de verdad. */
.paleta-opcion[hidden] {
    display: none;
}

/* La fila marcada con el teclado y la de debajo del raton se ven igual: solo
   hay una a la vez, porque al mover el raton manda el raton y al escribir
   manda el teclado. */
.paleta-opcion[aria-selected="true"] {
    background-color: var(--fondo-activo);
}

.paleta-numero,
.paleta-icono {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radio-8);
    background-color: var(--superficie-suave);
    font-size: var(--texto-10);
    color: var(--texto-suave);
}

.paleta-opcion[aria-selected="true"] .paleta-numero,
.paleta-opcion[aria-selected="true"] .paleta-icono {
    color: var(--acento);
}

.paleta-texto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    min-width: 0;
    line-height: var(--altura-compacta);
}

.paleta-nombre {
    font-size: var(--texto-14);
    font-weight: var(--peso-medio);
}

.paleta-apunte {
    overflow: hidden;
    font-size: var(--texto-12);
    color: var(--texto-suave);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La flecha solo aparece en la fila marcada: si saliera en todas, la lista
   se llenaria de simbolos repetidos. */
.paleta-flecha {
    margin-left: auto;
    font-size: var(--texto-13);
    color: var(--texto-tenue);
    opacity: 0;
}

.paleta-opcion[aria-selected="true"] .paleta-flecha {
    opacity: 1;
}

.paleta-vacio {
    padding: var(--espacio-24) var(--espacio-10);
    font-size: var(--texto-14);
    color: var(--texto-suave);
    text-align: center;
}

/* --- El pie de atajos ----------------------------------------------------- */

.paleta-pie {
    display: flex;
    flex: none;
    gap: var(--espacio-16);
    padding: var(--espacio-10) var(--espacio-16);
    border-top: var(--grosor-linea) solid var(--borde-suave);
    background-color: var(--superficie-suave);
    font-size: var(--texto-11);
    color: var(--texto-suave);
}

.paleta-pie span {
    display: flex;
    align-items: center;
    gap: var(--espacio-6);
}

/* La hora se va al otro extremo: es dato, no atajo. */
.paleta-hora {
    margin-left: auto;
    gap: 0;
    color: var(--texto-tenue);
}

.paleta-pie .tecla {
    height: 18px;
    background-color: var(--superficie);
}

/* ---------------------------------------------------------------------------
   VISOR DE IMAGENES

   Las figuras del caso, a tamano completo. Tambien es un <dialog> nativo, por
   lo mismo que la paleta: fondo, foco y Esc ya resueltos por el navegador.
   --------------------------------------------------------------------------- */

.visor {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    overflow: hidden;
}

.visor::backdrop {
    background-color: rgba(23, 23, 26, 0.88);
}

.visor[open] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    animation: fundir var(--transicion-entrada) backwards;
}

.visor-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-16);
    min-width: 0;
    padding: var(--espacio-32) 0;
}

/* Nunca se estira mas alla de su tamano real: agrandar una captura de 1400 px
   hasta 2000 no ensena nada nuevo, solo la emborrona. */
.visor-imagen {
    max-width: 100%;
    max-height: calc(100dvh - 152px);
    width: auto;
    height: auto;
    border-radius: var(--radio-10);
    background-color: var(--superficie-imagen);
}

.visor-pie {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-10);
    max-width: 72ch;
    font-size: var(--texto-13);
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.visor-contador {
    flex: none;
    color: rgba(255, 255, 255, 0.44);
}

.visor-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radio-redondo);
    background-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    transition: background-color var(--transicion-entrada);
}

.visor-boton:hover {
    background-color: rgba(255, 255, 255, 0.20);
}

/* Con una sola figura no hay a donde ir: los botones se apagan en vez de
   desaparecer, para que la imagen no se descentre. */
.visor-boton[disabled] {
    opacity: 0.24;
    cursor: default;
}

.visor-anterior {
    justify-self: center;
}

.visor-siguiente {
    grid-column: 3;
    justify-self: center;
}

.visor-cerrar {
    position: absolute;
    top: var(--espacio-16);
    right: var(--espacio-16);
    width: 40px;
    height: 40px;
}

@media only screen and (max-width: 768px) {

    /* Con poco ancho las flechas se comen la imagen: bajan a los lados del pie */
    .visor[open] {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
    }

    .visor-caja {
        padding: 0 var(--espacio-12);
    }

    .visor-imagen {
        max-height: calc(100dvh - 208px);
    }

    .visor-anterior,
    .visor-siguiente {
        position: absolute;
        bottom: var(--espacio-24);
    }

    .visor-anterior {
        left: var(--espacio-24);
    }

    .visor-siguiente {
        grid-column: 1;
        right: var(--espacio-24);
        left: auto;
    }
}

/* Con JavaScript el campo de la barra deja de escribirse: es el boton que
   abre la paleta, asi que el cursor lo dice. */
.buscador-disparador input {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE

   Por debajo de 768px el rail se convierte en una barra inferior, que es
   donde llega el pulgar, y la barra superior se queda solo con lo esencial.
   --------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

    .buscador {
        min-width: 200px;
    }
}

@media only screen and (max-width: 768px) {

    .cuerpo {
        flex-direction: column;
    }

    .vista {
        order: 1;
        min-height: 0;
    }

    .rail {
        order: 2;
        flex-direction: row;
        width: 100%;
        height: 60px;
        padding: 0 var(--espacio-8);
        justify-content: space-around;
        align-items: center;
        border-right: none;
        border-top: var(--grosor-linea) solid var(--borde);
        /* En iOS, deja hueco para la barra de gestos */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .barra {
        gap: var(--espacio-12);
        padding-right: var(--espacio-12);
    }

    .barra-marca {
        width: 48px;
    }

    /* Sobra contexto en poco espacio: el nombre de la app ya sale en el rail */
    .barra-app {
        display: none;
    }

    .buscador {
        min-width: 0;
    }

    /* El atajo de teclado no aplica en una pantalla tactil */
    .buscador .tecla {
        display: none;
    }

    /* La paleta sigue valiendo con el dedo, pero su pie solo habla de teclas */
    .paleta {
        margin-top: 8vh;
        max-height: calc(100dvh - 64px);
    }

    /* Con .paleta-atajo a secas no bastaba: ".paleta-pie span" de arriba pesa
       mas y ganaba el display:flex. */
    .paleta-pie .paleta-atajo,
    .paleta-cerrar-tecla {
        display: none;
    }

    .paleta-cerrar-aspa {
        display: block;
    }

    /* Con el dedo, la fila necesita alto de sobra para no fallar el toque */
    .paleta-opcion {
        padding: var(--espacio-10);
    }
}

@media only screen and (max-width: 560px) {

    .barra-nombre {
        display: none;
    }
}