body{font-family:Arial,Helvetica,sans-serif;margin:18px;color:#222}
.container{max-width:980px;margin:0 auto}
form{display:flex;gap:8px;margin-bottom:12px}
input[type="text"]{padding:8px;font-size:16px;flex:1}
button{padding:8px 12px;font-size:15px}

/* zona de botones */
.button-group{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
[data-bs-theme="dark"] .button-group .btn{color:#ddd;border-color:#555}
[data-bs-theme="dark"] .btn{color:#ddd;border-color:#555}

/* zona de perfil */
.profile{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #e6e9ee;padding:14px;border-radius:8px;flex-wrap:wrap}
[data-bs-theme="dark"] .profile{background:#2C3034;border:1px solid #444;color:#ddd}

.imagenV{width:140px;height:140px;object-fit:cover;background:#f3f4f6;border:1px solid #e6e9ee;border-radius:6px;flex-shrink:0}
.imagenC{width:140px;height:140px;object-fit:contain;background:#f3f4f6;border:1px solid #e6e9ee;border-radius:6px;flex-shrink:0}

/* CORREGIDO: Forzar alineación a la izquierda */
.profile .meta{
    flex:1;
    min-width:0;
    text-align:left !important;
}

/* Solo en desktop mantener alineación izquierda */
@media only screen and (min-width: 1150px) {
    .profile .meta{
        text-align:left !important;
    }
}

/* El tercer meta ocupa todo el ancho */
.profile .meta:nth-child(3){
    width:100%;
    flex-basis:100%;
    display:flex;
    gap:16px;
    align-items:flex-start;
    flex-wrap:wrap;
}

.meta h2{margin:0 0 6px;font-size:18px}
.meta .row{margin:6px 0;color:#444}
.meta .row strong{margin-right:8px}
[data-bs-theme="dark"] .meta .row{color:#ccc}

/* tablas de datos */
table{width:100%;border-collapse:collapse;margin-top:14px}
th,td{padding:8px;border:1px solid #eee;text-align:left}
.msg{color:#b00;margin-top:8px}

/* Tablet */
@media only screen and (min-width: 800px) and (max-width: 1149px) {
    form {flex-direction: column}
    .profile {flex-direction: column;align-items: center}
    .profile .meta {text-align: center !important}
}

/* Mobile */
@media only screen and (min-width: 480px) and (max-width: 799px) {
    form {flex-direction: column}
    .profile {flex-direction: column;align-items: center}
    .profile .meta {text-align: center !important}
}

/* smartphone */
@media only screen and (max-device-width : 479px) {
    form {flex-direction: column}
    .profile {flex-direction: column;align-items: center}
    .profile .meta {text-align: center !important}
}