* {
          box-sizing: border-box;
        }

        body {
          margin: 0;
          font-family: 'Poppins', sans-serif;
          background-color: #f4f4f4;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }

        /* =============================
          PANTALLAS GENERALES
        ============================= */
        .pantalla {
          display: none;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
          max-width: 1024px;
          padding: 40px;
        }

        .pantalla.activa {
          display: flex;
        }

        .oculto {
          display: none !important;
        }

        img.logo {
          max-width: 250px;
          margin-bottom: 40px;
        }

        .sucursal-activa {
          font-size: 18px;
          font-weight: 600;
          margin-top: -24px;
          margin-bottom: 28px;
          color: #333;
        }

        .form-local-login {
          width: 100%;
          max-width: 420px;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .form-local-login input {
          width: 100%;
          padding: 16px;
          border: 2px solid #d0d0d0;
          border-radius: 8px;
          font-size: 18px;
          font-family: inherit;
        }

        .form-local-login .local-password-input {
          -webkit-text-security: disc;
          text-security: disc;
        }

        .mensaje-error {
          font-size: 16px;
          color: #b00020;
          margin: 0;
        }

        h2 {
          font-size: 32px;
          margin-bottom: 30px;
        }

        p {
          font-size: 24px;
          margin-top: 20px;
        }

        .grid-tipo-servicio {
          display: grid;
          grid-template-columns: repeat(2, minmax(220px, 1fr));
          gap: 24px;
          width: 100%;
          max-width: 760px;
          margin-bottom: 30px;
        }

        .btn-tipo-servicio {
          min-height: 220px;
          padding: 28px;
          border: 3px solid #05a09c;
          border-radius: 12px;
          background: #ffffff;
          color: #05a09c;
          cursor: pointer;
          font-family: inherit;
          font-size: 32px;
          font-weight: 600;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 18px;
        }

        .btn-tipo-servicio img {
          width: 96px;
          height: 96px;
        }

        .btn-tipo-servicio:hover {
          background: #e0f7f6;
          box-shadow: 0 0 10px rgba(5, 160, 156, 0.35);
        }

        /* =============================
          GRILLA DE MÁQUINAS (OPCIONES)
        ============================= */
        .grid-servicios {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          margin-bottom: 40px;
          width: 100%;
        }

        /* Máquina Normal (no seleccionada) */
        .opcion {
          border: 2px solid #bdbdbd;
          border-radius: 12px;
          padding: 20px;
          background: #e0f7f6;
          cursor: pointer;
          transition: 0.3s;
          user-select: none;
          opacity: 0.4;
          transform: scale(1);
        }

        .opcion img {
          width: 60px;
          height: 60px;
          margin-bottom: 10px;
        }

        .opcion:hover {
          opacity: 0.7;
          filter: grayscale(10%);
        }

        /* Máquina Seleccionada */
        .opcion.seleccionada {
          border: 3px solid #05a09c;
          background: #d1f2f1;
          opacity: 1 !important; 
          filter: none;
          box-shadow: 0 0 10px rgba(5, 160, 156, 0.6); 
          transform: scale(1.03); 
        }

        /* Máquina en Uso (Deshabilitada) */
        .opcion.disabled {
          opacity: 0.4;
          cursor: not-allowed;
          filter: grayscale(80%);
          position: relative;
        }

        .opcion.disabled::after {
          content: attr(data-estado-label);
          position: absolute;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);
          background-color: rgba(255, 0, 0, 0.8);
          color: white;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 0.8rem;
          font-weight: bold;
        }

        /* =============================
          BOTONES
        ============================= */
        .btn-principal,
        .btn-volver {
          padding: 25px;
          margin-top: 10px;
          font-size: 24px;
          width: 90%;
          max-width: 500px;
          border: none;
          border-radius: 12px;
          background-color: #05a09c;
          color: white;
          font-weight: 600;
          cursor: pointer;
        }

        .btn-principal:disabled {
          background-color: #cccccc;
          cursor: not-allowed;
        }

        .btn-volver {
          background-color: #888;
          margin-top: 20px;
        }

        .btn-volver:hover {
          background-color: #666;
        }

        .btn-cancelar {
          padding: 15px 20px;
          font-size: 18px;
          margin-top: 10px;
          color: #05a09c;
          background-color: transparent;
          border: none;
          text-decoration: underline;
          cursor: pointer;
        }

        .btn-cancelar:hover {
          color: #04827e;
        }

        /* =============================
          TEXTOS Y PANTALLA PAGO
        ============================= */
        .monto {
          font-size: 32px;
          margin: 30px 0;
          font-weight: bold;
        }

        .icono {
          max-width: 200px;
          margin: 30px 0;
        }

        #mensaje-pago {
          font-size: 22px;
          margin-bottom: 20px;
          display: none;
        }

        #temporizador {
          font-size: 20px;
        }

        /* =============================
          INPUTS (Texto, Números y Claves)
        ============================= */
        input[type="text"], 
        input[type="number"], 
        input[type="password"],
        input[type="tel"]  {
            font-size: 24px;
            padding: 15px;
            width: 90%; /* <-- CAMBIAR ESTO DE 80% a 90% */
            max-width: 500px;
            border-radius: 8px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        @media (max-width: 720px) {
          .grid-tipo-servicio {
            grid-template-columns: 1fr;
          }
        }