:root{--bg:#f2fff5;--brand:#22c55e;--brand-600:#16a34a;--ink:#0f172a;--muted:#64748b;--card:#fff;--danger:#ef4444;--border:#e2e8f0}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.app-header,.app-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#eaffef;border-bottom:1px solid var(--border)}
.app-footer{margin-top:24px;border-top:1px solid var(--border);border-bottom:none}
.brand{display:flex;align-items:center;gap:8px;font-size:18px}
.dot{width:10px;height:10px;background:var(--brand);border-radius:50%}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid .full{grid-column:1/-1}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff}
.btn{background:var(--brand);color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn:hover{background:var(--brand-600)}
.btn.outline{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.danger{background:var(--danger)}
.link{display:block;text-decoration:none;color:inherit}
.error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;padding:8px;border-radius:10px}
.muted{color:var(--muted);font-size:14px}
@media (max-width:800px){ .grid.two{grid-template-columns:1fr} }


.app-header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.app-header form {
  position: absolute;
  right: 20px; 
}

.app-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 500;
}

.btn.cancelar {
  background: var(--danger) !important; 
  color: #fff !important;
  border: none;
}

.btn.cancelar:hover {
  background: #dc2626 !important; 
}

.form-actions{
  display:flex;
  justify-content:center; 
  align-items:center;
  gap:12px;              
  margin-top: 8px;
}

.form-actions .btn{
  min-height: 38px;
  padding: 10px 14px;
}

.form-volver {
  display: flex;
  justify-content: flex-start; 
  margin-top: 12px;
}

.form-volver {
  display: flex;
  justify-content: flex-start;  
  align-items: center;          
  gap: 10px;                    
  margin-top: 12px;
}

.btn.volver {
  background: #9ca3af;
  color: #fff;
  border: none;
}

.btn.volver:hover {
  background: #6b7280;
}

.btn.editar {
  background: #facc15;   
  color: #1f2937;     
  border: none;
}

.btn.editar:hover {
  background: #eab308;   
}

.btn.vinculo {
  background: #3b82f6; 
  color: #fff;
  border: none;
}

.btn.vinculo:hover {
  background: #2563eb;   
}

.btn.buscar {
  background: #8b5cf6;    
  color: #fff;
  border: none;
}

.btn.buscar:hover {
  background: #7c3aed;   
}

.btn.nuevo {
  background: #22c55e; 
  color: #fff;
  border: none;
}

.btn.nuevo:hover {
  background: #16a34a;  
}

.bar{
  display: flex;
  justify-content: space-between; 
  align-items: center;            
  gap: 12px;
}

.bar h1{
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 560px){
  .bar{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bar > div{
    display: flex;
    justify-content: flex-end; 
  }
}

a.btn {
  text-decoration: none; 
  color: #000;            
  text-decoration: none;
}

a.btn:hover {
  color: #000;
  text-decoration: none; 
}

.btn.outline {
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  text-decoration: none;   
}

.btn.outline:hover {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
}

.btn{
  padding: 6px 12px;  
  min-height: 32px;   
  line-height: 1.1;  
}

a.btn{
  display: inline-flex;     
  align-items: center;      
  justify-content: center;
  padding: 6px 10px;       
  min-height: 30px;        
  line-height: 1;           
  text-decoration: none;   
  vertical-align: middle;
}

a.btn.outline{
  padding: 5px 10px;      
}

a.btn.sm{
  padding: 4px 8px;
  min-height: 26px;
  font-size: 0.92rem;
}