body { font-family: Arial, sans-serif; margin: 20px; background: #fff8f2; color: #333; }
  .menu-row { display: flex; gap: 20px; flex-wrap: nowrap; margin-bottom: 20px; }
  .menu-row > div { width: 50%; min-width: 300px; }
  .menu-section h2 { margin-top: 0; background: #f08a5d; color: white; padding: 10px; border-radius: 8px; text-align: center; }
  .item { display: flex; justify-content: space-between; align-items: center; background: white; padding: 10px 15px; border-radius: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.1); margin-bottom: 8px; }
  button { background: #f08a5d; color: white; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; }
  button:hover { background: #d76b39; }
  #carrito { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); height: fit-content; margin-top: 20px; }
  #pedido-selector { text-align: center; margin-bottom: 10px; }
  #pedido-selector button { margin: 0 5px; padding: 8px 15px; font-weight: bold; }
  #pedido-selector .activo { background: #4caf50; }
  #lista-carrito { list-style: none; margin: 0; padding: 0; }
  #lista-carrito li { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #eee; }
  #lista-carrito button { background: #e57373; padding: 4px 8px; }
  #lista-carrito button:hover { background: #c62828; }
  .total { font-weight: bold; margin-bottom: 15px; font-size: 1.2em; }
  .metodo-pago { margin-top: 10px; }
  .metodo-pago label { margin-right: 10px; cursor: pointer; }
  .efectivo-extra { margin-top: 10px; display: none; }
  .efectivo-extra .linea-entrega { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .efectivo-extra input { width: 70px; padding: 5px; border-radius: 5px; border: 1px solid #ccc; text-align: right; }
  .efectivo-extra span { font-weight: bold; white-space: nowrap; }
  .billetes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
  .billetes button { padding: 5px 10px; font-weight: bold; border-radius: 5px; }
  .limpiar-entregado { margin-top: 10px; background: #e57373; }
  .limpiar-entregado:hover { background: #c62828; }
  .carrito-inner { display: flex; gap: 20px; flex-wrap: nowrap; }
  .carrito-inner > div { width: 50%; min-width: 300px; }
  #finalizar { width: 100%; padding: 15px; font-size: 1.1em; background: #4caf50; border: none; color: white; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
  #finalizar:hover { background: #43a047; }
  @media (max-width: 600px) { .menu-row, .carrito-inner { flex-direction: column; } .menu-row > div, .carrito-inner > div { width: 100%; } }
  
.monitor-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 2rem;
    color: white;
}
  
  .monitor-card.monitor-center {
    text-align: center;
}
.monitor-card {
    background: #2e3249;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    text-align: left;
}

.monitor-circle[style*="--value:"] {
    background: conic-gradient(hsl(calc(120 - var(--value) * 1.2), 70%, 45%) 0deg, hsl(calc(120 - var(--value) * 1.2), 70%, 45%) calc(var(--value) * 3.6deg), #3a3e5a calc(var(--value) * 3.6deg), #3a3e5a 360deg);
}

.monitor-circle {
    --circle-size: 120px;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background: conic-gradient(green 0deg, green calc(var(--value) * 3.6deg), #3a3e5a calc(var(--value) * 3.6deg), #3a3e5a 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    transition: background 0.5s ease;
}
.monitor-inside-circle {
    width: 90px;
    height: 90px;
    background: #2e3249;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: #fff;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}
.monitor-card h2{
	color:white;
}
  h1, h2 {
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        th, td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f08a5d;
            color: white;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        .entregado {
            color: green;
            font-weight: bold;
        }

        .pendiente {
            color: red;
            font-weight: bold;
        }

        /* Formulario simple */
        form {
            margin: 20px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        input, select, button {
            padding: 8px;
            font-size: 14px;
        }

        button {
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }