* { 
    box-sizing: border-box; 
}

body { 
    margin: 0; 
    font-family: Arial, sans-serif; 
    color: #222; 
    background: #f5f5f5; 
}

header { 
    padding: 16px; 
    background: #fff; 
    border-bottom: 1px solid #ddd; 
}

h1 { 
    margin: 0 0 4px; 
    font-size: 25px; 
}

header small, .nota { 
    color: #666; 
    font-size: 12px; 
}

main { 
    max-width: 680px; 
    margin: auto; 
    padding: 15px; 
}

section { 
    background: white; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    padding: 15px; 
    margin-bottom: 15px; 
}

h2 { 
    margin-top: 0; 
    font-size: 21px; 
} 

h3 { 
    border-top: 1px solid #ddd; 
    padding-top: 15px; 
}

label { 
    display: block; 
    margin: 12px 0; 
    font-size: 14px; 
}

input, select, textarea 
{ 
    display: block; 
    width: 100%; 
    padding: 10px; 
    margin-top: 5px; 
    border: 1px solid #bbb; 
    border-radius: 4px; 
    background: white; 
    font: inherit; 
}

button { 
    padding: 10px 12px; 
    border: 0; 
    border-radius: 4px; 
    background: #041a3e; 
    color: white; 
    font-size: 14px; 
    margin: 4px 4px 4px 0; 
    cursor: pointer; 
}

button.secundario { 
    background: #e8e8e8; 
    color: #222; 
    border: 1px solid #ccc; 
}

button.peligro { 
    background: #a32929; 
}

button:disabled { 
    opacity: .55; 
}

nav { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
    margin: 12px 0; 
}

nav button { 
    flex: 1 1 auto; 
}

.barra-usuario { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 8px; 
}

.resumen { 
    display: flex; 
    gap: 8px; 
    margin: 15px 0; 
}

.resumen div { 
    flex: 1; 
    border: 1px solid #ddd; 
    padding: 10px; 
    font-size: 12px; 
}

.resumen strong { 
    display: block; 
    font-size: 23px; 
    margin-top: 4px; 
}

.tarjeta { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 12px; 
    margin: 10px 0; 
}

.tarjeta h3 { 
    border: 0; 
    padding: 0; 
    margin: 0 0 6px; 
}

.tarjeta img, #vista-foto { 
    display: block; 
    max-width: 100%; 
    max-height: 230px; 
    object-fit: contain; 
    margin: 10px 0; 
}

.detalle { 
    color: #666; 
    font-size: 13px; 
    margin: 5px 0; 
}

#mensaje { 
    padding: 12px; 
    background: #fff1c5; 
    border: 1px solid #e5cb70; 
    border-radius: 4px; 
}

#mensaje.error { 
    background: #ffe5e5; 
    border-color: #d99; 
}

[hidden] {
     display: none !important; 
    }