:root {
  --primary: #772432;
  --primary-dark: #5d1c28;
  --primary-light: #fbe9eb;
  --surface: #FFFFFF;
  --background: #F3EDF7;
  --outline: #79747E;
  --success: #2E7D32;
  --warning: #EF6C00;
  --error: #B3261E;
  --info: #1A73E8;
  --reservado: #673AB7;
  --border-radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
body { background-color: var(--background); padding: 20px; color: #1C1B1F; }

.top-app-bar {
  background: var(--surface); padding: 16px 30px; display: flex; align-items: center; justify-content: space-between; border-radius: var(--border-radius-lg); box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-bottom: 24px;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.title-group h1 { font-size: 22px; color: var(--primary); font-weight: 900; }
.title-group small { color: var(--outline); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }

.primary-header-btn {
  background: var(--primary); color: white; border: none; padding: 18px 35px; border-radius: 40px; font-weight: 900; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 15px; box-shadow: 0 8px 20px rgba(119, 36, 50, 0.25); transition: 0.3s;
}
.primary-header-btn:hover { background: var(--primary-dark); transform: translateY(-3px); }

.secondary-header-btn {
  background: white; color: var(--primary); border: 3px solid var(--primary); padding: 16px 35px; border-radius: 40px; font-weight: 900; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 15px; transition: 0.3s;
}

.icon-button-back {
  background: white; border: 2px solid #eee; color: var(--primary); width: 55px; height: 55px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.icon-button-back:hover { background: var(--primary-light); transform: translateX(-6px); }

.table-container { background: var(--surface); border-radius: var(--border-radius-lg); padding: 25px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); overflow-x: auto; }
.bitacora-table { width: 100%; border-collapse: collapse; min-width: 1100px; }
.bitacora-table th { padding: 15px; border-bottom: 2px solid var(--background); color: var(--primary); font-size: 11px; text-transform: uppercase; font-weight: 900; letter-spacing: 0.8px; }
.bitacora-table td { padding: 15px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }

.status-pill { padding: 6px 14px; border-radius: 20px; font-size: 10px; font-weight: 900; text-transform: uppercase; display: inline-block; }
.status-pendienter { background: #E3F2FD; color: var(--info); }
.status-confirmada { background: #ede7f6; color: var(--reservado); }
.status-activa { background: #E8F5E9; color: var(--success); }
.status-finalizada { background: #F1F3F4; color: var(--outline); }
.status-rechazada { background: #FFEBEE; color: var(--error); }
.status-cancelada { background: #EEEEEE; color: #616161; border: 1px solid #E0E0E0; }

.table-filters { display: flex; justify-content: space-between; margin-bottom: 25px; gap: 20px; }
.search-field { background: white; display: flex; align-items: center; padding: 12px 20px; border-radius: 35px; border: 1px solid #ddd; flex: 1; max-width: 500px; }
.search-field input { border: none; outline: none; margin-left: 12px; width: 100%; font-size: 14px; }
.modern-select { padding: 12px 25px; border-radius: 35px; border: 1px solid #ddd; background: white; font-weight: 700; color: var(--primary); }

.datetime-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; background: #f8f9fa; padding: 15px; border-radius: 15px; margin-bottom: 10px; }
.input-field-inline { display: flex; flex-direction: column; }
.input-field-inline small { font-weight: 900; color: var(--primary); text-transform: uppercase; font-size: 8px; margin-bottom: 4px; }
.input-field-inline input { padding: 12px; border-radius: 10px; border: 1px solid #ddd; outline: none; font-size: 13px; }

.dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 3000; backdrop-filter: blur(8px); }
.dialog { background: white; border-radius: 32px; padding: 40px; width: 95%; max-width: 750px; max-height: 90vh; overflow-y: auto; }
.dialog-title { font-size: 24px; color: var(--primary); margin-bottom: 30px; font-weight: 900; text-align: center; }

.material-selection-grid { display: grid; gap: 10px; background: #f8f9fa; padding: 15px; border-radius: 20px; }
.material-checkbox-item { display: flex; align-items: center; gap: 15px; padding: 12px; background: white; border-radius: 15px; border: 1px solid #eee; }

textarea { width: 100%; padding: 15px; border-radius: 15px; border: 1px solid #eee; resize: none; min-height: 100px; outline: none; font-size: 14px; }

.action-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-table { border: none; padding: 10px 16px; border-radius: 12px; font-size: 10px; font-weight: 900; cursor: pointer; transition: 0.2s; text-transform: uppercase; }
.btn-confirm { background: #673AB7; color: white; }
.btn-deliver { background: var(--success); color: white; }
.btn-reject { background: var(--error); color: white; }
.btn-finish { background: var(--primary); color: white; }
.btn-cancel-user { background: #fbe9eb; color: var(--error); border: 1.5px solid var(--error); }
.btn-cancel-user:hover { background: var(--primary-light); }
.btn-delete { background: #fbe9eb; color: var(--error); border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-weight: bold; }

.dialog-actions { display: flex; justify-content: flex-end; gap: 20px; margin-top: 40px; }
.dialog-btn-confirm { background: var(--primary); color: white; border: none; padding: 22px 55px; border-radius: 25px; font-weight: 900; cursor: pointer; font-size: 18px; box-shadow: 0 10px 25px rgba(119, 36, 50, 0.3); }
.dialog-btn-cancel { background: #f1f1f1; color: var(--outline); border: none; padding: 22px 35px; border-radius: 25px; font-weight: 900; cursor: pointer; font-size: 18px; }

@media print {
  .top-app-bar, .table-filters, .header-actions, .icon-button-back, .dialog-backdrop, .btn-table, .btn-delete { display: none !important; }
  .table-container { box-shadow: none; padding: 0; }
  body { background: white; padding: 0; }
  .bitacora-table { font-size: 10px; width: 100% !important; }
}