/* Credencial con foto: recuadro a la izquierda, panel azul en diagonal con franja celeste. */
.id-card{display:grid;grid-template-columns:36% 1fr;padding:0;min-height:290px;color:white;background:linear-gradient(135deg,var(--sky) 0 38px,white 38px);border:1px solid var(--line)}
.id-card:before{content:'';position:absolute;inset:0;background:var(--sky);clip-path:polygon(29% 0,100% 0,100% 100%,21% 100%);pointer-events:none}
.id-card:after{content:'';position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:var(--blue);clip-path:polygon(33% 0,100% 0,100% 100%,25% 100%);pointer-events:none}
.id-photo-side{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:26px 0 26px 26px}
.id-photo{display:block;position:relative;width:100%;max-width:150px;aspect-ratio:3/4;border:4px solid white;border-radius:10px;overflow:hidden;background:#eef1ff;box-shadow:0 10px 22px #071b9d33;cursor:pointer}
.id-card .id-photo-img,.id-card .id-avatar{display:block;width:100%;height:100%;object-fit:cover}
.id-photo-hint{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 4px;font-size:10px;font-weight:700;color:white;background:#071b9dd9;transition:opacity .2s}
.id-photo-hint .icon{width:14px;height:14px}
.id-photo-img~.id-photo-hint{opacity:0}
.id-photo:hover .id-photo-hint,#credential-photo:focus-visible+.id-photo .id-photo-hint{opacity:1}
#credential-photo:focus-visible+.id-photo{outline:3px solid #2395bd;outline-offset:3px}
.id-info{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;padding:26px 28px 22px 18px}
.id-card .member-identity{margin:24px 0 20px}
.id-card .member-fields{gap:16px}
.photo-actions{display:flex;align-items:center;gap:18px;margin-top:16px}
.photo-actions .btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.photo-actions .icon{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.id-photo-hint{transition:none}}
@media(max-width:800px){.id-card{min-height:0;background:linear-gradient(135deg,var(--sky) 0 28px,white 28px)}.id-photo-side{padding:18px 0 18px 16px}.id-info{padding:18px 16px 16px 12px}.id-card .credential-head img{width:78px;height:30px}.id-card .credential-head .tag{font-size:7px;padding:4px 6px}.id-card .member-identity{margin:16px 0 14px}.id-card .member-identity h2{font-size:17px}.id-card .member-fields{grid-template-columns:1fr;gap:10px;margin-bottom:12px}.id-card .member-fields span{margin-bottom:4px}.id-card button{padding-top:12px;min-height:40px}}