:root{
  --vino:#6a1b3a;--vino2:#5b1531;--azul:#d9ecf2;--borde:#dcdfe6;--verde:#28a745;--rojo:#dc3545;
}

*{box-sizing:border-box;font-family:'Montserrat',sans-serif}
body{margin:0;background:#f3f4f6;color:#2c3e50}

.header{background:var(--vino);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;color:#fff;font-size:13px}
.header-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.3px}
.header-logo{width:26px;height:26px;object-fit:contain}
.header-title{font-size:14px}
.container{max-width:1200px;margin:25px auto}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--borde)}
.tabs button{background:none;border:none;padding:12px 10px;font-size:13px;cursor:pointer}
.tabs .active{background:var(--vino);color:#fff}
.panel{background:#fff;margin-top:20px;padding:30px 40px;border-radius:3px}
.hidden{display:none}

h2{font-size:20px;margin:0 0 20px;border-bottom:3px solid var(--vino);display:inline-block;padding-bottom:5px}
.alert{background:var(--azul);padding:12px;text-align:center;color:#7a1c1c;font-size:13px;margin-bottom:25px}
.form-group{margin-bottom:18px}
.form-group label{font-size:12px;font-weight:500;display:block;margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:9px;border:1px solid var(--borde);border-radius:3px;font-size:13px}
small{font-size:12px;color:#8a8a8a}

.actions{margin-top:20px;display:flex;gap:10px}
.actions button{padding:8px 16px;font-size:13px;border-radius:3px;cursor:pointer}
.btn-outline{background:#fff;border:1px solid var(--vino);color:var(--vino)}
.btn-main{background:var(--vino);border:none;color:#fff}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.estado{display:flex;gap:10px;margin:15px 0}
.estado label{border:1px solid var(--borde);padding:6px 12px;border-radius:3px;font-size:13px;cursor:pointer}
.estado .pagado{border-color:var(--verde);color:var(--verde)}
.estado .deuda{border-color:var(--rojo);color:var(--rojo)}

.table-header{background:var(--azul);padding:10px;font-size:13px;text-align:center}
table{width:100%;border-collapse:collapse;font-size:13px}
thead{background:var(--vino);color:#fff}
th,td{padding:10px;border-bottom:1px solid var(--borde)}
.badge{padding:4px 10px;border-radius:12px;color:#fff;font-size:12px}
.badge.green{background:var(--verde)}
.icon{border:none;background:none;font-size:16px;cursor:pointer}
.icon.edit{color:#7e3af2}
.icon.delete{color:var(--rojo)}

.footer{margin-top:60px;background:var(--vino2);color:#fff;padding:35px 40px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;font-size:13px}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.3px}
.footer-logo{width:30px;height:30px;object-fit:contain}

@media (max-width: 900px){
  .header{padding:0 20px;gap:12px;flex-wrap:wrap;height:auto;min-height:60px}
  .container{margin:20px auto;padding:0 16px}
  .panel{padding:24px}
  .tabs{flex-wrap:wrap;gap:10px}
  .tabs button{padding:10px 12px}
  .grid2{grid-template-columns:1fr}
  .actions{flex-wrap:wrap}
  .footer{padding:28px 20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px}
}

@media (max-width: 600px){
  .header{padding:12px 16px;font-size:12px;align-items:flex-start}
  .header-brand{gap:8px}
  .container{margin:16px auto;padding:0 12px}
  h2{font-size:18px}
  .panel{padding:18px}
  .form-group input,.form-group textarea{font-size:12px}
  .actions button{flex:1}
  table{display:block;overflow-x:auto;white-space:nowrap}
  th,td{padding:8px}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width: 360px){
  .tabs button{font-size:12px}
  .badge{font-size:11px}
}