/* style.css - Minimalista y compacto */

/* RESET */
* { box-sizing: border-box; margin:0; padding:0; font-family: Arial, sans-serif; }
body {color: #333; line-height: 1.4; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Contenedor principal centrado */
.container { max-width: 500px; margin: 30px auto; padding: 15px; }

/* Tarjetas */
.card { background: #f7f7f7; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }


/* Encabezados */
h1,h2,h3 { margin-bottom: 12px; color: #222; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }

/* Formularios compactos */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], select {
    width: 100%; 
    padding: 6px 8px; 
    margin: 6px 0 12px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px;
    font-size: 0.95em;
}

button {
    padding: 8px 12px; 
    border: none; 
    border-radius: 4px; 
    background-color: #007bff; 
    color: #fff; 
    cursor: pointer; 
    font-size: 0.95em;
}
button:hover { background-color: #0056b3; }

/* Botones de acción diferenciados */
button.confirm { background-color: #28a745; }
button.confirm:hover { background-color: #218838; }
button.propose { background-color: #52cbe3; }
button.propose:hover { background-color: #52cbe3; }

/* Tablas */
table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.95em; }
table th, table td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; }
table th { background-color: #f0f0f0; }

/* Etiquetas de estado */
.status-PENDIENTE { background: #ffc107; color: #212529; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.status-PROPUESTA { background: #0dcaf0; color: #212529; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.status-CONFIRMADA { background: #28a745; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: bold; }

/* Preferencia de género */
.status-M { background-color: #0B59B0; color: white; padding: 2px 6px; border-radius: 4px; }
.status-F { background-color: #ff69b4; color: white; padding: 2px 6px; border-radius: 4px; }
.status-INDIFFERENT { background-color: #6c757d; color: white; padding: 2px 6px; border-radius: 4px; }

/* Mensajes */
p.muted { font-size: 0.85em; color: #666; margin-bottom: 12px; }
p.success { color: #28a745; font-weight: bold; }
p.error { color: #dc3545; font-weight: bold; }

/* Formularios en línea (propuesta de fecha/hora) */
.inline { display: inline-block; vertical-align: middle; margin-right: 5px; }
.proposal-form input[type=date], .proposal-form input[type=time] { width: 120px; padding: 4px; margin-right: 4px; }
.proposal-form button { padding: 5px 8px; font-size: 0.85em; }

/* Enlaces de logout */
.logout-btn { float: right; background: #dc3545; color: white; padding: 6px 10px; border-radius: 4px; font-size: 0.9em; }
.logout-btn:hover { background: #c82333; }

/* Responsive */
@media (max-width: 520px) {
    .container { margin: 15px; padding: 10px; }
    .proposal-form input[type=date], .proposal-form input[type=time] { width: 100px; }
}
body { font-family: sans-serif; margin:0; padding:0; }
header { background:#f0f0f0; color:#333; padding:15px; text-align:center; border-bottom:1px solid #ddd; }
main { max-width:600px; margin:20px auto; padding:15px; }
section.card { background:white; padding:15px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1); margin-bottom:20px; }
form .row { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
form .row .col { flex:1; display:flex; flex-direction:column; min-width:120px; }
form input, form select, form button { padding:6px; font-size:0.9em; border-radius:4px; border:1px solid #ccc; }
form button { background:#28a745; color:white; border:none; cursor:pointer; margin-top:5px; }
form button:hover { background:#218838; }
table { width:100%; border-collapse:collapse; margin-top:10px; font-size:0.9em; }
table th, table td { border:1px solid #ccc; padding:6px; text-align:left; }
.status-pendiente { background:#ffc107; padding:2px 6px; border-radius:4px; }
.status-propuesta { background:#0dcaf0; padding:2px 6px; border-radius:4px; }
.status-confirmada { background:#28a745; padding:2px 6px; border-radius:4px; color:white; }
#formMessage { margin-top:10px; font-weight:bold; }