/* style.css */
:root {
    --primary: #d32f2f; --primary-dark: #9a0007; --bg: #f5f7fa; --card-bg: #ffffff;
    --text: #333333; --text-light: #666666; --success: #2e7d32; --warning: #ef6c00;
    --danger: #c62828; --border: #e0e0e0;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--bg); color: var(--text); display: flex; flex-direction: column; min-height: 100vh; }
header { background-color: var(--primary); color: white; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.logo h1 { font-size: 1.3rem; font-weight: 600; }
.logo span { font-size: 0.8rem; opacity: 0.8; display: block; }
.controls-top { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.role-badge { background: rgba(255,255,255,0.2); padding: 0.5rem; border-radius: 5px; font-size: 0.85rem; font-weight: bold; text-align: center; }
.btn-toggle { background: white; color: var(--primary); border: none; padding: 0.6rem; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; font-size: 0.9rem; }
main { width: 100%; margin: 0 auto; padding: 1rem; flex: 1; }
.dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.card { background: var(--card-bg); padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid var(--border); }
.card.total { border-left-color: #2196f3; } .card.ok { border-left-color: var(--success); }
.card.alerta { border-left-color: var(--warning); } .card.vencido { border-left-color: var(--danger); }
.card h3 { font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; margin-bottom: 0.25rem; }
.card .number { font-size: 1.5rem; font-weight: bold; }
.content-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.panel { background: var(--card-bg); padding: 1.25rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.panel h2 { font-size: 1.1rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--bg); }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.form-control { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; background-color: white; }
.btn-submit { width: 100%; background: var(--primary); color: white; border: none; padding: 0.85rem; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 1rem; margin-top: 0.5rem; }
.btn-submit.edit-mode { background: #2196f3; }
.table-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.table-container { background: transparent; box-shadow: none; }
table, thead, tbody, th, td, tr { display: block; }
thead tr { position: absolute; top: -9999px; left: -9999px; }
tr { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; padding: 0.5rem 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
td { border-bottom: 1px solid #f0f0f0; position: relative; padding-left: 45% !important; text-align: right; min-height: 2.2rem; display: flex; align-items: center; justify-content: flex-end; font-size: 0.9rem; }
td:last-child { border-bottom: none; }
td::before { position: absolute; left: 10px; width: 40%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; color: var(--text-light); content: attr(data-label); }
.badge { padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
.badge.ok { background: #e8f5e9; color: var(--success); } .badge.alerta { background: #fff3e0; color: var(--warning); } .badge.vencido { background: #ffebee; color: var(--danger); }
.btn-actions { width: 100%; display: flex; justify-content: flex-end; gap: 0.5rem; }
.btn-small { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: bold; }
.btn-edit { background: #e3f2fd; color: #1565c0; flex: 1; }
.btn-delete { background: #ffebee; color: var(--danger); flex: 1; }
.admin-only { display: none; }
body.admin-mode .admin-only { display: block; }
body.admin-mode .admin-only-cell { display: flex; }

/* Modal & Toasts */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; z-index: 1000; }
.modal.active { display: flex; }
.modal-content { background: white; padding: 2rem; border-radius: 8px; width: 90%; max-width: 400px; }
.modal-close { float: right; cursor: pointer; font-size: 1.2rem; }
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 15px 25px; color: white; border-radius: 5px; opacity: 0; transition: opacity 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.show { opacity: 1; }

@media (min-width: 768px) {
    header { flex-direction: row; justify-content: space-between; align-items: center; padding: 1rem 2rem; }
    .controls-top { flex-direction: row; width: auto; }
    .btn-toggle { width: auto; }
    main { padding: 2rem; max-width: 1400px; }
    .dashboard { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .content-grid.has-form { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; }
    .table-actions { flex-direction: row; justify-content: space-between; align-items: center; }
    .search-box { max-width: 300px; }
    .table-container { background: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); overflow-x: auto; }
    table { display: table; width: 100%; border-collapse: collapse; }
    thead { display: table-header-group; }
    tbody { display: table-row-group; }
    tr { display: table-row; border: none; margin-bottom: 0; padding: 0; box-shadow: none; }
    th, td { display: table-cell; padding: 1rem; border-bottom: 1px solid var(--border); text-align: left; justify-content: flex-start; }
    th { background-color: #f8f9fa; font-weight: 600; color: var(--text-light); }
    tr:hover { background-color: #fcfcfc; }
    td::before { display: none; }
    td { padding-left: 1rem !important; }
    .btn-edit, .btn-delete { flex: none; }
}