@import url("./_tokens.css");

.pdcc-banner,
.pdcc-banner *,
.pdcc-fab,
.pdcc-fab * { box-sizing: border-box; }

.pdcc-banner[hidden] { display: none !important; }

/* ==========================================================================
   Dialog (M3 Basic dialog scaled up)
   ========================================================================== */
.pdcc-banner__backdrop {
    position: fixed;
    inset: 0;
    background: var(--md-scrim);
    z-index: 999998;
    animation: pdccScrimIn .2s var(--md-ease-standard);
}
@keyframes pdccScrimIn { from { opacity: 0; } to { opacity: 1; } }

.pdcc-banner__panel {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    max-width: 640px;
    max-height: 88vh;
    margin: auto;
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
    font-family: var(--md-font);
    font-size: 14px;
    line-height: 1.5;
    border-radius: var(--md-shape-xl);
    box-shadow: var(--md-elevation-3);
    overflow: hidden;
    animation: pdccDialogIn .35s var(--md-ease-emphasized);
}
@keyframes pdccDialogIn {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: none; }
}

/* -------- Cabecera -------- */
.pdcc-banner__head {
    padding: 24px 24px 8px;
    text-align: left;
}
.pdcc-banner__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: var(--md-on-surface);
    letter-spacing: 0;
}
.pdcc-banner__responsable {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
}

/* -------- Cuerpo -------- */
.pdcc-banner__body {
    padding: 8px 24px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    line-height: 20px;
}
.pdcc-banner__view[hidden] { display: none; }

.pdcc-banner__lead {
    margin: 0 0 20px;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    line-height: 20px;
}

.pdcc-banner__section {
    margin: 20px 0;
    padding: 16px;
    background: var(--md-surface-container-low);
    border-radius: var(--md-shape-md);
}
.pdcc-banner__section h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-on-surface);
    letter-spacing: .1px;
}
.pdcc-banner__section p {
    margin: 0 0 8px;
    color: var(--md-on-surface-variant);
}
.pdcc-banner__section p:last-child { margin-bottom: 0; }
.pdcc-banner__section a {
    color: var(--md-primary);
    text-decoration: none;
    font-weight: 500;
}
.pdcc-banner__section a:hover { text-decoration: underline; }

/* Categorías dentro del cuerpo (dt/dd) */
.pdcc-banner__cats { margin: 0; padding: 0; }
.pdcc-banner__cats dt {
    font-weight: 500;
    color: var(--md-on-surface);
    margin: 12px 0 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pdcc-banner__cats dt:first-child { margin-top: 0; }
.pdcc-banner__cats dd {
    margin: 0 0 4px;
    padding-left: 0;
    color: var(--md-on-surface-variant);
    font-size: 13px;
    line-height: 18px;
}
.pdcc-banner__req {
    display: inline-block;
    padding: 2px 10px;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    border-radius: var(--md-shape-sm);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.pdcc-banner__contact {
    font-size: 12.5px;
    line-height: 18px;
    color: var(--md-on-surface-variant);
}

/* -------- Toggles M3 (vista prefs) -------- */
.pdcc-banner__toggles {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pdcc-banner__toggles li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 20px 16px;
    background: var(--md-surface-container-low);
    border-radius: var(--md-shape-md);
    margin-bottom: 8px;
    align-items: center;
}
.pdcc-banner__toggles li:last-child { margin-bottom: 0; }
.pdcc-banner__toggles h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--md-on-surface);
}
.pdcc-banner__toggles p {
    margin: 0;
    color: var(--md-on-surface-variant);
    font-size: 13px;
    line-height: 18px;
}

/* M3 Switch */
.pdcc-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    height: 32px;
}
.pdcc-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pdcc-toggle__track {
    display: block;
    width: 52px;
    height: 32px;
    background: var(--md-surface-container-highest);
    border: 2px solid var(--md-outline);
    border-radius: var(--md-shape-full);
    position: relative;
    transition: background .2s var(--md-ease-standard), border-color .2s var(--md-ease-standard);
}
.pdcc-toggle__track::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--md-outline);
    border-radius: 50%;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    transition: transform .25s var(--md-ease-emphasized),
                width .2s var(--md-ease-standard),
                height .2s var(--md-ease-standard),
                background .2s var(--md-ease-standard),
                left .25s var(--md-ease-emphasized);
}
.pdcc-toggle input:checked + .pdcc-toggle__track {
    background: var(--md-primary);
    border-color: var(--md-primary);
}
.pdcc-toggle input:checked + .pdcc-toggle__track::after {
    background: var(--md-on-primary);
    width: 24px;
    height: 24px;
    left: 24px;
}
.pdcc-toggle:hover .pdcc-toggle__track::after { transform: translateY(-50%) scale(1.1); }
.pdcc-toggle input:focus-visible + .pdcc-toggle__track {
    outline: 2px solid var(--md-primary);
    outline-offset: 3px;
}
.pdcc-toggle__disabled {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: var(--md-surface-container-highest);
    color: var(--md-on-surface-variant);
    border-radius: var(--md-shape-sm);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* -------- Pie con botones -------- */
.pdcc-banner__foot {
    padding: 16px 24px 24px;
    background: var(--md-surface-container-high);
}
.pdcc-banner__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
}
.pdcc-banner__actions[hidden] { display: none; }

/* ==========================================================================
   Botones M3
   ========================================================================== */
.pdcc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 64px;
    padding: 0 24px;
    font-family: var(--md-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1px;
    text-transform: none;
    cursor: pointer;
    border: none;
    border-radius: var(--md-shape-full);
    transition: box-shadow .2s var(--md-ease-standard),
                background-color .15s var(--md-ease-standard);
    overflow: hidden;
    line-height: 1;
}
/* State layer */
.pdcc-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity .15s var(--md-ease-standard);
    pointer-events: none;
}
.pdcc-btn:hover::before   { opacity: .08; }
.pdcc-btn:focus-visible::before,
.pdcc-btn:active::before  { opacity: .12; }
.pdcc-btn:focus-visible   { outline: none; }

/* Filled button (primario) */
.pdcc-btn--primary {
    background: var(--md-primary);
    color: var(--md-on-primary);
}
.pdcc-btn--primary:hover { box-shadow: var(--md-elevation-1); }

/* Tonal button (secundario) */
.pdcc-btn--outline {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

/* Text button */
.pdcc-btn--ghost {
    background: transparent;
    color: var(--md-primary);
    padding: 0 12px;
    min-width: 48px;
}

/* -------- Scrollbar M3 -------- */
.pdcc-banner__body::-webkit-scrollbar        { width: 8px; }
.pdcc-banner__body::-webkit-scrollbar-track  { background: transparent; }
.pdcc-banner__body::-webkit-scrollbar-thumb  { background: var(--md-outline-variant); border-radius: var(--md-shape-full); }
.pdcc-banner__body::-webkit-scrollbar-thumb:hover { background: var(--md-outline); }

/* ==========================================================================
   Extended FAB (M3)
   ========================================================================== */
.pdcc-fab {
    position: fixed;
    z-index: 999997;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 20px 0 16px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    font-family: var(--md-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1px;
    cursor: pointer;
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elevation-3);
    transition: box-shadow .25s var(--md-ease-standard),
                transform .25s var(--md-ease-emphasized);
    line-height: 1;
    overflow: hidden;
    isolation: isolate;
}
.pdcc-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity .15s var(--md-ease-standard);
    z-index: -1;
}
.pdcc-fab:hover                { box-shadow: var(--md-elevation-4); }
.pdcc-fab:hover::before        { opacity: .08; }
.pdcc-fab:focus-visible        { outline: 2px solid var(--md-primary); outline-offset: 3px; }
.pdcc-fab:focus-visible::before,
.pdcc-fab:active::before       { opacity: .12; }
.pdcc-fab:active               { box-shadow: var(--md-elevation-3); }

.pdcc-fab__icon { width: 24px; height: 24px; flex-shrink: 0; }
.pdcc-fab__label { display: inline-block; }

/* Posiciones */
.pdcc-fab--bottom-left  { bottom: 24px; left: 24px; }
.pdcc-fab--bottom-right { bottom: 24px; right: 24px; }
.pdcc-fab--top-left     { top: 24px;    left: 24px; }
.pdcc-fab--top-right    { top: 24px;    right: 24px; }

/* FAB compacto (solo icono) en móvil */
@media (max-width: 600px) {
    .pdcc-fab {
        width: 56px;
        height: 56px;
        padding: 0;
        justify-content: center;
        border-radius: var(--md-shape-lg);
    }
    .pdcc-fab__label { display: none; }
}

/* Ocultar FAB mientras el diálogo está abierto */
body.pdcc-modal-open .pdcc-fab,
body:has(.pdcc-banner:not([hidden])) .pdcc-fab { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
    .pdcc-banner__panel {
        max-width: none;
        max-height: 100vh;
        border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0;
        inset: auto 0 0 0;
        margin: 0;
    }
    .pdcc-banner__head,
    .pdcc-banner__body,
    .pdcc-banner__foot { padding-left: 20px; padding-right: 20px; }
    .pdcc-banner__title { font-size: 22px; line-height: 28px; }
    .pdcc-banner__actions { justify-content: stretch; }
    .pdcc-btn { flex: 1 1 auto; }
    .pdcc-btn--ghost { flex-basis: 100%; }
}