.contenedor-principal {
  background-color: white;
  border: 2px solid black;
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  color: black; /* Asegura que el texto sea legible */
}
    
    * { box-sizing: border-box; }
    .barra-superior {
      background-color: #111;
      color: #fff;
      padding: 5px 10px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }
    .encabezado {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 2px solid #444;
      padding: 10px;
    }
    .negocio, .eslogan {
      width: 50%;
      padding: 5px;
    }
    .negocio input {
      width: 100%;
      font-size: 24px;
      font-weight: bold;
      padding: 10px;
    }
    .eslogan input {
    width: 294px;
    font-size: 18px;
    padding: 8px;
    margin-left: -6px;
}
    .datos-contacto {
      width: 50%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: -5px;
    }
    .datos-contacto input {
      padding: 5px;
      font-size: 14px;
      width: 100%;
    }
    .acciones-contacto {
      width: 100%;
      padding: 10px;
      display: flex;
      gap: 10px;
    }
    .acciones-contacto button {
    padding: 6px 9px;
    font-size: 14px;
    position: relative;
    top: -64px;
    margin-left: 31px;
    background: #c12222;
    color: #fff;
    }
    .tabla-productos {
      width: 100%;
      margin-top: -51px;
      border-collapse: collapse;
    }
    .tabla-productos th, .tabla-productos td {
      border: 1px solid #000;
      padding: 5px;
      text-align: center;
    }
    .tabla-productos input {
      width: 100%;
      font-size: 16px;
      background-color: transparent;
      color: #000;
    }
    .tabla-productos .col-producto { width: 53%; }
    .tabla-productos .col-precio { width: 15%; }
    .tabla-productos .col-cantidad { width: 10%; }
    .tabla-productos .col-x { width: 5%; }

    .fila-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px;
    }
    .total-izquierda {
      padding: 15px 20px;
      border: 2px solid #000;
      font-size: 18px;
      font-weight: bold;
      background-color: transparent;
    }
    .acciones-derecha {
      display: flex;
      align-items: center;
    }
    .acciones-derecha button {
      padding: 8px 16px;
      font-size: 14px;
      background-color: #444;
      color: white;
      border: none;
    }

    .valores {
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
      gap: 10px;
    }
    .valores input {
      width: 100%;
      height: 50px;
      font-size: 18px;
      text-align: center;
      background: transparent;
      border: 2px solid #000;
      color: #000;
    }

    .seccion-calculadora {
      text-align: center;
      padding: 20px;
    }
    .seccion-calculadora button {
      padding: 15px;
      font-size: 18px;
      width: 100%;
      background-color: #555;
      color: white;
      border: none;
    }

    /* Modal Calculadora */
    .modal {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
    }
    .modal-contenido {
      background: #333;
      padding: 20px;
      border: 2px solid #fff;
      width: 300px;
      text-align: center;
    }
    .modal input {
      width: 90%;
      padding: 10px;
      margin: 5px 0;
      font-size: 18px;
      background: transparent;
      border: 1px solid #fff;
      color: white;
    }
    .modal button {
      padding: 8px;
      margin-top: 10px;
    }
    .calculadora {
    background: white;
    padding: 20px;
    border-radius: 16px;
    width: 100%;
  }

  .pantalla {
    width: 100%;
    height: 40px;
    font-size: 18px;
    margin-bottom: 10px;
    padding: 6px;
    text-align: right;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #f9f9f9;
  }

  .botones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }

  .boton {
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: #e0e0e0;
    cursor: pointer;
    transition: 0.2s;
  }

  .boton:hover {
    background: #d0d0d0;
  }

  .boton.operador {
    background: #4caf50;
    color: white;
  }

  .boton.operador:hover {
    background: #45a049;
  }

  .boton.igual {
    background: #2196f3;
    color: white;
  }

  .boton.igual:hover {
    background: #1976d2;
  }

  .boton.borrar {
    background: #f44336;
    color: white;
  }

  .boton.borrar:hover {
    background: #d32f2f;
  }