.card {
  overflow-x: auto;
}
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.table {
  min-width: 950px;
  width: 100%;
  max-width: none;
  table-layout: auto;
}
@media (max-width: 900px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  .table {
    font-size: 0.92rem;
    min-width: 700px;
  }
  .table th, .table td {
    padding: 6px 4px;
  }
  .btn.btn-danger.btnEliminar {
    min-width: 60px;
    font-size: 0.9rem;
    padding: 5px 6px;
  }
}
/* Tabla responsive para producción */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table th:last-child, .table td:last-child {
  text-align: center;
  white-space: nowrap;
}
.btn.btn-danger.btnEliminar {
  padding: 6px 10px;
  font-size: 0.95rem;
  min-width: 70px;
  max-width: 110px;
  word-break: keep-all;
}
/* Modal centrado */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.18);
  z-index: 2000;
}
.modal-content {
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  animation: modalIn .18s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
  from { transform: translateY(40px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* styles.css - estilo base y responsivo (tablet-friendly) */
:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --accent:#2b6cb0;
  --muted:#6b7280;
  --sidebar:#1f2937;
  --sidebar-text:#ffffff;
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;background:var(--bg);color:#111}

a{color:var(--accent);text-decoration:none}

.auth-page .auth-container{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
.card{background:var(--card);padding:20px;border-radius:8px;box-shadow:0 4px 14px rgba(15,23,42,0.06);width:100%;overflow-x:auto;}
.card h1{margin-top:0}
label{display:block;margin:12px 0;font-size:0.95rem}
label input{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:6px}
.btn{display:inline-block;padding:10px 14px;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:10px}
.alert{background:#fee2e2;color:#991b1b;padding:10px;border-radius:6px;margin-bottom:10px}
.success{background:#ecfdf5;color:#065f46;padding:10px;border-radius:6px;margin-bottom:10px}

/* Layout con sidebar */
.layout{display:flex;min-height:100vh}
.sidebar{
  background:var(--sidebar);color:var(--sidebar-text);width:260px;flex-shrink:0;transition:transform .25s ease-in-out;
  padding:20px 12px;position:fixed;left:0;top:0;bottom:0;overflow:auto;
}
.brand h2{margin:0 0 12px 0}
.menu{display:flex;flex-direction:column}
.menu a{color:var(--sidebar-text);padding:10px 12px;border-radius:6px;margin:6px 0;display:block}
.menu a.active{background:rgba(255,255,255,0.08)}
/* submenu under Producto */
.menu-item .menu-parent{color:var(--sidebar-text);padding:10px 12px;border-radius:6px;margin:6px 0;display:block;cursor:pointer}
.menu-item .submenu{display:none;padding-left:12px;margin-left:6px}
.menu-item.open .submenu{display:block}
.menu-item .submenu a{padding:8px 12px;margin:4px 0;border-radius:6px;display:block;color:var(--sidebar-text)}
.menu-item .menu-parent::after{content:'▾';float:right;opacity:0.8}
.menu-item.open .menu-parent::after{content:'▴'}
.main{margin-left:260px;flex:1;padding:20px}
.header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.toggle-btn{display:none;background:transparent;border:none;font-size:1.4rem;color:var(--muted);cursor:pointer}
  .collapse-btn{display:none;background:transparent;border:none;font-size:1.2rem;color:var(--muted);cursor:pointer;margin-right:8px}

  /* Collapsed sidebar (desktop) */
  .sidebar-collapsed .sidebar{transform:translateX(-100%) !important; pointer-events:none}
  .sidebar-collapsed .main{margin-left:0}
/* content cards */
.content .card{max-width:none;}

/* Table styling */
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border:1px solid #e5e7eb;padding:8px;text-align:left}
.table thead th{background:#fafafa;color:var(--muted)}
.table tbody tr:hover{background:#f9fafb}

/* Responsive: tablets and smaller */
@media (max-width: 1000px) {
  .sidebar{transform:translateX(-100%);position:fixed;z-index:1000}
  .sidebar.open{transform:translateX(0)}
  .toggle-btn{display:inline-block}
  .collapse-btn{display:none}
  .main{margin-left:0}
}
@media (min-width: 1001px) {
  /* collapse-btn visible on desktop */
  .collapse-btn{display:inline-block}
}

/* For very small screens fallback */
@media (max-width: 420px){
  .card{padding:16px}
}