/* ============================================================================
   Ajwebx — Modales del shell v1.0 (foto, firma, dibujo y firmar documentos)
   Archivo: css/shell/modales-v-1.0.css
   Creado:  2026-11-01
   Requiere: css/tokens/aj-tokens-v-1.0.css y css/class/ventana-modal-v-1.2.css
   Alcance: solo las cubiertas del BASE. Las apps viven en su iframe y no se tocan.
   ============================================================================ */

.cubierta-ventana-modal
{
    background-color: rgba(244, 247, 251, .55);
}

@media screen and (min-width: 1024px)
{
    .cubierta-ventana-modal
    {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

/* Tarjeta de la ventana (el hijo directo que dibuja ventana-modal-v-1.2) */
.cubierta-ventana-modal > div
{
    background-color: var(--aj-s3, rgba(255, 255, 255, .92));
    -webkit-backdrop-filter: blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-xl, 18px);
    box-shadow: var(--aj-sh3, 0 24px 64px rgba(2, 32, 71, .18)), var(--aj-edge, inset 0 1px 0 rgba(255, 255, 255, .75));
    padding: 20px;
}

.cubierta-ventana-modal > div > button
{
    top: 10px;
    right: 10px;
}

.cubierta-ventana-modal > div > p
{
    font-size: 15px;
    color: var(--aj-ink, #1B2735);
    border-bottom: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    padding-bottom: 10px;
}

/* Botones dentro de los modales */
.cubierta-ventana-modal .btn
{
    min-height: 40px;
    border-radius: var(--aj-r-md, 10px);
    font-size: 14px;
}
.cubierta-ventana-modal .btn-null
{
    width: 32px;
    height: 32px;
    border-radius: var(--aj-r-pill, 999px);
}
.cubierta-ventana-modal .btn-null:hover
{
    background-color: rgba(15, 23, 42, .06);
}


/* ----------------------------------------------------------------------------
   Editor de foto de perfil
   ---------------------------------------------------------------------------- */
.cont-foto
{
    width: 100%;
    max-width: 380px;
}

.cont-foto .cont-cuerpo
{
    padding-top: 14px;
}

.cont-foto .cont-foto-perfil
{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 320px;
    background-color: #FFFFFF;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-lg, 14px);
    overflow: hidden;
}

.cont-foto .cont-herramientas
{
    width: 100%;
    margin-top: 14px;
    gap: 10px;
    justify-content: center;
}

#foto-btn-accion
{
    margin-top: 18px;
}


/* ----------------------------------------------------------------------------
   Editor de firma (imagen)
   ---------------------------------------------------------------------------- */
.cont-firma
{
    width: 100%;
    max-width: 32rem;
    height: auto;
    max-height: min(26rem, calc(100vh - 48px));
}

.cont-firma .cont-cuerpo
{
    height: auto;
    max-height: none;
    gap: 12px;
}

.cont-firma .herramientas
{
    gap: 10px;
    justify-content: center;
}

#firma-cont-vista-previa
{
    min-height: 180px;
    background-color: #FFFFFF;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-lg, 14px);
    overflow: hidden;
}


/* ----------------------------------------------------------------------------
   Editor de firma (dibujo)
   ---------------------------------------------------------------------------- */
.cont-frm-dgt
{
    width: 100%;
    max-width: 640px;
}

.cont-frm-dgt .cont-cuerpo
{
    padding-top: 12px;
}

.cont-frm-dgt .herramientas
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cont-frm-dgt .herramientas > .textoLight
{
    flex: 1;
    color: var(--aj-ink-2, #4A5A6E);
    font-size: 13px;
}

#frm-dgt-cont-canvas
{
    background-color: #F5F7FA;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-lg, 14px);
    padding: 10px;
    overflow: hidden;
}
#frm-dgt-cont-canvas canvas
{
    display: block;
    border-radius: var(--aj-r-md, 10px);
}


/* ----------------------------------------------------------------------------
   Firmar documentos (lista, detalle y lienzo)
   ---------------------------------------------------------------------------- */
.cont-firmar
{
    width: min(980px, calc(100vw - 32px));
    height: min(780px, calc(100vh - 48px));
    max-width: none;
    max-height: none;
}

.cont-firmar .cont-cuerpo
{
    height: calc(100% - 3.2rem);
}

.cont-firmar .item-solicitud
{
    background-color: #FFFFFF;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-md, 10px);
}

.cont-firmar .item-solicitud:hover
{
    border-color: var(--aj-link, #0B4F9E);
    box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08));
    transform: translateY(-1px);
}

.cont-firmar .contenedor-detalle,
.cont-firmar .contenedor-canvas
{
    background-color: #FFFFFF;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-md, 10px);
}

.cont-firmar .header-vista
{
    border-bottom: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
}

.cont-firmar .alerta-error
{
    background-color: #FDECEA;
    border: 1px solid #F5C6C0;
    color: var(--aj-error, #B3261E);
    border-radius: var(--aj-r-sm, 8px);
}

.cont-firmar .alerta-exito
{
    background-color: #E8F5F0;
    border: 1px solid #BFE3D6;
    color: var(--aj-ok, #0E8A6B);
    border-radius: var(--aj-r-sm, 8px);
}