.card { background: #fff; padding: 20px 30px; border-radius: 12px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); width: 700px; margin: 40px auto; font-family: Arial, sans-serif; } /* Título */ .cardTitle { font-size: 18px; margin-bottom: 15px; font-weight: 600; color: #333; } /* Tabs */ .tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .tab { flex: 1; background: none; border: none; padding: 10px; font-size: 14px; cursor: pointer; transition: 0.3s; color: #333; } .active { font-weight: 600; color: #0056d2; border-bottom: 2px solid #0056d2; } /* Formulario */ .formGroup { display: flex; flex-direction: column; margin-bottom: 15px; } .formGroup label { font-size: 14px; margin-bottom: 6px; color: #444; font-weight: 500; } .formGroup select, .formGroup input { padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; transition: border 0.3s, box-shadow 0.3s; } .formGroup select:focus, .formGroup input:focus { border-color: #0056d2; box-shadow: 0px 0px 4px rgba(0, 86, 210, 0.3); outline: none; } /* Botones */ .actions { text-align: right; } .btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; transition: 0.3s; } .btnPrimary { background: #0056d2; color: white; } .btnPrimary:hover { background: #0041a8; }