/* ---------------------------------------------------------------------------
   Aspecto de aplicacion de escritorio: ventana maestra con menu superior,
   escritorio con ventanas MDI y barra de tareas.
   MudBlazor pone los controles; esta hoja pone el "chrome".
   --------------------------------------------------------------------------- */

:root {
    --menu-alto: 44px;
    --barra-tareas-alto: 40px;
    --cabecera-alto: 34px;

    --color-chrome: #1e293b;
    --color-chrome-claro: #334155;
    --color-escritorio-a: #48586e;
    --color-escritorio-b: #2b3648;
    --color-acento: #2563eb;
    --color-superficie: #ffffff;
    --color-borde: #cbd5e1;

    --sombra-ventana: 0 6px 20px rgb(15 23 42 / 35%);
    --sombra-ventana-activa: 0 12px 34px rgb(15 23 42 / 50%);
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Ventana maestra ------------------------------------------------------ */

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    height: var(--menu-alto);
    padding: 0 10px;
    background: var(--color-chrome);
    color: #f1f5f9;
    box-shadow: 0 1px 4px rgb(15 23 42 / 40%);
    z-index: 10;
}

.app-menu__marca {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 18px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}

.app-menu__separador {
    flex: 1 1 auto;
}

.app-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* --- Escritorio ----------------------------------------------------------- */

.mdi-escritorio {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 15%, rgb(255 255 255 / 7%), transparent 45%),
        linear-gradient(140deg, var(--color-escritorio-a), var(--color-escritorio-b));
}

.mdi-escritorio__vacio {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgb(255 255 255 / 55%);
    user-select: none;
}

/* --- Ventana hija --------------------------------------------------------- */

.mdi-ventana {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 360px;
    min-height: 220px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: var(--sombra-ventana);
    overflow: hidden;
}

.mdi-ventana--activa {
    box-shadow: var(--sombra-ventana-activa);
    border-color: var(--color-acento);
}

.mdi-ventana--maximizada {
    inset: 0;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    border-width: 0;
}

.mdi-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: var(--cabecera-alto);
    padding: 0 4px 0 10px;
    background: linear-gradient(180deg, #64748b, #475569);
    color: #f8fafc;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.mdi-ventana--activa .mdi-cabecera {
    background: linear-gradient(180deg, #3b82f6, var(--color-acento));
}

.mdi-cabecera:active {
    cursor: grabbing;
}

.mdi-cabecera__titulo {
    flex: 1 1 auto;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdi-cabecera__acciones {
    display: flex;
    gap: 2px;
}

.mdi-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mdi-boton:hover {
    background: rgb(255 255 255 / 22%);
}

.mdi-boton--cerrar:hover {
    background: #dc2626;
}

.mdi-contenido {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--color-superficie);
}

.mdi-tirador {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
    background:
        linear-gradient(135deg, transparent 50%, var(--color-borde) 50%, var(--color-borde) 60%,
        transparent 60%, transparent 72%, var(--color-borde) 72%, var(--color-borde) 82%, transparent 82%);
}

.mdi-ventana--maximizada .mdi-tirador {
    display: none;
}

/* --- Barra de tareas ------------------------------------------------------ */

.mdi-barra-tareas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: var(--barra-tareas-alto);
    padding: 0 10px;
    background: var(--color-chrome);
    border-top: 1px solid rgb(255 255 255 / 8%);
    overflow-x: auto;
}

.mdi-tarea {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    max-width: 210px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--color-chrome-claro);
    color: #e2e8f0;
    font-size: .8rem;
    white-space: nowrap;
}

.mdi-tarea:hover {
    background: #475569;
}

.mdi-tarea--activa {
    background: var(--color-acento);
    border-color: #93c5fd;
    color: #fff;
}

.mdi-tarea span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Listados dentro de las ventanas -------------------------------------- */

.listado {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.listado-barra {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--color-borde);
    background: #f8fafc;
}

.listado-barra__buscador {
    max-width: 260px;
}

.listado-tabla {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.listado-pie {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-top: 1px solid var(--color-borde);
    background: #f8fafc;
    text-align: right;
}

/* Gana en especificidad a las rayas y al hover de MudBlazor, que llevan tres
   elementos en el selector pero una clase menos. */
.listado-tabla .mud-table-row.fila-seleccionada > td {
    background-color: #dbeafe;
    box-shadow: inset 3px 0 0 var(--color-acento);
    font-weight: 500;
}

.guid {
    font-size: .72rem;
    color: #64748b;
}

/* --- Formularios dentro de las ventanas ----------------------------------- */

.formulario {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.formulario-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
}

.foto-editor {
    display: flex;
    align-items: center;
    gap: 16px;
}

.foto-editor__acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.formulario-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border-top: 1px solid var(--color-borde);
    background: #f8fafc;
}

/* --- Arranque y errores --------------------------------------------------- */

.arranque {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(140deg, var(--color-escritorio-a), var(--color-escritorio-b));
}

.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: rgb(255 255 255 / 20%);
    stroke-width: .4rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #93c5fd;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 2), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(50% - .8rem) 0 auto;
    text-align: center;
    color: #e2e8f0;
    font-weight: 600;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Cargando");
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: #fee2e2;
    color: #7f1d1d;
    box-shadow: 0 -1px 6px rgb(0 0 0 / 20%);
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}

/* --- Pantalla de acceso --------------------------------------------------- */

.acceso {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background:
        radial-gradient(circle at 20% 15%, rgb(255 255 255 / 7%), transparent 45%),
        linear-gradient(140deg, var(--color-escritorio-a), var(--color-escritorio-b));
}

.acceso-tarjeta {
    width: min(380px, calc(100vw - 32px));
    padding: 28px;
    border-radius: 10px;
    background: var(--color-superficie);
}

.acceso-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--color-acento);
}

/* --- Usuario en la barra de menu ------------------------------------------ */

.app-usuario {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: #f1f5f9;
    font-size: .84rem;
    white-space: nowrap;
}