:root{
  --marron:#8b5e3c;
  --marron-oscuro:#5c3a21;
  --beige:#f1e3d3;
  --beige-claro:#faf6f1;
  --blanco:#ffffff;
  --gris:#6f5f55;
  --acento:#d4a373;
  --verde:#4f772d;
  --rojo:#b23a48;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,0.05);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI', sans-serif;
}

body{
  background:var(--beige-claro);
  min-height:100vh;
  color:var(--gris);
}

/* ================= HEADER ================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(90deg, var(--marron), var(--marron-oscuro));
  color: white;
  display: flex;
  align-items: center;
  padding: 0 25px;
  z-index: 2000; /* Mayor que el sidebar y otros elementos */
  box-shadow: var(--shadow);
}

.header h1{
  font-size:18px;
  font-weight:600;
}

.menu-btn {
  font-size: 22px;
  margin-right: 15px;
  background: none;
  border: none;
  color: white;
  cursor: pointer; /* Asegúrate de que sea un puntero cuando pases el mouse sobre él */
}
/* ================= SIDEBAR ================= */

.sidebar {
  position: fixed;
  top: 70px;
  left: -240px; /* Está fuera de la pantalla por defecto */
  width: 240px;
  height: 100%;
  background: var(--marron-oscuro);
  padding: 25px 15px;
  transition: 0.3s ease;
  z-index: 1000; /* Menor que el header y el switch */
}

/* Mostrar el sidebar cuando esté activo */
.sidebar.active {
  left: 0; /* Despliega el sidebar */
}

.sidebar ul{
  list-style:none;
}

.sidebar ul li{
  margin:14px 0;
}

.sidebar ul li a{
  text-decoration:none;
  color:white;
  padding:10px 14px;
  display:block;
  border-radius:10px;
  transition:0.25s;
}

.sidebar ul li a:hover{
  background:var(--beige);
  color:var(--marron-oscuro);
  transform:translateX(4px);
}

/* ================= CONTENT ================= */

.content{
  margin-top:90px;
  margin-left:260px;
  padding:35px;
  max-width:1300px;
}

/* ================= CARDS ================= */

section{
  background:var(--blanco);
  padding:25px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:25px;
}

section h2{
  margin-bottom:18px;
  color:var(--marron-oscuro);
  font-size:18px;
}
/* ================= SELECT PERSONALIZADO ================= */

/* ================= SELECT PERSONALIZADO ================= */

select{
  width:100%;
  padding:12px 40px 12px 14px; /* espacio para flecha */
  border-radius:12px;
  border:1px solid #e2d8cf;
  background:var(--beige-claro);
  font-size:14px;
  color:var(--gris);
  cursor:pointer;
  transition:0.25s ease;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-image:url("data:image/svg+xml;utf8,<svg fill='%235c3a21' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
}

select:hover{
  border-color:var(--acento);
}

select:focus{
  outline:none;
  border-color:var(--marron);
  background:white;
  box-shadow:0 0 0 3px rgba(139,94,60,0.15);
}

/* ================= INPUTS ================= */

input{
  width:100%;
  padding:11px 14px;
  border-radius:10px;
  border:1px solid #e2d8cf;
  margin-top:6px;
  margin-bottom:15px;
  font-size:14px;
  background:var(--beige-claro);
  transition:0.2s;
}

input:focus, select:focus{
  outline:none;
  border-color:var(--marron);
  background:white;
  box-shadow:0 0 0 2px rgba(139,94,60,0.15);
}

/* ================= BUTTONS ================= */

button{
  background:var(--marron);
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:10px;
  cursor:pointer;
  font-weight:500;
  transition:0.25s;
}

button:hover{
  background:var(--marron-oscuro);
  transform:translateY(-2px);
}

/* ================= TABLE ================= */

table{
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
  background:white;
  border-radius:12px;
  overflow:hidden;
}

thead{
  background:var(--beige);
}

th{
  padding:12px;
  color:var(--marron-oscuro);
  font-weight:600;
}

td{
  padding:11px;
  border-bottom:1px solid #f0e6da;
  text-align:center;
}

tbody tr:hover{
  background:#f9f4ef;
}

/* ================= RESUMEN ================= */

.card-resumen{
  padding:35px;
  border-radius:var(--radius);
  background:linear-gradient(145deg,#ffffff,#f7f2ec);
  box-shadow:var(--shadow);
}

.resumen-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
}

.resumen-item{
  padding:14px 16px;
  border-radius:12px;
  background:var(--beige-claro);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
}

.resumen-item strong{
  font-size:15px;
}

.resumen-item.total{
  background:#f3e7dc;
  font-weight:600;
}

.resumen-item.precio{
  background:#efe2d6;
  font-size:18px;
  font-weight:bold;
  color:var(--marron-oscuro);
}

.resumen-item.ganancia{
  background:#eaf4e4;
  color:var(--verde);
  font-weight:600;
}

/* ================= BOTÓN GUARDAR ================= */

.btn-guardar-circle{
  margin-top:30px;
  width:100%;
  padding:15px;
  border-radius:40px;
  font-size:15px;
  font-weight:600;
}

.btn-guardar-circle:hover{
  transform:translateY(-3px);
}

/* ================= SWITCH ================= */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 34px;
  transition: .3s;
}

.slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: .3s;
}

.switch input:checked + .slider {
  background: var(--marron);
}

.switch input:checked + .slider:before {
  transform: translateX(22px);
}
/* ================= MODAL ================= */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:0.3s ease;
  z-index:2000;
}

.modal-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.modal-box{
  background:white;
  padding:30px;
  width:90%;
  max-width:400px;
  border-radius:var(--radius);
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
  animation:fadeUp 0.3s ease;
}

.modal-buttons{
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

@keyframes fadeUp{
  from{ transform:translateY(10px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* ================= RESPONSIVE ================= */

@media(max-width:1000px){
  .content{ margin-left:0; }
  .sidebar{ left:-250px; }
  .sidebar.active{ left:0; }
}

@media(max-width:600px){
  .resumen-item{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}