/* ============================
   Inventario Siigo - Premium UI
   ============================ */

:root {
  /* Typography */
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Colors */
  --primary: #4f46e5;
  /* Indigo 600 */
  --primary-hover: #4338ca;
  /* Indigo 700 */
  --primary-light: #e0e7ff;
  /* Indigo 100 */
  --secondary: #ec4899;
  /* Pink 500 */

  --bg-body: #f8fafc;
  /* Slate 50 */
  --bg-surface: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.8);

  --text-main: #0f172a;
  /* Slate 900 */
  --text-muted: #64748b;
  /* Slate 500 */
  --text-light: #94a3b8;
  /* Slate 400 */

  --border: #e2e8f0;
  /* Slate 200 */
  --border-focus: #818cf8;
  /* Indigo 400 */

  --success: #10b981;
  /* Emerald 500 */
  --success-bg: #d1fae5;
  --warning: #f59e0b;
  /* Amber 500 */
  --warning-bg: #fef3c7;
  --danger: #ef4444;
  /* Red 500 */
  --danger-bg: #fee2e2;

  /* Spacing & Layout */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  --header-height: 80px;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  margin-top: 0;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  margin-bottom: 1rem;
}

small {
  font-size: 0.875rem;
}

/* Utilities */
.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

/* Layout */
.header {
  background: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%);
  color: white;
  padding: 2rem 0;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.header h1 {
  color: white;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin: 0;
}

.header code {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Menlo', monospace;
}

.container {
  max-width: 1280px;
  margin: -2rem auto 2rem;
  /* Overlap header */
  padding: 0 1.5rem;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Cards */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.card h2 {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card h2::before {
  content: '';
  display: block;
  width: 6px;
  height: 24px;
  background: var(--secondary);
  border-radius: 3px;
}

/* Search Section */
#quick-filter {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

#quick-search {
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  background: var(--bg-body);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

#quick-search:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 4px var(--primary-light);
}

#clear-search {
  background: var(--bg-body);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

#clear-search:hover {
  background: var(--border);
  color: var(--text-main);
}

/* Tables */
.table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

thead th {
  background: var(--bg-body);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: white;
  transition: background 0.15s;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--bg-body);
}

/* Group Headers */
tr.group-row td {
  background: var(--primary-light);
  color: var(--primary-hover);
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 0.75rem 1rem;
}

/* Inputs in Table */
input.cfg-input {
  width: 100px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: right;
  font-family: 'Menlo', monospace;
  font-size: 0.9rem;
  transition: all 0.2s;
}

input.cfg-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Status & Badges */
.days-left {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 3rem;
}

/* Logic-based styling overrides */
tr.under-min td {
  background: #fff5f5;
  /* Very light red */
}

tr.under-min:hover td {
  background: #fee2e2;
}

tr.under-min .days-left {
  background: var(--danger-bg);
  color: var(--danger);
}

tr:not(.under-min) .days-left {
  background: var(--success-bg);
  color: var(--success);
}

/* Tabs (if used) */
.tabs {
  margin-bottom: 2rem;
}

.tab-list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.tab-button {
  background: transparent;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab-button:hover {
  background: var(--bg-body);
  color: var(--text-main);
}

.tab-button.active {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.tab-meta {
  font-size: 0.75em;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.tab-button:not(.active) .tab-meta {
  background: var(--border);
  color: var(--text-muted);
}

/* Fichas Grid (Card View) */
.fichas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.fichas-cell {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fichas-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-hover);
}

.fichas-cell.under-min {
  border-color: var(--danger);
  background: #fff5f5;
}

.ficha-name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.4;
}

.ficha-qty {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}

.ficha-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin-top: auto;
}

/* MP19 Specifics */
.fichas-cell.item.mp19 .row.editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--bg-body);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
}

.fichas-cell.item.mp19 .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fichas-cell.item.mp19 .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .header {
    padding: 1rem 0;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .container {
    padding: 0 0.5rem;
    margin-top: -1rem;
  }

  .card {
    padding: 0.75rem;
    border-radius: var(--radius-md);
  }

  /* Mobile Table to Compact List Transformation */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Compact Item Container */
  tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "qty name days"
      "code inputs inputs";
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0.5rem;
    margin-bottom: 0;
    background: white;
    border-bottom: 1px solid var(--border);
    align-items: center;
  }

  tr:last-child {
    border-bottom: none;
  }

  /* Group Headers */
  tr.group-row {
    display: block;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    margin: 0;
    padding: 0.5rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  tr.group-row td {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0;
    border: none;
    display: block;
  }

  /* Cell Resets */
  td {
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    display: block;
  }

  td::before {
    content: none !important;
  }

  /* Hide Redundant Columns */
  td[data-label="Grupo"] {
    display: none;
  }

  /* --- Grid Areas & Styling --- */

  /* Quantity: Big & Bold */
  td[data-label="Cantidad"] {
    grid-area: qty;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    min-width: 3ch;
    text-align: right !important;
  }

  /* Name: Main Text */
  td[data-label="Nombre"] {
    grid-area: name;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Days: Badge */
  td[data-label="Días restantes"] {
    grid-area: days;
    justify-self: end;
  }

  td[data-label="Días restantes"] .days-left {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    height: auto;
  }

  /* Code: Subtle */
  td[data-label="Código"] {
    grid-area: code;
    font-family: 'Menlo', monospace;
    font-size: 0.75rem;
    color: var(--text-light);
  }

  /* Inputs Wrapper (Virtual) */
  /* We need to group the inputs in the 'inputs' area. 
     Since they are separate TDs, we can't wrap them in HTML.
     So we'll use grid placement for each.
     Actually, let's make them flex items in the row 2.
  */

  /* Re-think Row 2: Code | Input1 Input2 Input3 */
  /* Since we can't wrap TDs, we have to place them individually. */

  tr {
    grid-template-columns: auto 1fr auto;
    /* Row 1: Qty | Name | Days */
    /* Row 2: Code | InputsContainer (span 2) */
  }

  td[data-label="Mínimo"],
  td[data-label="Pack"],
  td[data-label="Consumo/día"] {
    /* We'll float them or inline-block them in the second row? 
       No, grid items. We need to hack the grid or use flex on the TR?
       No, TR is grid.
       Let's put them all in the second row, but we need them to flow.
       
       Alternative: Make the TR display: flex; flex-wrap: wrap;
    */
    display: none;
    /* Hide by default, show only if needed? No user wants to edit. */
  }

  /* Let's try Flexbox for the TR to handle variable content better */
  tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  /* Row 1 Items */
  td[data-label="Cantidad"] {
    order: 1;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    margin-right: 0.25rem;
  }

  td[data-label="Nombre"] {
    order: 2;
    flex: 1;
    min-width: 0;
    /* Allow truncation */
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  td[data-label="Días restantes"] {
    order: 3;
  }

  /* Row 2 Items (Break to new line) */
  td[data-label="Código"] {
    order: 4;
    width: 100%;
    /* Force break */
    flex-basis: 100%;
    margin-bottom: -0.5rem;
    /* Pull inputs up slightly */
    font-size: 0.7rem;
    color: var(--text-light);
    display: none;
    /* Actually, maybe hide code to save space? Or show small. */
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  /* Inputs Row */
  /* We want inputs to be on the next line (or same line as code). */
  /* Let's make a container for inputs? We can't. */

  /* Let's group inputs visually */
  td[data-label="Mínimo"],
  td[data-label="Pack"],
  td[data-label="Consumo/día"] {
    order: 5;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-body);
    padding: 0.25rem;
    border-radius: 4px;
  }

  td[data-label="Mínimo"]::before {
    content: 'M';
  }

  td[data-label="Pack"]::before {
    content: 'P';
  }

  td[data-label="Consumo/día"]::before {
    content: 'C';
  }

  td[data-label="Mínimo"]::before,
  td[data-label="Pack"]::before,
  td[data-label="Consumo/día"]::before {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
  }

  input.cfg-input {
    width: 100%;
    min-width: 40px;
    padding: 0.1rem;
    font-size: 0.85rem;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 600;
    color: var(--text-main);
  }

  input.cfg-input:focus {
    background: white;
    box-shadow: 0 0 0 1px var(--primary);
    border-radius: 2px;
  }

  /* Adjust Fichas Grid for mobile */
  .fichas-grid {
    grid-template-columns: 1fr;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card,
.fichas-cell {
  animation: fadeIn 0.4s ease-out forwards;
}